Next.js 14-ன் Server Components, bundle size-ஐ தோராயமாக 60% குறைக்கிறது மற்றும் ஒரு சாதாரண வலைப்பதிவுப் பக்கத்தில் (blog page) first-paint times-ஐ 200 ms-க்கும் குறைவாகக் கொண்டுவருகிறது. இதன் மூலம் பயனர்கள் உள்ளடக்கத்தை விரைவாகப் பார்க்க முடியும் மற்றும் தேடுபொறிகள் (search engines) முழுமையாகத் தயார் செய்யப்பட்ட HTML-ஐப் பெறுகின்றன.

இந்த புதிய வெளியீடு Next.js மூலம் உருவாக்கப்பட்ட React செயலிகளுக்கான இயல்புநிலை செயல்பாட்டு மாதிரியை (execution model) மாற்றியமைக்கிறது. முன்பு ஒவ்வொரு component-உம் உலாவியில் (browser) அனுப்பப்பட்டது; ஆனால் இப்போது டெவலப்பர்கள் UI-ன் சில பகுதிகளை “Server Components” என்று குறிக்கலாம், இதனால் அவை backend-இல் மட்டுமே இயங்கும். அந்த component-களுக்கான குறியீடு (code) ஒருபோதும் கிளையன்ட்டை (client) சென்றடையாது, உலாவியில் ஊடாடும் தன்மை (interactivity) தேவைப்படும் பகுதிகள் மட்டுமே இருக்கும்.

இந்த மாற்றம் ஏன் முக்கியமானது

React டெவலப்பர்கள் நீண்டகாலமாக மூன்று ஒன்றோடொன்று இணைந்த சிக்கல்களுடன் போராடி வருகின்றனர்: தொடர்ச்சியான network requests, அதிகப்படியான JavaScript bundles மற்றும் மெதுவான பக்கப் பதிவேற்றம் (page loads). இந்த சிக்கல்கள் SEO-வையும் பாதிக்கின்றன, ஏனெனில் க்ராலர்களுக்கு (crawlers) அனுப்பப்படும் ஆரம்பக்கட்ட HTML பெரும்பாலும் காலியாக இருக்கும், இதனால் தேடுபொறிகள் client-side hydration-க்காக காத்திருக்க வேண்டியுள்ளது. தரவு சார்ந்த வேலைகளை (data-heavy work) முழுமையாக கிளையன்ட்டில் இருந்து அகற்றுவதன் மூலம் Next.js 14 இந்த மூலக் காரணத்தைத் தீர்க்கிறது.

Server Components பழைய மாதிரியிலிருந்து எவ்வாறு வேறுபடுகின்றன

  • Server Components – இவை சர்வரில் இயங்கும், தரவைச் சேகரிக்கும் (fetch data), தரவுத்தளங்களுடன் (databases) தொடர்பு கொள்ளும் மற்றும் சாதாரண HTML-ஐ வெளியிடும். இவற்றின் JavaScript ஒருபோதும் நெட்வொர்க் வழியாகப் பயணிப்பதில்லை.
  • Client Components – இவை உலாவியிலேயே இருக்கும் மற்றும் பட்டன் கிளிக், form submissions அல்லது React state அல்லது effects பயன்படுத்தும் எந்தவொரு component-க்கும் தேவையான UI ஊடாடல்களைக் கையாளும்.

இந்த framework ஒரு எளிய வழிகாட்டுதலின் மூலம் இந்தப் பிரிவை நடைமுறைப்படுத்துகிறது. ஒரு கோப்பின் மேற்புறத்தில் use client என்பதைச் சேர்ப்பதன் மூலம், அந்த component-ஐ client-side மட்டுமே என்று Next.js-க்குத் தெரிவிக்கலாம். அந்த அடையாளக் குறியீடு இல்லாத அனைத்தும் இயல்பாகவே ஒரு Server Component ஆகக் கருதப்படும்.

நிஜ உலகத் தரவுகள்

ஒரு தனிப்பட்ட வலைப்பதிவுப் பக்கத்தில் செய்யப்பட்ட விரைவான சோதனை இதன் தாக்கத்தை விளக்குகிறது. fetch செயல்பாட்டை ஒரு Server Component-க்குள் மாற்றி, சர்வர் அந்தப் பட்டியலை static HTML-ஆக மாற்றிய பிறகு, JavaScript bundle 60% குறைந்தது மற்றும் பக்கம் 200 ms-க்கும் குறைவான நேரத்தில் தயாரானது.

ஒரு நடைமுறை அடுக்கு முறை (layering pattern)

  1. Bottom layer (Server) – API-கள் அல்லது தரவுத்தளங்களிலிருந்து தரவை எடுக்கவும். ஏதேனும் தனிப்பட்ட லாஜிக்கை (private logic) இங்கே வைத்திருக்கவும்; அது ஒருபோதும் சர்வரை விட்டு வெளியேறாது.
  2. Middle layer (Server) – மூலத் தரவை (raw data) தூய HTML markup-ஆக மாற்றவும். இந்த அடுக்கு இன்னும் React-ன் JSX syntax-ஐப் பயன்படுத்தலாம், ஆனால் இது server-only ஆக இருக்கும்.
  3. Top layer (Client) – ஊடாடலுக்காகச் சிறிய, தனிமைப்படுத்தப்பட்ட widgets-களைச் சேர்க்கவும். "like" பட்டன்கள், comment forms அல்லது state தேவைப்படும் dropdown menus இதற்குச் சிறந்த உதாரணங்கள்.

இந்த வரிசைமுறையைப் பின்பற்றுவதன் மூலம், பயனர்கள் எதிர்பார்க்கும் dynamic உணர்வைக் காத்துរកக்கும் அதே வேளையில், செயலியின் பெரும்பகுதியை லேசானதாக (lightweight) வைத்திருக்க முடியும்.

நீங்கள் இன்று முயற்சி செய்யக்கூடிய படிகள்

  1. தரவைச் சேகரிக்க மட்டுமே useEffect-ஐப் பயன்படுத்தும் component-களை உங்கள் codebase-இல் தேடவும்.
  2. fetch அழைப்பை ஒரு புதிய Server Component-ஆக மாற்றி, அது தயார் செய்யப்பட்ட markup-ஐத் திருப்பி அனுப்பச் செய்யவும்.
  3. மீதமுள்ள ஊடாடும் கூறுகளுக்கு ஒரு சிறிய client component-ஐ (மேற்புறத்தில் use client சேர்க்கவும்) உருவாக்கவும்.
  4. உங்கள் bundle analyzer-ஐ மீண்டும் இயக்கவும்; அளவில் குறிப்பிடத்தக்கக் குறைவைக் காண்பீர்கள்.

எல்லா இடங்களிலும் use client என்பதைப் பயன்படுத்துவதைத் தவிர்க்கவும். ஒரு component React state, context அல்லது lifecycle hooks ஆகியவற்றின் மீது தங்கியிருக்கவில்லை என்றால், அதை Server Component ஆகவே விடவும். நீங்கள் கிளையன்ட்டில் இருந்து எவ்வளவு அதிகமான குறியீட்டைத் தவிர்க்கிறீர்களோ, அவ்வளவு சிறிய பதிவிறக்கமும் வேகமான பக்கமும் கிடைக்கும்.

சுருக்கம்: தரவைச் சேகரித்தல் மற்றும் அதிகப்படியான rendering பணிகளைச் சர்வர் பகுதிக்கு மாற்றுவதன் மூலம், Next.js 14 மிகக் குறைந்த JavaScript-ஐ மட்டுமே அனுப்பவும், முழுமையாகத் தயார் செய்யப்பட்ட HTML-ஐ உடனடியாக வழங்கவும் மற்றும் உண்மையில் தேவைப்படும் இடங்களில் ஊடாடலைத் தக்கவைக்கவும் அனுமதிக்கிறது. இதன் விளைவாக பயனர்களுக்கும் தேடுபொறிகளுக்கும் பயனளிக்கும் வேகமான மற்றும் இலகுவான இணைய அனுபவம் கிடைக்கும்.