Next.js 14-ലെ Server Components ബണ്ടിൽ സൈസ് (bundle size) ഏകദേശം 60% കുറയ്ക്കുകയും ഒരു സാധാരണ ബ്ലോഗ് പേജിലെ ഫസ്റ്റ്-പെയിന്റ് സമയം (first-paint time) 200 ms-ൽ താഴെ എത്തിക്കുകയും ചെയ്യുന്നു. ഇതിനർത്ഥം ഉപയോക്താക്കൾക്ക് ഉള്ളടക്കം വേഗത്തിൽ കാണാൻ കഴിയുമെന്നും സെർച്ച് എഞ്ചിനുകൾക്ക് പൂർണ്ണമായി റെൻഡർ ചെയ്ത HTML ലഭിക്കുമെന്നുമാണ്.

Next.js ഉപയോഗിച്ച് നിർമ്മിച്ച React ആപ്പുകളുടെ ഡിഫോൾട്ട് എക്സിക്യൂഷൻ മോഡലിൽ (execution model) ഈ പുതിയ റിലീസ് വലിയ മാറ്റം വരുത്തുന്നു. മുമ്പ് എല്ലാ കമ്പോണന്റുകളും ബ്രൗസറിലേക്ക് അയച്ചിരുന്ന സ്ഥാനത്ത്, ഡെവലപ്പർമാർക്ക് ഇപ്പോൾ UI-യുടെ ചില ഭാഗങ്ങളെ “Server Components” ആയി അടയാളപ്പെടുത്താം, അങ്ങനെ അവ ബാക്കെൻഡിൽ മാത്രം പ്രവർത്തിക്കും. ഈ കമ്പോണന്റുകളുടെ കോഡ് ഒരിക്കലും ക്ലയന്റിലേക്ക് എത്തുന്നില്ല, പകരം ഇന്ററാക്റ്റിവിറ്റി (interactivity) ആവശ്യമുള്ള ഭാഗങ്ങൾ മാത്രം ബ്രൗസറിൽ അവശേഷിക്കുന്നു.

ഈ മാറ്റം പ്രധാനമാകുന്നത് എന്തുകൊണ്ട്

നെറ്റ്‌വർക്ക് റിക്വസ്റ്റുകളുടെ (network requests) പെരുപ്പം, വലുപ്പമേറിയ JavaScript ബണ്ടിലുകൾ, പതുക്കെയുള്ള പേജ് ലോഡിംഗ് എന്നിങ്ങനെ പരസ്പരം ബന്ധപ്പെട്ട മൂന്ന് പ്രശ്നങ്ങളുമായി React ഡെവലപ്പർമാർ കാലങ്ങളായി പോരാടുന്നുണ്ട്. ഈ പ്രശ്നങ്ങൾ SEO-യെയും ബാധിക്കുന്നുണ്ട്, കാരണം ക്രോളർമാർക്ക് (crawlers) അയക്കുന്ന പ്രാരംഭ HTML പലപ്പോഴും ശൂന്യമായിരിക്കും, ഇത് സെർച്ച് ബോട്ടുകൾ ക്ലയന്റ് സൈഡ് ഹൈഡ്രേഷൻ (client-side hydration) ആകുന്നത് വരെ കാത്തിരിക്കാൻ നിർബന്ധിതരാക്കുന്നു. ഡാറ്റാ ഭാരമുള്ള ജോലികൾ പൂർണ്ണമായും ക്ലയന്റിൽ നിന്ന് മാറ്റിനിർത്തുന്നതിലൂടെ Next.js 14 ഈ പ്രശ്നത്തിന്റെ മൂലകാരണം പരിഹരിക്കുന്നു.

Server Components പഴയ മോഡലിൽ നിന്ന് എങ്ങനെ വ്യത്യാസപ്പെട്ടിരിക്കുന്നു

  • Server Components – ഇവ സെർവറിൽ പ്രവർത്തിക്കുന്നു, ഡാറ്റ ശേഖരിക്കുന്നു, ഡാറ്റാബേസുകളുമായി ആശയവിനിമയം നടത്തുന്നു, കൂടാതെ പ്ലെയിൻ HTML ഔട്ട്പുട്ട് നൽകുന്നു. ഇവയുടെ JavaScript ഒരിക്കലും നെറ്റ്‌വർക്ക് വഴി കൈമാറുന്നില്ല.
  • Client Components – ഇവ ബ്രൗസറിൽ തന്നെ നിലനിൽക്കുകയും ബട്ടൺ ക്ലിക്കുകൾ, ഫോം സബ്മിഷനുകൾ, അല്ലെങ്കിൽ React state അല്ലെങ്കിൽ effects ഉപയോഗിക്കുന്ന കമ്പോണന്റുകൾ പോലുള്ള UI ഇന്ററാക്ഷനുകൾ കൈകാര്യം ചെയ്യുകയും ചെയ്യുന്നു.

ഒരു ലളിതമായ ഡയറക്റ്റീവ് (directive) ഉപയോഗിച്ച് ഈ വിഭജനം ഫ്രെയിംവർക്ക് നടപ്പിലാക്കുന്നു. ഒരു ഫയലിന്റെ മുകളിൽ use client എന്ന് ചേർക്കുന്നത് ആ കമ്പോണന്റിനെ ക്ലയന്റ് സൈഡ് മാത്രമായി പരിഗണിക്കണമെന്ന് Next.js-നോട് പറയുന്നതിന് തുല്യമാണ്. ആ മാർക്കർ ഇല്ലാത്തവയെല്ലാം ഡിഫോൾട്ട് ആയി ഒരു Server Component ആയി കണക്കാക്കപ്പെടും.

യഥാർത്ഥ കണക്കുകൾ

ഒരു പേഴ്സണൽ ബ്ലോഗ് പേജിൽ നടത്തിയ ചെറിയൊരു പരീക്ഷണം ഇതിന്റെ സ്വാധീനം വ്യക്തമാക്കുന്നു. Fetching പ്രക്രിയ ഒരു Server Component-ലേക്ക് മാറ്റുകയും ലിസ്റ്റ് സ്റ്റാറ്റിക് HTML ആയി സെർവർ റെൻഡർ ചെയ്യുകയും ചെയ്തപ്പോൾ, JavaScript ബണ്ടിൽ 60% കുറയുകയും പേജ് 200 ms-ൽ താഴെ സമയം കൊണ്ട് റെൻഡർ ചെയ്യപ്പെടുകയും ചെയ്തു.

പ്രായോഗികമായ ഒരു ലെയറിംഗ് പാറ്റേൺ

  1. Bottom layer (Server) – API-കളിൽ നിന്നോ ഡാറ്റാബേസുകളിൽ നിന്നോ ഡാറ്റ എടുക്കുക. പ്രൈവറ്റ് ലോജിക്കുകൾ ഇവിടെ സൂക്ഷിക്കുക; അവ ഒരിക്കലും സെർവറിൽ നിന്ന് പുറത്തേക്ക് പോകില്ല.
  2. Middle layer (Server) – ലഭിച്ച ഡാറ്റയെ ശുദ്ധമായ HTML മാർക്ക്അപ്പായി മാറ്റുക. ഈ ലെയറിന് React-ന്റെ JSX സിന്റാക്സ് ഉപയോഗിക്കാമെങ്കിലും ഇത് സെർവർ മാത്രമായി നിലനിൽക്കുന്നു.
  3. Top layer (Client) – ഇന്ററാക്റ്റിവിറ്റിക്കായി ചെറിയ, ഒറ്റപ്പെട്ട വിഡ്ജറ്റുകൾ (widgets) ഉൾപ്പെടുത്തുക. "Like" ബട്ടണുകൾ, കമന്റ് ഫോമുകൾ, അല്ലെങ്കിൽ state ആവശ്യമുള്ള ഡ്രോപ്പ്ഡൗൺ മെനുകൾ എന്നിവ ഇതിന് ഉദാഹരണങ്ങളാണ്.

ഈ ശ്രേണി (hierarchy) പിന്തുടരുന്നത് ആപ്പിന്റെ ഭൂരിഭാഗവും ഭാരം കുറഞ്ഞതാക്കി നിലനിർത്താനും ഉപയോക്താക്കൾ പ്രതീക്ഷിക്കുന്ന ഡൈനാമിക് അനുഭവം നൽകാനും സഹായിക്കുന്നു.

ഇന്ന് നിങ്ങൾക്ക് പരീക്ഷിക്കാവുന്ന ഘട്ടങ്ങൾ

  1. ഡാറ്റ Fetch ചെയ്യാൻ വേണ്ടി മാത്രം useEffect ഉപയോഗിക്കുന്ന കമ്പോണന്റുകൾ നിങ്ങളുടെ കോഡ്ബേസിൽ (codebase) തിരയുക.
  2. Fetch കോൾ ഒരു പുതിയ Server Component-ലേക്ക് മാറ്റുകയും അത് റെൻഡർ ചെയ്ത മാർക്ക്അപ്പ് തിരികെ നൽകാൻ അനുവദിക്കുകയും ചെയ്യുക.
  3. ബാക്കിയുള്ള ഇന്ററാക്റ്റീവ് എലമെന്റുകൾക്കായി ഒരു മിനിമൽ ക്ലയന്റ് കമ്പോണന്റ് നിർമ്മിക്കുക (മുകളിൽ use client ചേർക്കുക).
  4. നിങ്ങളുടെ ബണ്ടിൽ അനലൈസർ (bundle analyzer) വീണ്ടും പ്രവർത്തിപ്പിക്കുക; സൈസിൽ വലിയ കുറവ് നിങ്ങൾക്ക് കാണാൻ സാധിക്കും.

എല്ലാടത്തും use client ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക. ഒരു കമ്പോണന്റ് React state, context, അല്ലെങ്കിൽ lifecycle hooks എന്നിവയെ ആശ്രയിക്കുന്നില്ലെങ്കിൽ, അതിനെ ഒരു Server Component ആയി തന്നെ നിലനിർത്തുക. എത്രത്തോളം കോഡ് ക്ലയന്റിൽ നിന്ന് ഒഴിവാക്കുന്നുവോ, അത്രത്തോളം ഡൗൺലോഡ് വേഗത കൂടും, പേജ് ലോഡിംഗും വേഗത്തിലാകും.

Takeaway: ഡാറ്റാ ഫെച്ചിംഗും (data fetching) ഭാരമേറിയ റെൻഡറിംഗും സെർവറിലേക്ക് മാറ്റുന്നതിലൂടെ, വളരെ കുറഞ്ഞ JavaScript മാത്രം ഉപയോഗിക്കാനും, പൂർണ്ണമായി റെൻഡർ ചെയ്ത HTML ഉടനടി നൽകാനും, ആവശ്യമുള്ള ഇടങ്ങളിൽ ഇന്ററാക്റ്റിവിറ്റി നിലനിർത്താനും Next.js 14 നിങ്ങളെ അനുവദിക്കുന്നു. ഇതിന്റെ ഫലമായി ഉപയോക്താക്കൾക്കും സെർച്ച് എഞ്ചിനുകൾക്കും ഒരുപോലെ ഗുണകരമായ വേഗതയേറിയതും ലളിതവുമായ ഒരു വെബ് അനുഭവം ലഭിക്കുന്നു.