ரியாக்ட் ஃப்ளைட்டின் மர்மம் விலகுகிறது: சர்வர் காம்போனென்ட்களுக்கு சக்தியூட்டும் சீரியலைசபிள் புரோட்டோகால்

வலைதள மேம்பாட்டு உலகம் ஒரு நிலையான பரிணாம நிலையில் உள்ளது. பல ஆண்டுகளாக, ஒற்றைப் பக்க பயன்பாடு (Single Page Application - SPA) என்ற கருத்தாக்கமே ஆதிக்கம் செலுத்தியது. இதில், ஒரு குறைந்தபட்ச HTML ஷெல் கிளையண்டிற்கு அனுப்பப்பட்டு, அது தரவுகளைப் பெற்று, ஜாவாஸ்கிரிப்ட் பயன்படுத்தி முழு பயனர் இடைமுகத்தையும் ரெண்டர் செய்யும். இது சக்திவாய்ந்ததாக இருந்தாலும், பெரிய பண்டில் அளவுகள், கிளையண்ட்-சர்வர் தரவு நீர்வீழ்ச்சிகள், மற்றும் சிக்கலான ஸ்டேட் மேலாண்மை போன்ற சவால்களை அறிமுகப்படுத்தியது. இதற்கு பதிலளிக்கும் விதமாக, சமூகம் மீண்டும் சர்வர்-மையக் கட்டமைப்புகளை நோக்கி ஒரு குறிப்பிடத்தக்க மாற்றத்தைக் காண்கிறது, ஆனால் ஒரு நவீன திருப்பத்துடன். இந்த பரிணாம வளர்ச்சியின் முன்னணியில் ரியாக்ட் குழுவின் ஒரு புரட்சிகரமான அம்சம் உள்ளது: ரியாக்ட் சர்வர் காம்போனென்ட்கள் (RSC).

ஆனால், பிரத்தியேகமாக ஒரு சர்வரில் இயங்கும் இந்த காம்போனென்ட்கள், எப்படி மாயாஜாலமாக ஒரு கிளையண்ட்-பக்க பயன்பாட்டில் தோன்றி தடையின்றி ஒருங்கிணைக்கப்படுகின்றன? பதில், அதிகம் அறியப்படாத ஆனால் மிகவும் முக்கியமான ஒரு தொழில்நுட்பத்தில் உள்ளது: ரியாக்ட் ஃப்ளைட். இது நீங்கள் தினமும் நேரடியாகப் பயன்படுத்தும் ஒரு API அல்ல, ஆனால் இதைப் புரிந்துகொள்வது நவீன ரியாக்ட் சூழமைப்பின் முழுத் திறனையும் திறப்பதற்கான திறவுகோலாகும். இந்த பதிவு உங்களை ரியாக்ட் ஃப்ளைட் புரோட்டோகால் பற்றிய ஒரு ஆழமான பயணத்திற்கு அழைத்துச் செல்லும், அடுத்த தலைமுறை வலைப் பயன்பாடுகளுக்கு சக்தியூட்டும் இயந்திரத்தின் மர்மத்தை விலக்கும்.

ரியாக்ட் சர்வர் காம்போனென்ட்கள் என்றால் என்ன? ஒரு விரைவான நினைவூட்டல்

நாம் புரோட்டோகாலை அலசுவதற்கு முன், ரியாக்ட் சர்வர் காம்போனென்ட்கள் என்றால் என்ன, அவை ஏன் முக்கியமானவை என்பதை சுருக்கமாகப் பார்ப்போம். பிரவுசரில் இயங்கும் பாரம்பரிய ரியாக்ட் காம்போனென்ட்களைப் போலல்லாமல், RSC-க்கள் சர்வரில் பிரத்தியேகமாக செயல்படும் வகையில் வடிவமைக்கப்பட்ட ஒரு புதிய வகை காம்போனென்ட் ஆகும். அவை தங்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டை ஒருபோதும் கிளையண்டிற்கு அனுப்புவதில்லை.

இந்த சர்வர்-மட்டும் செயல்பாடு பல புரட்சிகரமான நன்மைகளை வழங்குகிறது:

• பூஜ்ய-பண்டில் அளவு (Zero-Bundle Size): காம்போனென்ட்டின் குறியீடு சர்வரை விட்டு வெளியேறாததால், அது உங்கள் கிளையண்ட் பக்க ஜாவாஸ்கிரிப்ட் பண்டிலுக்கு எந்த பங்களிப்பையும் செய்வதில்லை. இது செயல்திறனுக்கு ஒரு மிகப்பெரிய வெற்றியாகும், குறிப்பாக சிக்கலான, தரவு-அதிகம் கொண்ட காம்போனென்ட்களுக்கு.
• நேரடி தரவு அணுகல் (Direct Data Access): RSC-க்கள் ஒரு API எண்ட்பாயிண்டை வெளிப்படுத்தத் தேவையில்லாமல், தரவுத்தளங்கள், கோப்பு அமைப்புகள் அல்லது உள் மைக்ரோ சர்வீஸ்கள் போன்ற சர்வர் பக்க ஆதாரங்களை நேரடியாக அணுக முடியும். இது தரவுப் பெறுதலை எளிதாக்குகிறது மற்றும் கிளையண்ட்-சர்வர் கோரிக்கை நீர்வீழ்ச்சிகளை நீக்குகிறது.
• தானியங்கி குறியீடு பிரித்தல் (Automatic Code Splitting): சர்வரில் எந்த காம்போனென்ட்களை ரெண்டர் செய்ய வேண்டும் என்பதை நீங்கள் மாறும் வகையில் தேர்வு செய்ய முடிவதால், உங்களுக்கு தானாகவே குறியீடு பிரித்தல் கிடைக்கிறது. ஊடாடும் கிளையண்ட் காம்போனென்ட்களுக்கான குறியீடு மட்டுமே பிரவுசருக்கு அனுப்பப்படுகிறது.

RSC-க்களை சர்வர்-சைட் ரெண்டரிங் (SSR) என்பதிலிருந்து வேறுபடுத்துவது முக்கியம். SSR உங்கள் முழு ரியாக்ட் பயன்பாட்டையும் சர்வரில் ஒரு HTML ஸ்டிரிங்காக முன்-ரெண்டர் செய்கிறது. கிளையண்ட் இந்த HTML-ஐப் பெற்று, அதைக் காட்டி, பின்னர் முழு ஜாவாஸ்கிரிப்ட் பண்டிலையும் பதிவிறக்கி பக்கத்தை 'ஹைட்ரேட்' செய்து ஊடாட வைக்கிறது. இதற்கு மாறாக, RSC-க்கள் UI-யின் ஒரு சிறப்பு, சுருக்கமான விளக்கத்திற்கு ரெண்டர் செய்கின்றன—HTML-க்கு அல்ல—இது பின்னர் கிளையண்டிற்கு ஸ்ட்ரீம் செய்யப்பட்டு, தற்போதுள்ள காம்போனென்ட் ட்ரீயுடன் சரிசெய்யப்படுகிறது. இது மிகவும் நுணுக்கமான மற்றும் திறமையான புதுப்பித்தல் செயல்முறைக்கு வழிவகுக்கிறது.

ரியாக்ட் ஃப்ளைட் அறிமுகம்: முக்கிய புரோட்டோகால்

ஆக, ஒரு சர்வர் காம்போனென்ட் HTML அல்லது அதன் சொந்த ஜாவாஸ்கிரிப்டை அனுப்பவில்லை என்றால், அது என்ன அனுப்புகிறது? இங்குதான் ரியாக்ட் ஃப்ளைட் வருகிறது. ரியாக்ட் ஃப்ளைட் என்பது ஒரு ரெண்டர் செய்யப்பட்ட ரியாக்ட் காம்போனென்ட் ட்ரீயை சர்வரிலிருந்து கிளையண்டிற்கு அனுப்புவதற்காக வடிவமைக்கப்பட்ட ஒரு பிரத்யேக சீரியலைசேஷன் புரோட்டோகால் ஆகும்.

இதை ரியாக்ட் பிரிமிட்டிவ்களைப் புரிந்துகொள்ளும் ஒரு சிறப்பு, ஸ்ட்ரீம் செய்யக்கூடிய JSON பதிப்பாக நினைத்துப் பாருங்கள். இது உங்கள் சர்வர் சூழலுக்கும் பயனரின் பிரவுசருக்கும் இடையிலான இடைவெளியைக் குறைக்கும் 'வயர் ஃபார்மட்' ஆகும். நீங்கள் ஒரு RSC-ஐ ரெண்டர் செய்யும்போது, ரியாக்ட் HTML-ஐ உருவாக்காது. அதற்கு பதிலாக, அது ரியாக்ட் ஃப்ளைட் வடிவத்தில் ஒரு தரவு ஸ்ட்ரீமை உருவாக்குகிறது.

ஏன் வெறும் HTML அல்லது JSON பயன்படுத்தக்கூடாது?

ஒரு இயல்பான கேள்வி எழுகிறது, ஏன் ஒரு புதிய புரோட்டோகாலைக் கண்டுபிடிக்க வேண்டும்? நாம் ஏற்கனவே உள்ள தரநிலைகளைப் பயன்படுத்த முடியாதா?

• ஏன் HTML இல்லை? HTML அனுப்புவது SSR-இன் களமாகும். HTML-இல் உள்ள சிக்கல் என்னவென்றால், அது ஒரு இறுதி பிரதிநிதித்துவம். அது காம்போனென்ட் அமைப்பு மற்றும் சூழலை இழந்துவிடுகிறது. ஒரு முழு பக்க ரீலோட் அல்லது சிக்கலான DOM கையாளுதல் இல்லாமல், ஏற்கனவே உள்ள, ஊடாடும் கிளையண்ட் பக்க ரியாக்ட் பயன்பாட்டில் புதிய ஸ்ட்ரீம் செய்யப்பட்ட HTML துண்டுகளை எளிதாக ஒருங்கிணைக்க முடியாது. ரியாக்டிற்கு எந்தப் பகுதிகள் காம்போனென்ட்கள், அவற்றின் ப்ராப்ஸ்கள் என்ன, மற்றும் ஊடாடும் 'தீவுகள்' (கிளையண்ட் காம்போனென்ட்கள்) எங்கே அமைந்துள்ளன என்பதைத் தெரிந்து கொள்ள வேண்டும்.
• ஏன் நிலையான JSON இல்லை? JSON தரவுகளுக்கு சிறந்தது, ஆனால் அது UI காம்போனென்ட்கள், JSX, அல்லது சஸ்பென்ஸ் பவுண்டரிகள் போன்ற கருத்துக்களை இயல்பாக பிரதிநிதித்துவப்படுத்த முடியாது. ஒரு காம்போனென்ட் ட்ரீயை பிரதிநிதித்துவப்படுத்த ஒரு JSON ஸ்கீமாவை உருவாக்க முயற்சி செய்யலாம், ஆனால் அது விரிவானதாக இருக்கும் மற்றும் கிளையண்டில் மாறும் வகையில் ஏற்றப்பட்டு ரெண்டர் செய்யப்பட வேண்டிய ஒரு காம்போனென்ட்டை எப்படி பிரதிநிதித்துவப்படுத்துவது என்ற சிக்கலைத் தீர்க்காது.

ரியாக்ட் ஃப்ளைட் இந்த குறிப்பிட்ட சிக்கல்களைத் தீர்க்க உருவாக்கப்பட்டது. இது பின்வருமாறு வடிவமைக்கப்பட்டுள்ளது:

1. சீரியலைசபிள் (Serializable): ப்ராப்ஸ் மற்றும் ஸ்டேட் உட்பட முழு காம்போனென்ட் ட்ரீயையும் பிரதிநிதித்துவப்படுத்தும் திறன் கொண்டது.
2. ஸ்ட்ரீமபிள் (Streamable): UI துண்டுகளாக அனுப்பப்படலாம், இது முழுமையான ரெஸ்பான்ஸ் கிடைப்பதற்கு முன்பே கிளையண்ட் ரெண்டரிங்கைத் தொடங்க அனுமதிக்கிறது. இது சஸ்பென்ஸுடன் ஒருங்கிணைவதற்கு அடிப்படையானது.
3. ரியாக்ட்-அவேர் (React-Aware): இது காம்போனென்ட்கள், கான்டெக்ஸ்ட் மற்றும் கிளையண்ட் பக்க குறியீட்டை தாமதமாக ஏற்றுதல் (lazy-loading) போன்ற ரியாக்ட் கருத்துக்களுக்கு முதல்-தர ஆதரவைக் கொண்டுள்ளது.

ரியாக்ட் ஃப்ளைட் எப்படி வேலை செய்கிறது: ஒரு படிப்படியான விளக்கம்

ரியாக்ட் ஃப்ளைட்டைப் பயன்படுத்தும் செயல்முறை சர்வர் மற்றும் கிளையண்டிற்கு இடையே ஒரு ஒருங்கிணைந்த நடனத்தை உள்ளடக்கியது. RSC-க்களைப் பயன்படுத்தும் ஒரு பயன்பாட்டில் ஒரு கோரிக்கையின் வாழ்க்கைச் சுழற்சியைப் பார்ப்போம்.

சர்வரில்

1. கோரிக்கை துவக்கம்: ஒரு பயனர் உங்கள் பயன்பாட்டில் ஒரு பக்கத்திற்குச் செல்கிறார் (உதாரணமாக, ஒரு Next.js App Router பக்கம்).
2. காம்போனென்ட் ரெண்டரிங்: ரியாக்ட் அந்தப் பக்கத்திற்கான சர்வர் காம்போனென்ட் ட்ரீயை ரெண்டர் செய்யத் தொடங்குகிறது.
3. தரவுப் பெறுதல்: அது ட்ரீயைக் கடக்கும்போது, தரவைப் பெறும் காம்போனென்ட்களை (உதாரணமாக, `async function MyServerComponent() { ... }`) எதிர்கொள்கிறது. இந்த தரவுப் பெறுதல்களுக்காக அது காத்திருக்கிறது.
4. ஃப்ளைட் ஸ்ட்ரீமுக்கு சீரியலைசேஷன்: HTML-ஐ உருவாக்குவதற்குப் பதிலாக, ரியாக்ட் ரெண்டரர் ஒரு டெக்ஸ்ட் ஸ்ட்ரீமை உருவாக்குகிறது. இந்த டெக்ஸ்ட் தான் ரியாக்ட் ஃப்ளைட் பேலோட். காம்போனென்ட் ட்ரீயின் ஒவ்வொரு பகுதியும்—ஒரு `div`, ஒரு `p`, ஒரு டெக்ஸ்ட் ஸ்டிரிங், ஒரு கிளையண்ட் காம்போனென்ட்டிற்கான குறிப்பு—இந்த ஸ்ட்ரீமிற்குள் ஒரு குறிப்பிட்ட வடிவத்தில் குறியாக்கம் செய்யப்படுகிறது.
5. ரெஸ்பான்ஸை ஸ்ட்ரீமிங் செய்தல்: சர்வர் முழு ட்ரீயும் ரெண்டர் செய்யப்படும் வரை காத்திருக்காது. UI-யின் முதல் துண்டுகள் தயாரானவுடன், அது ஃப்ளைட் பேலோடை HTTP வழியாக கிளையண்டிற்கு ஸ்ட்ரீம் செய்யத் தொடங்குகிறது. அது ஒரு சஸ்பென்ஸ் பவுண்டரியை எதிர்கொண்டால், அது ஒரு பிளேஸ்ஹோல்டரை அனுப்பி, இடைநிறுத்தப்பட்ட உள்ளடக்கத்தை பின்னணியில் ரெண்டர் செய்வதைத் தொடர்கிறது, அது தயாரானதும் அதே ஸ்ட்ரீமில் பின்னர் அதை அனுப்புகிறது.

கிளையண்டில்

1. ஸ்ட்ரீமைப் பெறுதல்: பிரவுசரில் உள்ள ரியாக்ட் ரன்டைம் ஃப்ளைட் ஸ்ட்ரீமைப் பெறுகிறது. இது ஒரு ஒற்றை ஆவணம் அல்ல, ஆனால் ஒரு தொடர்ச்சியான அறிவுறுத்தல்களின் ஓட்டம்.
2. பார்சிங் மற்றும் சரிசெய்தல்: கிளையண்ட் பக்க ரியாக்ட் குறியீடு ஃப்ளைட் ஸ்ட்ரீமை துண்டு துண்டாகப் பாகுபடுத்துகிறது. இது UI-ஐ உருவாக்க அல்லது புதுப்பிக்க ஒரு வரைபடங்களின் தொகுப்பைப் பெறுவது போன்றது.
3. ட்ரீயை மீண்டும் உருவாக்குதல்: ஒவ்வொரு அறிவுறுத்தலுக்கும், ரியாக்ட் அதன் மெய்நிகர் DOM-ஐப் புதுப்பிக்கிறது. அது ஒரு புதிய `div`-ஐ உருவாக்கலாம், சில டெக்ஸ்டை செருகலாம், அல்லது—மிக முக்கியமாக—ஒரு கிளையண்ட் காம்போனென்ட்டிற்கான ஒரு பிளேஸ்ஹோல்டரை அடையாளம் காணலாம்.
4. கிளையண்ட் காம்போனென்ட்களை ஏற்றுதல்: ஸ்ட்ரீமில் ஒரு கிளையண்ட் காம்போனென்ட்டிற்கான குறிப்பு ("use client" டைரக்டிவ் உடன் குறிக்கப்பட்டது) இருக்கும்போது, ஃப்ளைட் பேலோடில் எந்த ஜாவாஸ்கிரிப்ட் பண்டிலைப் பதிவிறக்க வேண்டும் என்பது பற்றிய தகவல்கள் அடங்கும். ரியாக்ட் பின்னர் அந்த பண்டிலை ஏற்கனவே கேச் செய்யப்படவில்லை என்றால் அதைப் பெறுகிறது.
5. ஹைட்ரேஷன் மற்றும் ஊடாடுதல்: கிளையண்ட் காம்போனென்ட்டின் குறியீடு ஏற்றப்பட்டவுடன், ரியாக்ட் அதை நியமிக்கப்பட்ட இடத்தில் ரெண்டர் செய்து அதை ஹைட்ரேட் செய்கிறது, நிகழ்வு கேட்பான்களை இணைத்து அதை முழுமையாக ஊடாட வைக்கிறது. இந்த செயல்முறை மிகவும் இலக்கு வைக்கப்பட்டது மற்றும் பக்கத்தின் ஊடாடும் பகுதிகளுக்கு மட்டுமே நடக்கிறது.

இந்த ஸ்ட்ரீமிங் மற்றும் தேர்ந்தெடுத்த ஹைட்ரேஷன் மாடல், பாரம்பரிய SSR மாடலை விட ஆழ்ந்த திறமையானது, இது பெரும்பாலும் முழுப் பக்கத்திற்கும் ஒரு "எல்லாம்-அல்லது-ஒன்றுமில்லை" ஹைட்ரேஷன் தேவைப்படுகிறது.

ஒரு ரியாக்ட் ஃப்ளைட் பேலோடின் கட்டமைப்பு

ரியாக்ட் ஃப்ளைட்டை உண்மையாகப் புரிந்துகொள்ள, அது உருவாக்கும் தரவுகளின் வடிவத்தைப் பார்ப்பது உதவுகிறது. நீங்கள் பொதுவாக இந்த மூல வெளியீட்டுடன் நேரடியாகத் தொடர்பு கொள்ள மாட்டீர்கள் என்றாலும், அதன் கட்டமைப்பைப் பார்ப்பது அது எப்படி வேலை செய்கிறது என்பதை வெளிப்படுத்துகிறது. பேலோட் என்பது புதிய வரி-பிரிக்கப்பட்ட JSON-போன்ற ஸ்டிரிங்குகளின் ஒரு ஸ்ட்ரீம் ஆகும். ஒவ்வொரு வரியும், அல்லது துண்டும், ஒரு தகவலின் ஒரு பகுதியைக் குறிக்கிறது.

ஒரு எளிய உதாரணத்தைக் கருத்தில் கொள்வோம். நம்மிடம் இது போன்ற ஒரு சர்வர் காம்போனென்ட் இருப்பதாக கற்பனை செய்து கொள்வோம்:

app/page.js (சர்வர் காம்போனென்ட்)

<!-- Assume this is a code block in a real blog --> async function Page() { const userData = await fetchUser(); // Fetches { name: 'Alice' } return ( <div> <h1>Welcome, {userData.name}</h1> <p>Here is your dashboard.</p> <InteractiveButton text="Click Me" /> </div> ); }

மற்றும் ஒரு கிளையண்ட் காம்போனென்ட்:

components/InteractiveButton.js (கிளையண்ட் காம்போனென்ட்)

<!-- Assume this is a code block in a real blog --> 'use client'; import { useState } from 'react'; export default function InteractiveButton({ text }) { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> {text} ({count}) </button> ); }

இந்த UI-க்காக சர்வரிலிருந்து கிளையண்டிற்கு அனுப்பப்பட்ட ரியாக்ட் ஃப்ளைட் ஸ்ட்ரீம் இதுபோல இருக்கலாம் (தெளிவுக்காக எளிமைப்படுத்தப்பட்டுள்ளது):

<!-- Simplified example of a Flight stream --> M1:{"id":"./components/InteractiveButton.js","chunks":["chunk-abcde.js"],"name":"default"} J0:["$","div",null,{"children":[["$","h1",null,{"children":["Welcome, ","Alice"]}],["$","p",null,{"children":"Here is your dashboard."}],["$","@1",null,{"text":"Click Me"}]]}]

இந்த புதிரான வெளியீட்டைப் பிரித்துப் பார்ப்போம்:

• `M` வரிகள் (Module Metadata): `M1:` உடன் தொடங்கும் வரி ஒரு மாட்யூல் குறிப்பு. அது கிளையண்டிற்கு சொல்கிறது: "`@1` ஐடியால் குறிப்பிடப்பட்ட காம்போனென்ட் `./components/InteractiveButton.js` கோப்பிலிருந்து வரும் டீஃபால்ட் எக்ஸ்போர்ட் ஆகும். அதை ஏற்றுவதற்கு, நீங்கள் `chunk-abcde.js` என்ற ஜாவாஸ்கிரிப்ட் கோப்பைப் பதிவிறக்க வேண்டும்." டைனமிக் இம்போர்ட்கள் மற்றும் குறியீடு பிரித்தல் இப்படித்தான் கையாளப்படுகின்றன.
• `J` வரிகள் (JSON Data): `J0:` உடன் தொடங்கும் வரியில் சீரியலைஸ் செய்யப்பட்ட காம்போனென்ட் ட்ரீ உள்ளது. அதன் கட்டமைப்பைப் பார்ப்போம்: `["$","div",null,{...}]`.
• `$` சின்னம்: இது ஒரு ரியாக்ட் எலிமெண்ட்டைக் (அடிப்படையில், JSX) குறிக்கும் ஒரு சிறப்பு அடையாளங்காட்டி. வடிவம் பொதுவாக `["$", type, key, props]` ஆகும்.
• காம்போனென்ட் ட்ரீ கட்டமைப்பு: HTML-இன் உட்பொதிக்கப்பட்ட கட்டமைப்பை நீங்கள் காணலாம். `div`-க்கு ஒரு `children` ப்ராப் உள்ளது, இது ஒரு `h1`, ஒரு `p`, மற்றும் மற்றொரு ரியாக்ட் எலிமெண்ட்டைக் கொண்ட ஒரு வரிசையாகும்.
• தரவு ஒருங்கிணைப்பு: `"Alice"` என்ற பெயர் நேரடியாக ஸ்ட்ரீமில் பதிக்கப்பட்டிருப்பதைக் கவனியுங்கள். சர்வரின் தரவுப் பெறுதலின் முடிவு நேரடியாக UI விளக்கத்தில் சீரியலைஸ் செய்யப்பட்டுள்ளது. இந்த தரவு எப்படிப் பெறப்பட்டது என்பதை கிளையண்ட் அறியத் தேவையில்லை.
• `@` சின்னம் (கிளையண்ட் காம்போனென்ட் குறிப்பு): மிகவும் சுவாரஸ்யமான பகுதி `["$","@1",null,{"text":"Click Me"}]` ஆகும். `@1` என்பது ஒரு குறிப்பு. இது கிளையண்டிற்கு சொல்கிறது: "ட்ரீயில் இந்த இடத்தில், நீங்கள் மாட்யூல் மெட்டாடேட்டா `M1` ஆல் விவரிக்கப்பட்ட கிளையண்ட் காம்போனென்ட்டை ரெண்டர் செய்ய வேண்டும். மேலும் நீங்கள் அதை ரெண்டர் செய்யும்போது, அதற்கு இந்த ப்ராப்ஸ்களை அனுப்பவும்: `{ text: 'Click Me' }`."

இந்த பேலோட் ஒரு முழுமையான அறிவுறுத்தல்களின் தொகுப்பாகும். இது UI-ஐ எப்படி உருவாக்குவது, என்ன நிலையான உள்ளடக்கத்தைக் காண்பிப்பது, ஊடாடும் காம்போனென்ட்களை எங்கே வைப்பது, அவற்றின் குறியீட்டை எப்படி ஏற்றுவது, மற்றும் அவற்றுக்கு என்ன ப்ராப்ஸ்களை அனுப்புவது என்பதை கிளையண்டிற்குத் துல்லியமாகச் சொல்கிறது. இவையனைத்தும் ஒரு கச்சிதமான, ஸ்ட்ரீம் செய்யக்கூடிய வடிவத்தில் செய்யப்படுகிறது.

ரியாக்ட் ஃப்ளைட் புரோட்டோகாலின் முக்கிய நன்மைகள்

ஃப்ளைட் புரோட்டோகாலின் வடிவமைப்பு RSC கருத்தாக்கத்தின் முக்கிய நன்மைகளை நேரடியாக செயல்படுத்துகிறது. புரோட்டோகாலைப் புரிந்துகொள்வது இந்த நன்மைகள் ஏன் சாத்தியம் என்பதைத் தெளிவுபடுத்துகிறது.

ஸ்ட்ரீமிங் மற்றும் நேட்டிவ் சஸ்பென்ஸ்

புரோட்டோகால் ஒரு புதியவரி-வரையறுக்கப்பட்ட ஸ்ட்ரீம் என்பதால், சர்வர் UI ரெண்டர் செய்யப்படும்போதே அதை அனுப்ப முடியும். ஒரு காம்போனென்ட் இடைநிறுத்தப்பட்டால் (உதாரணமாக, தரவிற்காகக் காத்திருந்தால்), சர்வர் ஸ்ட்ரீமில் ஒரு பிளேஸ்ஹோல்டர் அறிவுறுத்தலை அனுப்பலாம், பக்கத்தின் மீதமுள்ள UI-ஐ அனுப்பலாம், பின்னர், தரவு தயாரானதும், அதே ஸ்ட்ரீமில் ஒரு புதிய அறிவுறுத்தலை அனுப்பி பிளேஸ்ஹோல்டரை உண்மையான உள்ளடக்கத்துடன் மாற்றலாம். இது சிக்கலான கிளையண்ட்-பக்க லாஜிக் இல்லாமல் ஒரு முதல்-தர ஸ்ட்ரீமிங் அனுபவத்தை வழங்குகிறது.

சர்வர் லாஜிக்கிற்கான பூஜ்ய-பண்டில் அளவு

பேலோடைப் பார்க்கும்போது, `Page` காம்போனென்ட்டிலிருந்தே எந்த குறியீடும் இல்லை என்பதை நீங்கள் காணலாம். தரவுப் பெறும் லாஜிக், எந்தவொரு சிக்கலான வணிகக் கணக்கீடுகள், அல்லது சர்வரில் மட்டுமே பயன்படுத்தப்படும் பெரிய லைப்ரரிகள் போன்ற சார்புகள் முற்றிலும் இல்லை. ஸ்ட்ரீமில் அந்த லாஜிக்கின் *வெளியீடு* மட்டுமே உள்ளது. இது RSC-க்களின் "பூஜ்ய-பண்டில் அளவு" வாக்குறுதிக்குப் பின்னால் உள்ள அடிப்படைக் பொறிமுறையாகும்.

தரவுப் பெறுதலை ஒரே இடத்தில் வைத்தல் (Colocation)

`userData` பெறுதல் சர்வரில் நடக்கிறது, அதன் விளைவு (`'Alice'`) மட்டுமே ஸ்ட்ரீமில் சீரியலைஸ் செய்யப்படுகிறது. இது டெவலப்பர்கள் தரவு-பெறும் குறியீட்டை அதற்குத் தேவையான காம்போனென்ட்டிற்கு உள்ளேயே எழுத அனுமதிக்கிறது, இது colocation எனப்படும் ஒரு கருத்து. இந்த முறை குறியீட்டை எளிதாக்குகிறது, பராமரிப்பை மேம்படுத்துகிறது, மற்றும் பல SPA-க்களை பாதிக்கும் கிளையண்ட்-சர்வர் நீர்வீழ்ச்சிகளை நீக்குகிறது.

தேர்ந்தெடுத்த ஹைட்ரேஷன் (Selective Hydration)

ரெண்டர் செய்யப்பட்ட HTML எலிமெண்ட்களுக்கும் கிளையண்ட் காம்போனென்ட் குறிப்புகளுக்கும் (`@`) இடையேயான புரோட்டோகாலின் வெளிப்படையான வேறுபாடுதான் தேர்ந்தெடுத்த ஹைட்ரேஷனை செயல்படுத்துகிறது. கிளையண்ட்-பக்க ரியாக்ட் ரன்டைமிற்கு `@` காம்போனென்ட்களுக்கு மட்டுமே ஊடாட அவற்றின் தொடர்புடைய ஜாவாஸ்கிரிப்ட் தேவை என்பது தெரியும். அது ட்ரீயின் நிலையான பகுதிகளைப் புறக்கணிக்க முடியும், ஆரம்ப பக்க ஏற்றத்தில் குறிப்பிடத்தக்க கணக்கீட்டு வளங்களைச் சேமிக்கிறது.

ரியாக்ட் ஃப்ளைட் vs. மாற்று வழிகள்: ஒரு உலகளாவிய பார்வை

ரியாக்ட் ஃப்ளைட்டின் புதுமையைப் பாராட்ட, அதை உலகளாவிய வலைதள மேம்பாட்டு சமூகத்தில் பயன்படுத்தப்படும் பிற அணுகுமுறைகளுடன் ஒப்பிடுவது உதவியாக இருக்கும்.

vs. பாரம்பரிய SSR + ஹைட்ரேஷன்

குறிப்பிட்டபடி, பாரம்பரிய SSR ஒரு முழு HTML ஆவணத்தை அனுப்புகிறது. கிளையண்ட் பின்னர் ஒரு பெரிய ஜாவாஸ்கிரிப்ட் பண்டிலைப் பதிவிறக்கி முழு ஆவணத்தையும் "ஹைட்ரேட்" செய்கிறது, நிலையான HTML-இல் நிகழ்வு கேட்பான்களை இணைக்கிறது. இது மெதுவாகவும் உடையக்கூடியதாகவும் இருக்கலாம். ஒரு ஒற்றைப் பிழை முழுப் பக்கமும் ஊடாடுவதைத் தடுக்கலாம். ரியாக்ட் ஃப்ளைட்டின் ஸ்ட்ரீம் செய்யக்கூடிய மற்றும் தேர்ந்தெடுத்த இயல்பு இந்த கருத்தின் ஒரு மீள்திறன் மிக்க மற்றும் செயல்திறன் வாய்ந்த பரிணாம வளர்ச்சியாகும்.

vs. GraphQL/REST API-க்கள்

ஒரு பொதுவான குழப்பம் என்னவென்றால், RSC-க்கள் GraphQL அல்லது REST போன்ற தரவு API-க்களை மாற்றுகின்றனவா என்பதுதான். பதில் இல்லை; அவை நிரப்புபவை. ரியாக்ட் ஃப்ளைட் ஒரு UI ட்ரீயை சீரியலைஸ் செய்வதற்கான ஒரு புரோட்டோகால், ஒரு பொது-நோக்க தரவு வினவல் மொழி அல்ல. உண்மையில், ஒரு சர்வர் காம்போனென்ட் அதன் தரவைப் பெறுவதற்கு முன்பு சர்வரில் GraphQL அல்லது ஒரு REST API-ஐப் பயன்படுத்தும். முக்கிய வேறுபாடு என்னவென்றால், இந்த API அழைப்பு சர்வர்-டு-சர்வர் நடக்கிறது, இது பொதுவாக ஒரு கிளையண்ட்-டு-சர்வர் அழைப்பை விட மிகவும் வேகமாகவும் பாதுகாப்பாகவும் இருக்கும். கிளையண்ட் இறுதி UI-ஐ ஃப்ளைட் ஸ்ட்ரீம் வழியாகப் பெறுகிறது, மூலத் தரவை அல்ல.

vs. பிற நவீன ஃபிரேம்வொர்க்குகள்

உலகளாவிய சூழமைப்பில் உள்ள பிற ஃபிரேம்வொர்க்குகளும் சர்வர்-கிளையண்ட் பிளவைக் கையாளுகின்றன. உதாரணமாக:

• ஆஸ்ட்ரோ தீவுகள் (Astro Islands): ஆஸ்ட்ரோ ஒரு ஒத்த 'தீவு' கட்டமைப்பைப் பயன்படுத்துகிறது, அங்கு தளத்தின் பெரும்பகுதி நிலையான HTML ஆகவும் ஊடாடும் காம்போனென்ட்கள் தனித்தனியாக ஏற்றப்படுகின்றன. இந்த கருத்து RSC உலகில் கிளையண்ட் காம்போனென்ட்களுக்கு ஒப்பானது. இருப்பினும், ஆஸ்ட்ரோ முதன்மையாக HTML-ஐ அனுப்புகிறது, அதேசமயம் ரியாக்ட் ஃப்ளைட் வழியாக UI-யின் ஒரு கட்டமைக்கப்பட்ட விளக்கத்தை அனுப்புகிறது, இது ஒரு கிளையண்ட்-பக்க ரியாக்ட் ஸ்டேட்டுடன் மிகவும் தடையற்ற ஒருங்கிணைப்பை அனுமதிக்கிறது.
• க்விக் மற்றும் ரெஸ்யூமபிலிட்டி (Qwik and Resumability): க்விக் ரெஸ்யூமபிலிட்டி எனப்படும் வேறுபட்ட அணுகுமுறையை எடுக்கிறது. இது பயன்பாட்டின் முழு ஸ்டேட்டையும் HTML-இல் சீரியலைஸ் செய்கிறது, எனவே கிளையண்ட் தொடக்கத்தில் குறியீட்டை மீண்டும் இயக்கத் தேவையில்லை (ஹைட்ரேஷன்). சர்வர் விட்ட இடத்திலிருந்து அது 'மீண்டும் தொடங்க' முடியும். ரியாக்ட் ஃப்ளைட் மற்றும் தேர்ந்தெடுத்த ஹைட்ரேஷன் ஒரு ஒத்த வேகமான-ஊடாடும்-நேர இலக்கை அடைய முயல்கின்றன, ஆனால் தேவையான ஊடாடும் குறியீட்டை மட்டும் ஏற்றி இயக்குவதன் மூலம் வேறுபட்ட பொறிமுறையின் மூலம்.

டெவலப்பர்களுக்கான நடைமுறை தாக்கங்கள் மற்றும் சிறந்த நடைமுறைகள்

நீங்கள் ரியாக்ட் ஃப்ளைட் பேலோடுகளை கையால் எழுத மாட்டீர்கள் என்றாலும், புரோட்டோகாலைப் புரிந்துகொள்வது நீங்கள் நவீன ரியாக்ட் பயன்பாடுகளை எப்படி உருவாக்க வேண்டும் என்பதைத் தெரிவிக்கிறது.

`"use server"` மற்றும் `"use client"` ஐத் தழுவுங்கள்

Next.js போன்ற ஃபிரேம்வொர்க்குகளில், `"use client"` டைரக்டிவ் தான் சர்வர் மற்றும் கிளையண்டிற்கு இடையிலான எல்லையைக் கட்டுப்படுத்துவதற்கான உங்கள் முதன்மை கருவியாகும். இது ஒரு காம்போனென்ட்டும் அதன் குழந்தைகளும் ஒரு ஊடாடும் தீவாகக் கருதப்பட வேண்டும் என்பதற்கான பில்ட் சிஸ்டத்திற்கான சிக்னலாகும். அதன் குறியீடு பண்டில் செய்யப்பட்டு பிரவுசருக்கு அனுப்பப்படும், மற்றும் ரியாக்ட் ஃப்ளைட் அதற்கான ஒரு குறிப்பை சீரியலைஸ் செய்யும். இதற்கு மாறாக, இந்த டைரக்டிவ் இல்லாதது (அல்லது சர்வர் ஆக்சன்களுக்கு `"use server"` பயன்படுத்துவது) காம்போனென்ட்களை சர்வரில் வைத்திருக்கும். திறமையான பயன்பாடுகளை உருவாக்க இந்த எல்லையை மாஸ்டர் செய்யுங்கள்.

எண்ட்பாயிண்ட்களாக அல்ல, காம்போனென்ட்களாக சிந்தியுங்கள்

RSC-க்களுடன், காம்போனென்ட்டே தரவுக் கொள்கலனாக இருக்க முடியும். `/api/user` என்ற ஒரு API எண்ட்பாயிண்டை உருவாக்கி, அதிலிருந்து பெறும் ஒரு கிளையண்ட்-பக்க காம்போனென்ட்டை உருவாக்குவதற்குப் பதிலாக, நீங்கள் தரவை உள்நாட்டில் பெறும் ஒரு ஒற்றை சர்வர் காம்போனென்ட் ``-ஐ உருவாக்கலாம். இது கட்டமைப்பை எளிதாக்குகிறது மற்றும் UI மற்றும் அதன் தரவை ஒரு ஒற்றை, ஒருங்கிணைந்த அலகாக சிந்திக்க டெவலப்பர்களை ஊக்குவிக்கிறது.

பாதுகாப்பு ஒரு சர்வர்-பக்க அக்கறை

RSC-க்கள் சர்வர் குறியீடு என்பதால், அவற்றுக்கு சர்வர் சலுகைகள் உள்ளன. இது சக்தி வாய்ந்தது ஆனால் பாதுகாப்புக்கு ஒரு ஒழுக்கமான அணுகுமுறை தேவைப்படுகிறது. அனைத்து தரவு அணுகல், சூழல் மாறி பயன்பாடு, மற்றும் உள் சேவைகளுடனான தொடர்புகள் இங்கே நிகழ்கின்றன. நீங்கள் எந்தவொரு பேக்எண்ட் API-ஐயும் போலவே இந்த குறியீட்டையும் அதே கண்டிப்புடன் நடத்துங்கள்: அனைத்து உள்ளீடுகளையும் சுத்திகரிக்கவும், தரவுத்தள வினவல்களுக்குத் தயாரிக்கப்பட்ட ஸ்டேட்மென்ட்களைப் பயன்படுத்தவும், மற்றும் ஃப்ளைட் பேலோடில் சீரியலைஸ் செய்யப்படக்கூடிய முக்கியமான கீகள் அல்லது ரகசியங்களை ஒருபோதும் வெளிப்படுத்தாதீர்கள்.

புதிய ஸ்டாக்கை டீபக்கிங் செய்தல்

ஒரு RSC உலகில் டீபக்கிங் மாறுகிறது. ஒரு UI பிழை சர்வர்-பக்க ரெண்டரிங் லாஜிக்கிலிருந்து அல்லது கிளையண்ட்-பக்க ஹைட்ரேஷனிலிருந்து உருவாகலாம். உங்கள் சர்வர் லாக்குகள் (RSC-க்களுக்கு) மற்றும் பிரவுசரின் டெவலப்பர் கன்சோல் (கிளையண்ட் காம்போனென்ட்களுக்கு) இரண்டையும் சரிபார்க்க நீங்கள் வசதியாக இருக்க வேண்டும். நெட்வொர்க் டாப் முன்பை விட முக்கியமானது. சர்வர் கிளையண்டிற்கு என்ன அனுப்புகிறது என்பதைத் துல்லியமாகப் பார்க்க நீங்கள் மூல ஃப்ளைட் ரெஸ்பான்ஸ் ஸ்ட்ரீமை ஆய்வு செய்யலாம், இது சரிசெய்தலுக்கு விலைமதிப்பற்றதாக இருக்கும்.

ரியாக்ட் ஃப்ளைட்டுடன் வலைதள மேம்பாட்டின் எதிர்காலம்

ரியாக்ட் ஃப்ளைட் மற்றும் அது செயல்படுத்தும் சர்வர் காம்போனென்ட்ஸ் கட்டமைப்பு, நாம் வலைக்காக எப்படி உருவாக்குகிறோம் என்பதைப் பற்றிய ஒரு அடிப்படை மறுசிந்தனையை பிரதிநிதித்துவப்படுத்துகிறது. இந்த மாடல் இரண்டு உலகங்களின் சிறந்தவற்றையும் ஒருங்கிணைக்கிறது: காம்போனென்ட்-அடிப்படையிலான UI மேம்பாட்டின் எளிமையான, சக்திவாய்ந்த டெவலப்பர் அனுபவம் மற்றும் பாரம்பரிய சர்வர்-ரெண்டர் செய்யப்பட்ட பயன்பாடுகளின் செயல்திறன் மற்றும் பாதுகாப்பு.

இந்த தொழில்நுட்பம் முதிர்ச்சியடையும்போது, இன்னும் சக்திவாய்ந்த பேட்டர்ன்கள் வெளிப்படுவதை நாம் எதிர்பார்க்கலாம். சர்வர் ஆக்சன்கள், கிளையண்ட் காம்போனென்ட்கள் சர்வரில் பாதுகாப்பான செயல்பாடுகளை அழைக்க அனுமதிக்கும், இந்த சர்வர்-கிளையண்ட் தொடர்பு சேனலின் மேல் கட்டமைக்கப்பட்ட ஒரு அம்சத்திற்கு ஒரு சிறந்த எடுத்துக்காட்டு. புரோட்டோகால் நீட்டிக்கக்கூடியது, அதாவது ரியாக்ட் குழு முக்கிய மாடலை உடைக்காமல் எதிர்காலத்தில் புதிய திறன்களைச் சேர்க்க முடியும்.

முடிவுரை

ரியாக்ட் ஃப்ளைட் என்பது ரியாக்ட் சர்வர் காம்போனென்ட்ஸ் கருத்தாக்கத்தின் கண்ணுக்குத் தெரியாத ஆனால் இன்றியமையாத முதுகெலும்பாகும். இது ஒரு மிகவும் சிறப்பு வாய்ந்த, திறமையான, மற்றும் ஸ்ட்ரீம் செய்யக்கூடிய புரோட்டோகால் ஆகும், இது ஒரு சர்வர்-ரெண்டர் செய்யப்பட்ட காம்போனென்ட் ட்ரீயை ஒரு கிளையண்ட்-பக்க ரியாக்ட் பயன்பாடு புரிந்துகொண்டு ஒரு வளமான, ஊடாடும் பயனர் இடைமுகத்தை உருவாக்கப் பயன்படுத்தக்கூடிய அறிவுறுத்தல்களின் தொகுப்பாக மொழிபெயர்க்கிறது. காம்போனென்ட்கள் மற்றும் அவற்றின் விலையுயர்ந்த சார்புகளை கிளையண்டிலிருந்து அகற்றி சர்வருக்கு நகர்த்துவதன் மூலம், இது வேகமான, இலகுவான மற்றும் சக்திவாய்ந்த வலைப் பயன்பாடுகளை செயல்படுத்துகிறது.

உலகெங்கிலும் உள்ள டெவலப்பர்களுக்கு, ரியாக்ட் ஃப்ளைட் என்றால் என்ன, அது எப்படி வேலை செய்கிறது என்பதைப் புரிந்துகொள்வது ஒரு கல்விப் பயிற்சி மட்டுமல்ல. இது பயன்பாடுகளை வடிவமைப்பதற்கும், செயல்திறன் பரிவர்த்தனைகளைச் செய்வதற்கும், மற்றும் சர்வர்-டிரைவன் UI-களின் இந்த புதிய சகாப்தத்தில் சிக்கல்களை சரிசெய்வதற்கும் ஒரு முக்கியமான மன மாதிரியை வழங்குகிறது. மாற்றம் நடந்து கொண்டிருக்கிறது, மேலும் ரியாக்ட் ஃப்ளைட் தான் முன்னோக்கிச் செல்லும் சாலையை அமைக்கும் புரோட்டோகால் ஆகும்.