ரியாக்ட் செலக்டிவ் ஹைட்ரேஷன்: முன்னுரிமை அடிப்படையிலான காம்போனென்ட் லோடிங்கில் ஒரு ஆழமான பார்வை

சிறந்த இணைய செயல்திறனை அடையும் இடைவிடாத முயற்சியில், ஃப்ரண்ட்எண்ட் டெவலப்பர்கள் தொடர்ந்து ஒரு சிக்கலான சமரசத்தை எதிர்கொள்கிறார்கள். நாங்கள் வளமான, ஊடாடும் பயன்பாடுகளை விரும்புகிறோம், ஆனால் பயனரின் சாதனம் அல்லது நெட்வொர்க் வேகத்தைப் பொருட்படுத்தாமல், அவை உடனடியாக ஏற்றப்பட வேண்டும் மற்றும் தாமதமின்றி பதிலளிக்க வேண்டும். பல ஆண்டுகளாக, சர்வர்-சைட் ரெண்டரிங் (SSR) இந்த முயற்சியின் ஒரு மூலக்கல்லாக இருந்து வருகிறது, இது வேகமான ஆரம்ப பக்க சுமைகளையும் வலுவான SEO நன்மைகளையும் வழங்குகிறது. இருப்பினும், பாரம்பரிய SSR ஒரு குறிப்பிடத்தக்க தடையுடன் வந்தது: பயமுறுத்தும் "எல்லாம்-அல்லது-ஒன்றுமில்லை" ஹைட்ரேஷன் சிக்கல்.

ஒரு SSR-உருவாக்கிய பக்கம் உண்மையாக ஊடாடுவதற்கு முன்பு, முழு பயன்பாட்டின் ஜாவாஸ்கிரிப்ட் தொகுப்பும் பதிவிறக்கம் செய்யப்பட்டு, பாகுபடுத்தப்பட்டு, செயல்படுத்தப்பட வேண்டும். இது பெரும்பாலும் ஒரு வெறுப்பூட்டும் பயனர் அனுபவத்திற்கு வழிவகுத்தது, அங்கு ஒரு பக்கம் முழுமையானதாகவும் தயாராகவும் தோன்றினாலும், கிளிக்குகள் அல்லது உள்ளீடுகளுக்குப் பதிலளிக்கவில்லை. இந்த நிகழ்வு Time to Interactive (TTI) மற்றும் புதிய Interaction to Next Paint (INP) போன்ற முக்கிய அளவீடுகளை எதிர்மறையாக பாதிக்கிறது.

ரியாக்ட் 18-ஐ உள்ளிடவும். அதன் புரட்சிகரமான கன்கரண்ட் ரெண்டரிங் இயந்திரத்துடன், ரியாக்ட் ஒரு நேர்த்தியான மற்றும் சக்திவாய்ந்த தீர்வை அறிமுகப்படுத்தியது: செலக்டிவ் ஹைட்ரேஷன். இது ஒரு சிறிய முன்னேற்றம் மட்டுமல்ல; இது ரியாக்ட் பயன்பாடுகள் உலாவியில் எவ்வாறு உயிர்பெறுகின்றன என்பதில் ஒரு அடிப்படை முன்னுதாரண மாற்றம். இது பயனர் தொடர்புக்கு முதலிடம் கொடுக்கும் ஒரு சிறுமணி, முன்னுரிமை அடிப்படையிலான அமைப்புக்கு ஒற்றைக்கல் ஹைட்ரேஷன் மாதிரியைத் தாண்டியுள்ளது.

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

கடந்த காலத்தைப் புரிந்துகொள்ளுதல்: பாரம்பரிய SSR ஹைட்ரேஷனின் சவால்

செலக்டிவ் ஹைட்ரேஷனின் புதுமையை முழுமையாகப் பாராட்ட, அது கடக்க வடிவமைக்கப்பட்ட வரம்புகளை முதலில் நாம் புரிந்து கொள்ள வேண்டும். ரியாக்ட் 18-க்கு முந்தைய சர்வர்-சைட் ரெண்டரிங் உலகத்தை மீண்டும் பார்ப்போம்.

சர்வர்-சைட் ரெண்டரிங் (SSR) என்றால் என்ன?

ஒரு வழக்கமான கிளையன்ட்-சைட் ரெண்டர்டு (CSR) ரியாக்ட் பயன்பாட்டில், உலாவி ஒரு குறைந்தபட்ச HTML கோப்பையும் ஒரு பெரிய ஜாவாஸ்கிரிப்ட் தொகுப்பையும் பெறுகிறது. உலாவி பின்னர் பக்க உள்ளடக்கத்தை ரெண்டர் செய்ய ஜாவாஸ்கிரிப்டை இயக்குகிறது. இந்த செயல்முறை மெதுவாக இருக்கலாம், பயனர்களை வெற்றுத் திரையைப் பார்க்கும்படி விட்டுவிடுகிறது மற்றும் தேடுபொறி கிராலர்களுக்கு உள்ளடக்கத்தை அட்டவணைப்படுத்துவதை கடினமாக்குகிறது.

SSR இந்த மாதிரியைத் தலைகீழாக மாற்றுகிறது. சர்வர் ரியாக்ட் பயன்பாட்டை இயக்குகிறது, கோரப்பட்ட பக்கத்திற்கான முழு HTML-ஐ உருவாக்குகிறது, மற்றும் அதை உலாவிக்கு அனுப்புகிறது. நன்மைகள் உடனடியாகத் தெரியும்:

வேகமான First Contentful Paint (FCP): உலாவி HTML வந்தவுடன் அதை ரெண்டர் செய்ய முடியும், எனவே பயனர் அர்த்தமுள்ள உள்ளடக்கத்தை கிட்டத்தட்ட உடனடியாகப் பார்க்கிறார்.
மேம்படுத்தப்பட்ட SEO: தேடுபொறி கிராலர்கள் சர்வரில் ரெண்டர் செய்யப்பட்ட HTML-ஐ எளிதாகப் பாகுபடுத்த முடியும், இது சிறந்த அட்டவணைப்படுத்தல் மற்றும் தரவரிசைக்கு வழிவகுக்கிறது.

"எல்லாம்-அல்லது-ஒன்றுமில்லை" ஹைட்ரேஷன் தடை

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

இங்குதான் பாரம்பரிய சிக்கல் உள்ளது: பாரம்பரிய ஹைட்ரேஷன் ஒரு ஒற்றைக்கல், ஒத்திசைவான மற்றும் தடுக்கும் செயல்பாடாக இருந்தது. இது ஒரு கடுமையான, மன்னிக்க முடியாத வரிசையைப் பின்பற்றியது:

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

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

ரியாக்ட் 18-ஐ உள்ளிடவும்: கன்கரண்ட் ரெண்டரிங்குடன் ஒரு முன்னுதாரண மாற்றம்

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

கன்கரண்ட் ரெண்டரிங் செலக்டிவ் ஹைட்ரேஷனை சாத்தியமாக்க இரண்டு முக்கியமான அம்சங்களை ஒன்றிணைத்து செயல்படுத்துகிறது:

ஸ்ட்ரீமிங் SSR: சர்வர் முழுப் பக்கமும் தயாராகும் வரை காத்திருக்காமல், HTML-ஐ அது ரெண்டர் செய்யப்படும்போது துண்டுகளாக அனுப்ப முடியும்.
செலக்டிவ் ஹைட்ரேஷன்: முழு HTML ஸ்ட்ரீம் மற்றும் அனைத்து ஜாவாஸ்கிரிப்டும் வருவதற்கு முன்பே ரியாக்ட் பக்கத்தை ஹைட்ரேட் செய்யத் தொடங்கலாம், மேலும் அதைத் தடுக்காத, முன்னுரிமை அளிக்கப்பட்ட முறையில் செய்யலாம்.

முக்கிய கருத்து: செலக்டிவ் ஹைட்ரேஷன் என்றால் என்ன?

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

முக்கிய கூறுகள்: ஸ்ட்ரீமிங் SSR மற்றும் ``

செலக்டிவ் ஹைட்ரேஷனைப் புரிந்து கொள்ள, அதன் இரண்டு அடித்தளத் தூண்களான ஸ்ட்ரீமிங் SSR மற்றும் `` காம்போனென்ட்டை முதலில் நீங்கள் புரிந்து கொள்ள வேண்டும்.

ஸ்ட்ரீமிங் SSR

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

`` எல்லை

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

சர்வரில், `` என்பது ஸ்ட்ரீமிங்கிற்கான சமிக்ஞையாகும். சர்வர் ஒரு `` எல்லையை எதிர்கொள்ளும்போது, அது முதலில் ஃபால்பேக் HTML-ஐ அனுப்பலாம் மற்றும் உண்மையான காம்போனென்ட்டின் HTML தயாரானதும் பின்னர் ஸ்ட்ரீம் செய்யலாம் என்பதை அது அறியும். உலாவியில், `` எல்லைகள் சுயாதீனமாக ஹைட்ரேட் செய்யக்கூடிய "தீவுகளை" வரையறுக்கின்றன.

இங்கே ஒரு கருத்தியல் உதாரணம்:


function App() {
  return (
    <div>
      <Header />
      <main>
        <ArticleContent />
        <Suspense fallback={<CommentsSkeleton />}>
          <CommentsSection />  <!-- This component might fetch data -->
        </Suspense>
      </main>
      <Suspense fallback={<ChatWidgetLoader />}>
        <ChatWidget /> <!-- This is a heavy third-party script -->
      </Suspense>
      <Footer />
    </div>
  );
}

இந்த எடுத்துக்காட்டில், `Header`, `ArticleContent`, மற்றும் `Footer` ஆகியவை உடனடியாக ரெண்டர் செய்யப்பட்டு ஸ்ட்ரீம் செய்யப்படும். உலாவி `CommentsSkeleton` மற்றும் `ChatWidgetLoader` ஆகியவற்றிற்கான HTML-ஐப் பெறும். பின்னர், `CommentsSection` மற்றும் `ChatWidget` சர்வரில் தயாரானதும், அவற்றின் HTML கிளையன்ட்டிற்கு ஸ்ட்ரீம் செய்யப்படும். இந்த `` எல்லைகள் செலக்டிவ் ஹைட்ரேஷன் அதன் மாயாஜாலத்தைச் செய்ய அனுமதிக்கும் இணைப்புகளை உருவாக்குகின்றன.

அது எப்படி வேலை செய்கிறது: முன்னுரிமை அடிப்படையிலான லோடிங் செயல்பாட்டில்

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

பயனரே முன்னுரிமை

இங்கே முக்கிய கொள்கை: ரியாக்ட் ஒரு பயனர் தொடர்பு கொள்ளும் காம்போனென்ட்களை ஹைட்ரேட் செய்வதற்கு முன்னுரிமை அளிக்கிறது.

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

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

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

ஒரு படிப்படியான காட்சி

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

சர்வர் ஸ்ட்ரீமிங்: சர்வர் ஆரம்ப HTML ஷெல்லை அனுப்புகிறது, இதில் தயாரிப்பு கட்டமும் அடங்கும். சைடுபார் மற்றும் அரட்டை விட்ஜெட் ``-இல் போர்த்தப்பட்டு, அவற்றின் ஃபால்பேக் UI-கள் (ஸ்கெலிட்டன்கள்/லோடர்கள்) அனுப்பப்படுகின்றன.
ஆரம்ப ரெண்டர்: உலாவி தயாரிப்பு கட்டத்தை ரெண்டர் செய்கிறது. பயனர் தயாரிப்புகளை கிட்டத்தட்ட உடனடியாகப் பார்க்க முடியும். எந்த ஜாவாஸ்கிரிப்டும் இன்னும் இணைக்கப்படாததால் TTI இன்னும் அதிகமாக உள்ளது.
கோட் லோடிங்: ஜாவாஸ்கிரிப்ட் தொகுப்புகள் பதிவிறக்கம் செய்யத் தொடங்குகின்றன. சைடுபார் மற்றும் அரட்டை விட்ஜெட்டிற்கான கோட் தனித்தனி, கோட்-ஸ்ப்ளிட் துண்டுகளில் இருப்பதாகக் கொள்வோம்.
பயனர் தொடர்பு: எதுவும் ஹைட்ரேட் ஆவதற்கு முன்பு, பயனர் தனக்கு பிடித்த ஒரு பொருளைப் பார்த்து, தயாரிப்பு கட்டத்திற்குள் உள்ள "Add to Cart" பட்டனைக் கிளிக் செய்கிறார்.
முன்னுரிமை மாயாஜாலம்: ரியாக்ட் கிளிக்கைப் பிடிக்கிறது. கிளிக் `ProductGrid` காம்போனென்ட்டிற்குள் நடந்ததைக் காண்கிறது. அது உடனடியாக பக்கத்தின் மற்ற பகுதிகளை ஹைட்ரேட் செய்வதை நிறுத்துகிறது அல்லது இடைநிறுத்துகிறது (அது vừa ஆரம்பித்திருக்கலாம்) மற்றும் `ProductGrid`-ஐ ஹைட்ரேட் செய்வதில் பிரத்தியேகமாக கவனம் செலுத்துகிறது.
வேகமான ஊடாடும் தன்மை: `ProductGrid` காம்போனென்ட் மிக விரைவாக ஹைட்ரேட் ஆகிறது, ஏனெனில் அதன் கோட் பிரதான தொகுப்பில் இருக்க வாய்ப்புள்ளது. `onClick` ஹேண்ட்லர் இணைக்கப்படுகிறது, மற்றும் பிடிக்கப்பட்ட கிளிக் நிகழ்வு மீண்டும் இயக்கப்படுகிறது. பொருள் கார்ட்டில் சேர்க்கப்படுகிறது. பயனர் உடனடியாகப் பின்னூட்டம் பெறுகிறார்.
ஹைட்ரேஷனை மீண்டும் தொடங்குதல்: இப்போது உயர் முன்னுரிமைத் தொடர்பு கையாளப்பட்டுவிட்டதால், ரியாக்ட் அதன் வேலையை மீண்டும் தொடங்குகிறது. அது சைடுபாரை ஹைட்ரேட் செய்யத் தொடர்கிறது. இறுதியாக, அரட்டை விட்ஜெட்டிற்கான கோட் வந்ததும், அது அந்த காம்போனென்ட்டை கடைசியாக ஹைட்ரேட் செய்கிறது.

முடிவு? பக்கத்தின் மிக முக்கியமான பகுதிக்கான TTI, பயனரின் சொந்த நோக்கத்தால் இயக்கப்பட்டு, கிட்டத்தட்ட உடனடி ஆனது. ஒட்டுமொத்த பக்க TTI இனி ஒரு ஒற்றை, பயமுறுத்தும் எண் அல்ல, மாறாக ஒரு முற்போக்கான மற்றும் பயனர் மைய செயல்முறையாகும்.

உலகளாவிய பார்வையாளர்களுக்கான தெளிவான நன்மைகள்

செலக்டிவ் ஹைட்ரேஷனின் தாக்கம் ஆழமானது, குறிப்பாக மாறுபட்ட நெட்வொர்க் நிலைமைகள் மற்றும் சாதனத் திறன்களைக் கொண்ட ஒரு பன்முக, உலகளாவிய பார்வையாளர்களுக்கு சேவை செய்யும் பயன்பாடுகளுக்கு.

வியத்தகு முறையில் மேம்படுத்தப்பட்ட உணரப்பட்ட செயல்திறன்

மிக முக்கியமான நன்மை பயனர்-உணரப்பட்ட செயல்திறனில் ஏற்படும் மிகப்பெரிய முன்னேற்றம் ஆகும். பயனர் தொடர்பு கொள்ளும் பக்கத்தின் பகுதிகளை முதலில் கிடைக்கச் செய்வதன் மூலம், பயன்பாடு வேகமாக *உணரப்படுகிறது*. இது பயனர் தக்கவைப்பிற்கு முக்கியமானது. ஒரு வளரும் நாட்டில் மெதுவான 3G நெட்வொர்க்கில் உள்ள ஒரு பயனருக்கு, முழுப் பக்கமும் ஊடாடும் தன்மையைப் பெற 15 வினாடிகள் காத்திருப்பதற்கும், 3 வினாடிகளில் முக்கிய உள்ளடக்கத்துடன் தொடர்பு கொள்ள முடிவதற்கும் உள்ள வேறுபாடு மிகப்பெரியது.

சிறந்த கோர் வெப் வைட்டல்ஸ்

செலக்டிவ் ஹைட்ரேஷன் கூகிளின் கோர் வெப் வைட்டல்ஸை நேரடியாகப் பாதிக்கிறது:

Interaction to Next Paint (INP): இந்த புதிய மெட்ரிக் பதிலளிப்புத் தன்மையை அளவிடுகிறது. பயனர் உள்ளீட்டின் அடிப்படையில் ஹைட்ரேஷனுக்கு முன்னுரிமை அளிப்பதன் மூலம், செலக்டிவ் ஹைட்ரேஷன் தொடர்புகள் விரைவாகக் கையாளப்படுவதை உறுதி செய்கிறது, இது மிகக் குறைந்த INP-க்கு வழிவகுக்கிறது.
Time to Interactive (TTI): *முழு* பக்கத்திற்கான TTI இன்னும் நேரம் எடுக்கலாம் என்றாலும், முக்கியமான பயனர் பாதைகளுக்கான TTI வியத்தகு முறையில் குறைக்கப்படுகிறது.
First Input Delay (FID): INP-ஐப் போலவே, FID முதல் தொடர்பு செயலாக்கப்படுவதற்கு முந்தைய தாமதத்தை அளவிடுகிறது. செலக்டிவ் ஹைட்ரேஷன் இந்த தாமதத்தைக் குறைக்கிறது.

உள்ளடக்கத்தை கனமான காம்போனென்ட்களிலிருந்து பிரித்தல்

நவீன வலை பயன்பாடுகள் பெரும்பாலும் பகுப்பாய்வு, A/B சோதனை, வாடிக்கையாளர் ஆதரவு அரட்டைகள் அல்லது விளம்பரங்களுக்கான கனமான மூன்றாம் தரப்பு ஸ்கிரிப்ட்களால் ஏற்றப்படுகின்றன. வரலாற்று ரீதியாக, இந்த ஸ்கிரிப்ட்கள் முழு பயன்பாடும் ஊடாடும் தன்மையைப் பெறுவதைத் தடுக்கக்கூடும். செலக்டிவ் ஹைட்ரேஷன் மற்றும் `` உடன், இந்த முக்கியமற்ற காம்போனென்ட்களை முற்றிலுமாகத் தனிமைப்படுத்தலாம். இந்த கனமான ஸ்கிரிப்ட்கள் பின்னணியில் ஏற்றப்பட்டு ஹைட்ரேட் செய்யப்படும்போது, முக்கிய பயன்பாட்டு உள்ளடக்கம் ஏற்றப்பட்டு ஊடாடும் தன்மையைப் பெறலாம், இது முக்கிய பயனர் அனுபவத்தைப் பாதிக்காது.

அதிக மீள்திறன் கொண்ட பயன்பாடுகள்

ஹைட்ரேஷன் துண்டுகளாக நடக்கக்கூடும் என்பதால், ஒரு முக்கியமற்ற காம்போனென்ட்டில் (ஒரு சமூக ஊடக விட்ஜெட் போன்றவை) ஏற்படும் பிழை முழுப் பக்கத்தையும் உடைக்க வேண்டிய அவசியமில்லை. பயன்பாட்டின் மற்ற பகுதிகள் ஊடாடும் தன்மையுடன் இருக்கும்போது, ரியாக்ட் அந்த `` எல்லைக்குள் பிழையைத் தனிமைப்படுத்த முடியும்.

நடைமுறைச் செயலாக்கம் மற்றும் சிறந்த நடைமுறைகள்

செலக்டிவ் ஹைட்ரேஷனை ஏற்றுக்கொள்வது சிக்கலான புதிய குறியீட்டை எழுதுவதை விட, உங்கள் பயன்பாட்டைச் சரியாக கட்டமைப்பதாகும். Next.js (அதன் App Router உடன்) மற்றும் Remix போன்ற நவீன கட்டமைப்புகள் உங்களுக்காக சர்வர் அமைப்பின் பெரும்பகுதியைக் கையாளுகின்றன, ஆனால் முக்கிய கொள்கைகளைப் புரிந்துகொள்வது முக்கியம்.

`hydrateRoot` API-ஐ ஏற்றுக்கொள்வது

கிளையன்ட்டில், இந்த புதிய நடத்தைக்கான நுழைவுப் புள்ளி `hydrateRoot` API ஆகும். நீங்கள் பழைய `ReactDOM.hydrate`-லிருந்து `ReactDOM.hydrateRoot`-க்கு மாறுவீர்கள்.


// Before (Legacy)
import { hydrate } from 'react-dom';
const container = document.getElementById('root');
hydrate(<App />, container);

// After (React 18+)
import { hydrateRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = hydrateRoot(container, <App />);

இந்த எளிய மாற்றம் உங்கள் பயன்பாட்டை செலக்டிவ் ஹைட்ரேஷன் உட்பட புதிய கன்கரண்ட் ரெண்டரிங் அம்சங்களுக்குள் கொண்டுவருகிறது.

``-இன் உத்திபூர்வமான பயன்பாடு

செலக்டிவ் ஹைட்ரேஷனின் சக்தி உங்கள் `` எல்லைகளை நீங்கள் எவ்வாறு வைக்கிறீர்கள் என்பதில் திறக்கப்படுகிறது. ஒவ்வொரு சிறிய காம்போனென்ட்டையும் போர்த்த வேண்டாம்; பயனர் ஓட்டத்தை சீர்குலைக்காமல் சுயாதீனமாக ஏற்றக்கூடிய தர்க்கரீதியான UI அலகுகள் அல்லது "தீவுகள்" அடிப்படையில் சிந்தியுங்கள்.

`` எல்லைகளுக்கான நல்ல வேட்பாளர்கள்:

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

கோட் ஸ்ப்ளிட்டிங்கிற்காக `React.lazy`-உடன் இணைத்தல்

கோட் ஸ்ப்ளிட்டிங்கிற்காக `React.lazy`-உடன் இணைக்கப்படும்போது செலக்டிவ் ஹைட்ரேஷன் இன்னும் சக்தி வாய்ந்தது. இது உங்கள் குறைந்த முன்னுரிமை காம்போனென்ட்களுக்கான ஜாவாஸ்கிரிப்ட் தேவைப்படும் வரை பதிவிறக்கம் செய்யப்படாது என்பதை உறுதி செய்கிறது, இது ஆரம்ப தொகுப்பு அளவை மேலும் குறைக்கிறது.


import React, { Suspense, lazy } from 'react';

const CommentsSection = lazy(() => import('./CommentsSection'));
const ChatWidget = lazy(() => import('./ChatWidget'));

function App() {
  return (
    <div>
      <ArticleContent />
      <Suspense fallback={<CommentsSkeleton />}>
        <CommentsSection />
      </Suspense>
      <Suspense fallback={null}> <!-- No visual loader needed for a hidden widget -->
        <ChatWidget />
      </Suspense>
    </div>
  );
}

இந்த அமைப்பில், `CommentsSection` மற்றும் `ChatWidget` ஆகியவற்றிற்கான ஜாவாஸ்கிரிப்ட் கோட் தனித்தனி கோப்புகளில் இருக்கும். ரியாக்ட் அவற்றை ரெண்டர் செய்ய முடிவு செய்யும் போது மட்டுமே உலாவி அவற்றைப் பெறும், மேலும் அவை முக்கிய `ArticleContent`-ஐத் தடுக்காமல் சுயாதீனமாக ஹைட்ரேட் ஆகும்.

`renderToPipeableStream`-உடன் சர்வர்-சைட் அமைப்பு

ஒரு தனிப்பயன் SSR தீர்வை உருவாக்குபவர்களுக்கு, பயன்படுத்த வேண்டிய சர்வர்-சைட் API `renderToPipeableStream` ஆகும். இந்த API குறிப்பாக ஸ்ட்ரீமிங்கிற்காக வடிவமைக்கப்பட்டுள்ளது மற்றும் ``-உடன் தடையின்றி ஒருங்கிணைக்கப்படுகிறது. இது HTML-ஐ எப்போது அனுப்ப வேண்டும் மற்றும் பிழைகளை எவ்வாறு கையாள்வது என்பதில் உங்களுக்கு நுண்ணிய கட்டுப்பாட்டை வழங்குகிறது. இருப்பினும், பெரும்பாலான டெவலப்பர்களுக்கு, Next.js போன்ற ஒரு மெட்டா-கட்டமைப்பு பரிந்துரைக்கப்பட்ட பாதையாகும், ஏனெனில் இது இந்த சிக்கலை எளிதாக்குகிறது.

எதிர்காலம்: ரியாக்ட் சர்வர் காம்போனென்ட்கள்

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

செலக்டிவ் ஹைட்ரேஷன் மற்றும் RSCs ஆகியவை hoàn hảo இணைந்து செயல்படுகின்றன. உங்கள் பயன்பாட்டின் தரவைக் காண்பிப்பதற்காக மட்டுமே உள்ள பகுதிகள் RSCs ஆக இருக்கலாம் (பூஜ்ய கிளையன்ட்-சைட் JS), அதே நேரத்தில் ஊடாடும் பகுதிகள் செலக்டிவ் ஹைட்ரேஷனிலிருந்து பயனடையும் கிளையன்ட் காம்போனென்ட்களாக இருக்கலாம். இந்த கலவையானது ரியாக்ட் மூலம் உயர் செயல்திறன் கொண்ட, ஊடாடும் பயன்பாடுகளை உருவாக்குவதன் எதிர்காலத்தைக் குறிக்கிறது.

முடிவு: புத்திசாலித்தனமாக ஹைட்ரேட் செய்தல், கடினமாக அல்ல

ரியாக்ட்டின் செலக்டிவ் ஹைட்ரேஷன் ஒரு செயல்திறன் மேம்படுத்தலை விட மேலானது; இது ஒரு பயனர் மையக் கட்டமைப்பு நோக்கிய ஒரு அடிப்படை மாற்றமாகும். கடந்த காலத்தின் "எல்லாம்-அல்லது-ஒன்றுமில்லை" கட்டுப்பாடுகளிலிருந்து விடுபடுவதன் மூலம், ரியாக்ட் 18 டெவலப்பர்களுக்கு சவாலான நெட்வொர்க் நிலைமைகளின் கீழ் கூட, ஏற்றுவதற்கு வேகமான மற்றும் ஊடாடுவதற்கு வேகமான பயன்பாடுகளை உருவாக்க அதிகாரம் அளிக்கிறது.

முக்கிய முடிவுகள் தெளிவாக உள்ளன:

இது தடையைத் தீர்க்கிறது: செலக்டிவ் ஹைட்ரேஷன் பாரம்பரிய SSR-இன் TTI சிக்கலை நேரடியாக நிவர்த்தி செய்கிறது.
பயனர் ஊடாட்டம் முதன்மையானது: பயனர் என்ன செய்கிறார் என்பதன் அடிப்படையில் இது புத்திசாலித்தனமாக ஹைட்ரேஷனுக்கு முன்னுரிமை அளிக்கிறது, இது பயன்பாடுகளை உடனடியாகப் பதிலளிக்கச் செய்கிறது.
கன்கரண்ட் ரெண்டரிங்கால் சாத்தியமானது: இது ரியாக்ட் 18-இன் கன்கரண்ட் இயந்திரத்தால் சாத்தியமாக்கப்படுகிறது, இது ஸ்ட்ரீமிங் SSR மற்றும் `` உடன் இணைந்து செயல்படுகிறது.
ஒரு உலகளாவிய நன்மை: இது உலகெங்கிலும் உள்ள பயனர்களுக்கு, எந்த சாதனத்திலும், குறிப்பிடத்தக்க வகையில் சிறந்த மற்றும் சமமான அனுபவத்தை வழங்குகிறது.

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