React Selective Hydration மூலம் வேகமான இணைய செயல்திறனைத் திறக்கவும். இந்த விரிவான வழிகாட்டி கூறு-நிலை ஹைட்ரேஷன் எவ்வாறு செயல்படுகிறது, பயனர் அனுபவத்திற்கான அதன் நன்மைகள் மற்றும் உலகளாவிய பயன்பாடுகளுக்கான நடைமுறைச் செயல்படுத்தல் உத்திகளை விளக்குகிறது.
இணைய செயல்திறனை மாஸ்டரிங் செய்தல்: React Selective Hydration-ல் ஒரு ஆழமான பார்வை
நவீன டிஜிட்டல் நிலப்பரப்பில், வேகம் என்பது ஒரு அம்சம் மட்டுமல்ல; இது ஒரு நேர்மறையான பயனர் அனுபவத்தின் அடித்தளமாகும். உலகளாவிய பயன்பாடுகளுக்கு, பயனர்கள் பல்வேறு வகையான சாதனங்கள் மற்றும் நெட்வொர்க் நிலைகளில் உள்ளடக்கத்தை அணுகும்போது, செயல்திறன் மிக முக்கியமானது. மெதுவாக ஏற்றப்படும் ஒரு தளம் பயனர் விரக்தி, அதிக பவுன்ஸ் விகிதங்கள் மற்றும் இழந்த வருவாய்க்கு வழிவகுக்கும். பல ஆண்டுகளாக, டெவலப்பர்கள் ஆரம்ப ஏற்றுதல் நேரங்களை மேம்படுத்த Server-Side Rendering (SSR) ஐப் பயன்படுத்தியுள்ளனர், ஆனால் அது ஒரு குறிப்பிடத்தக்க சமரசத்துடன் வந்தது: முழு JavaScript தொகுப்பும் பதிவிறக்கம் செய்யப்பட்டு இயக்கப்படும் வரை ஊடாட முடியாத பக்கம். React 18 ஒரு புரட்சிகரமான கருத்தை அறிமுகப்படுத்தியது இங்கேதான்: Selective Hydration.
இந்த விரிவான வழிகாட்டி Selective Hydration-ன் நுணுக்கங்களை ஆராயும். இணைய ரெண்டரிங்-ன் அடிப்படைக் கருத்துக்களிலிருந்து React-ன் ஒரேநேர அம்சங்களின் மேம்பட்ட இயக்கவியல் வரை நாங்கள் பயணிப்போம். Selective Hydration என்றால் என்ன என்பதை நீங்கள் அறிந்து கொள்வது மட்டுமல்லாமல், அது எவ்வாறு செயல்படுகிறது, ஏன் அது Core Web Vitals-க்கு ஒரு கேம்-சேஞ்சர், மற்றும் உலகளாவிய பார்வையாளர்களுக்காக வேகமான, மேலும் மீள்திறன் கொண்ட பயன்பாடுகளை உருவாக்க உங்கள் சொந்த திட்டங்களில் அதை எவ்வாறு செயல்படுத்தலாம் என்பதையும் அறிந்து கொள்வீர்கள்.
React-ல் ரெண்டரிங்-ன் பரிணாமம்: CSR முதல் SSR மற்றும் அதற்கு அப்பால்
Selective Hydration-ன் கண்டுபிடிப்பை முழுமையாகப் பாராட்ட, நாம் இங்கு வந்துள்ள பாதையைப் புரிந்துகொள்வது அவசியம். வலைப் பக்கங்களை நாம் ரெண்டர் செய்யும் விதம் கணிசமாக உருவாகியுள்ளது, ஒவ்வொரு படியும் முந்தையதின் வரம்புகளைத் தீர்க்க முயல்கிறது.
Client-Side Rendering (CSR): SPA-வின் எழுச்சி
React போன்ற நூலகங்களுடன் உருவாக்கப்பட்ட Single Page Applications (SPAs)-ன் ஆரம்ப நாட்களில், Client-Side Rendering ஒரு நிலையானதாக இருந்தது. செயல்முறை நேரடியானது:
- சேவையகம் ஒரு குறைந்தபட்ச HTML கோப்பை அனுப்புகிறது, பெரும்பாலும் ஒரு `` உறுப்பு மற்றும் பெரிய JavaScript கோப்புகளுக்கான இணைப்புகள்.
- உலாவி JavaScript-ஐப் பதிவிறக்குகிறது.
- React உலாவியில் இயங்குகிறது, கூறுகளை ரெண்டர் செய்கிறது மற்றும் DOM-ஐ உருவாக்குகிறது, பக்கத்தை பார்வைக்கு மற்றும் ஊடாடக்கூடியதாக ஆக்குகிறது.
நன்மைகள்: CSR ஆரம்ப ஏற்றுதலுக்குப் பிறகு மிகவும் ஊடாடக்கூடிய, பயன்பாடு போன்ற அனுபவங்களை செயல்படுத்துகிறது. பக்கங்களுக்கு இடையிலான மாற்றங்கள் வேகமாக உள்ளன, ஏனெனில் முழு-பக்க மறுஏற்றங்கள் தேவையில்லை.
குறைபாடுகள்: ஆரம்ப ஏற்றுதல் நேரம் மிகவும் மெதுவாக இருக்கும். JavaScript பதிவிறக்கம், பாகுபடுத்தி மற்றும் இயக்கப்படும் வரை பயனர்கள் ஒரு வெற்று வெள்ளை திரையைக் காண்பார்கள். இது மோசமான First Contentful Paint (FCP)-க்கு வழிவகுக்கிறது மற்றும் தேடுபொறி உகப்பாக்கத்திற்கு (SEO) தீங்கு விளைவிக்கும், ஏனெனில் தேடுபொறி கிராலர்கள் பெரும்பாலும் ஒரு வெற்றுப் பக்கத்தைக் காண்கின்றன.Server-Side Rendering (SSR): வேகம் மற்றும் SEO உதவிக்கு
CSR-ன் முக்கிய சிக்கல்களைத் தீர்க்க SSR அறிமுகப்படுத்தப்பட்டது. SSR உடன், React கூறுகள் சேவையகத்தில் ஒரு HTML சரமாக ரெண்டர் செய்யப்படுகின்றன. இந்த முழுமையாக உருவான HTML பின்னர் உலாவிக்கு அனுப்பப்படுகிறது.
- உலாவி HTML-ஐ உடனடியாகப் பெற்று ரெண்டர் செய்கிறது, எனவே பயனர் உள்ளடக்கத்தை உடனடியாகப் பார்க்கிறார் (சிறந்த FCP).
- தேடுபொறி கிராலர்கள் உள்ளடக்கத்தை திறம்பட அட்டவணைப்படுத்தலாம், SEO-வை மேம்படுத்தலாம்.
- பின்னணியில், அதே JavaScript தொகுப்பு பதிவிறக்கம் செய்யப்படுகிறது.
- பதிவிறக்கம் முடிந்ததும், React கிளையண்டில் இயங்குகிறது, ஏற்கனவே உள்ள சேவையக-ரெண்டர் செய்யப்பட்ட HTML-க்கு நிகழ்வு கேட்பான்களையும் நிலையையும் இணைக்கிறது. இந்த செயல்முறை hydration என்று அழைக்கப்படுகிறது.
பாரம்பரிய SSR-ன் "பயங்கரமான பள்ளத்தாக்கு"
SSR வெற்றுத் திரைப் பிரச்சனையைத் தீர்த்தாலும், அது ஒரு புதிய, மிகவும் நுட்பமான சிக்கலை அறிமுகப்படுத்தியது. பக்கம் உண்மையில் இருப்பதற்கு நீண்ட காலத்திற்கு முன்பே அது ஊடாடக்கூடியதாக தெரிகிறது. இது ஒரு "பயங்கரமான பள்ளத்தாக்கை" உருவாக்குகிறது, அங்கு ஒரு பயனர் ஒரு பொத்தானைப் பார்க்கிறார், அதைக் கிளிக் செய்கிறார், மேலும் எதுவும் நடக்காது. இது அந்த பொத்தானை வேலை செய்யத் தேவையான JavaScript இன்னும் முழு பக்கத்தையும் ஹைட்ரேட் செய்யும் பணியை முடிக்கவில்லை என்பதால் ஏற்படுகிறது.
இந்த விரக்தி monolithic hydration-ஆல் ஏற்படுகிறது. React பதிப்புகள் 18-க்கு முன், ஹைட்ரேஷன் என்பது அனைத்தையும் அல்லது எதையும் செய்யக்கூடிய ஒரு விஷயமாக இருந்தது. முழு பயன்பாடும் ஒரு ஒற்றை பாஸில் ஹைட்ரேட் செய்யப்பட வேண்டும். உங்களிடம் நம்பமுடியாத மெதுவான கூறு (ஒருவேளை ஒரு சிக்கலான விளக்கப்படம் அல்லது கனமான மூன்றாம் தரப்பு விட்ஜெட்) இருந்தால், அது முழு பக்கத்தின் ஹைட்ரேஷனையும் தடுக்கும். உங்கள் தலைப்பு, பக்கப்பட்டி மற்றும் முக்கிய உள்ளடக்கம் எளிமையானதாக இருக்கலாம், ஆனால் மெதுவான கூறு தயாராகும் வரை அவை ஊடாடக்கூடியதாக மாற முடியாது. இது பெரும்பாலும் Time to Interactive (TTI)-க்கு வழிவகுக்கிறது, இது பயனர் அனுபவத்திற்கான ஒரு முக்கியமான அளவீடு.
Hydration என்றால் என்ன? முக்கிய கருத்தைப் பிரித்தல்
நமது ஹைட்ரேஷன் புரிதலைச் செம்மைப்படுத்துவோம். ஒரு திரைப்படத் தொகுப்பைக் கற்பனை செய்யுங்கள். சேவையகம் நிலையான தொகுப்பை (HTML) உருவாக்கி அதை உங்களுக்கு அனுப்புகிறது. அது உண்மையானது போல் தெரிகிறது, ஆனால் நடிகர்கள் (JavaScript) இன்னும் வரவில்லை. நடிகர்கள் தொகுப்பில் வந்து, தங்கள் நிலைகளில் நின்று, செயல் மற்றும் உரையாடல் (நிகழ்வு கேட்பான்கள் மற்றும் நிலை) மூலம் காட்சியை உயிர்ப்பிக்கும் செயல்முறையே ஹைட்ரேஷன் ஆகும்.
பாரம்பரிய ஹைட்ரேஷனில், முக்கிய நட்சத்திரத்திலிருந்து பின்னணி கூடுதல் வரை ஒவ்வொரு நடிகரும் இயக்குநர் "Action!" என்று கத்துவதற்கு முன்பே இருக்க வேண்டும். ஒருவர் போக்குவரத்தில் சிக்கியிருந்தால், முழு தயாரிப்பும் நிறுத்தப்பட்டது. Selective Hydration தீர்க்கும் பிரச்சினை இதுதான்.
Selective Hydration-ஐ அறிமுகப்படுத்துதல்: கேம்-சேஞ்சர்
Selective Hydration, ஸ்ட்ரீமிங் SSR-ஐப் பயன்படுத்தும்போது React 18-ல் இயல்புநிலை நடத்தை, monolithic மாதிரியிலிருந்து விடுபடுகிறது. இது உங்கள் பயன்பாட்டை துண்டுகளாக ஹைட்ரேட் செய்ய அனுமதிக்கிறது, மிகவும் முக்கியமான பகுதிகள் அல்லது பயனர் தொடர்பு கொள்ளும் பகுதிகளை முன்னுரிமை அளிக்கிறது.
இது விளையாட்டை அடிப்படையாக எவ்வாறு மாற்றுகிறது என்பது இங்கே:
- தடுப்பற்ற ஹைட்ரேஷன்: ஒரு கூறு ஹைட்ரேட் செய்ய இன்னும் தயாராக இல்லாவிட்டால் (எடுத்துக்காட்டாக, அதன் குறியீடு `React.lazy` வழியாக ஏற்றப்பட வேண்டும்), அது இனி பக்கத்தின் மீதமுள்ளவற்றைத் தடுக்காது. React அதைத் தவிர்த்து அடுத்த கிடைக்கும் கூறுகளை ஹைட்ரேட் செய்யும்.
- Suspense உடன் ஸ்ட்ரீமிங் HTML: சேவையகத்தில் ஒரு மெதுவான கூறுக்காகக் காத்திருப்பதற்குப் பதிலாக, React அதன் இடத்தில் ஒரு பதிலியை (ஸ்பின்னர் போன்றது) அனுப்ப முடியும். மெதுவான கூறு தயாரானதும், அதன் HTML வாடிக்கையாளருக்கு ஸ்ட்ரீம் செய்யப்பட்டு தடையின்றி மாற்றப்படும்.
- பயனர்-முன்னுரிமை ஹைட்ரேஷன்: இது மிக அற்புதமான பகுதியாகும். ஒரு பயனர் ஒரு கூறு ஹைட்ரேட் செய்யப்படுவதற்கு முன்பே அதனுடன் தொடர்பு கொண்டால் (எ.கா., ஒரு பொத்தானைக் கிளிக் செய்தால்), React அந்த குறிப்பிட்ட கூறு மற்றும் அதன் பெற்றோரைக் ஹைட்ரேட் செய்வதற்கு முன்னுரிமை அளிக்கும். இது நிகழ்வைப் பதிவுசெய்து ஹைட்ரேஷன் முடிந்ததும் அதை மீண்டும் இயக்கும், பயன்பாடு உடனடியாகப் பதிலளிப்பதாகத் தோன்றும்.
நமது ஸ்டோர் ஒப்புமையை மறுபரிசீலனை செய்தால்: Selective Hydration உடன், வாடிக்கையாளர்கள் தயாரானவுடன் வெளியேறலாம். இன்னும் சிறப்பாக, அவசரமாக இருக்கும் ஒரு வாடிக்கையாளர் செக்அவுட்-க்கு அருகில் இருந்தால், ஸ்டோர் மேலாளர் (React) அவர்களுக்கு முன்னுரிமை அளிக்கலாம், வரிசையில் முன்னால் செல்ல அனுமதிக்கலாம். இந்த பயனர்-மைய அணுகுமுறை அனுபவம் இவ்வளவு வேகமாக உணர வைப்பதாகும்.
Selective Hydration-ன் தூண்கள்: Suspense மற்றும் Concurrent Rendering
Selective Hydration என்பது மந்திரம் அல்ல; இது React-ல் இரண்டு சக்திவாய்ந்த, ஒன்றோடொன்று இணைக்கப்பட்ட அம்சங்களின் விளைவாகும்: Server-Side Suspense மற்றும் Concurrent Rendering.
சேவையகத்தில் React Suspense-ஐப் புரிந்துகொள்ளுதல்
`React.lazy` உடன் குறியீடு-பிரிப்புக்கு கிளையண்டில் `
`-ஐப் பயன்படுத்துவது உங்களுக்குப் பரிச்சயமாக இருக்கலாம். சேவையகத்தில், இது ஒத்த ஆனால் சக்திவாய்ந்த பாத்திரத்தை வகிக்கிறது. நீங்கள் ஒரு கூறுகளை ` ` எல்லைக்குள் சுற்றும்போது, நீங்கள் React-க்குச் சொல்கிறீர்கள்: "இந்த UI பகுதி உடனடியாகத் தயாராக இல்லாமல் போகலாம். அதற்காகக் காத்திருக்க வேண்டாம். இப்போதைக்கு ஒரு பதிலியை அனுப்புங்கள் மற்றும் அது தயாரானதும் உண்மையான உள்ளடக்கத்தை ஸ்ட்ரீம் செய்யுங்கள்." ஒரு தயாரிப்பு விவரங்கள் பகுதி மற்றும் ஒரு சமூக ஊடக கருத்துகள் விட்ஜெட்டுடன் ஒரு பக்கத்தைக் கருதுங்கள். கருத்துகள் விட்ஜெட் பெரும்பாலும் ஒரு மூன்றாம் தரப்பு API-ஐ நம்பியுள்ளது மற்றும் மெதுவாக இருக்கலாம்.
```jsx // முன்பு: சேவையகம் fetchComments()-ஐ தீர்க்க காத்திருக்கிறது, முழு பக்கத்தையும் தாமதப்படுத்துகிறது. function ProductPage({ productId }) { const comments = fetchComments(productId); return ( <>); } // பிறகு: Suspense உடன், சேவையகம் ProductDetails-ஐ உடனடியாக அனுப்புகிறது. import { Suspense } from 'react'; const Comments = React.lazy(() => import('./Comments.js')); function ProductPage() { return ( <> }> ); } ``` இந்த மாற்றத்துடன், சேவையகம் `Comments` கூறுக்காகக் காத்திருக்காது. இது `ProductDetails` மற்றும் `Spinner` பதிலியின் HTML-ஐ உடனடியாக அனுப்புகிறது. `Comments` கூறுக்கான குறியீடு பின்னணியில் கிளையண்டில் ஏற்றப்படுகிறது. அது வந்ததும், React அதைக் ஹைட்ரேட் செய்து ஸ்பின்னரைப் மாற்றுகிறது. பயனர் முக்கிய தயாரிப்பு தகவலை முன்பை விட விரைவில் பார்க்கவும் ஊடாடவும் முடியும்.
Concurrent Rendering-ன் பங்கு
Concurrent Rendering என்பது இதைச் சாத்தியமாக்கும் அடிப்படை இயந்திரமாகும். இது உலாவி main thread-ஐத் தடுக்காமல் ரெண்டரிங் வேலையை இடைநிறுத்த, மீண்டும் தொடங்க அல்லது கைவிட React-ஐ அனுமதிக்கிறது. UI புதுப்பிப்புகளுக்கான ஒரு அதிநவீன பணி மேலாளராக அதைக் கவனியுங்கள்.
ஹைட்ரேஷன்-ன் சூழலில், ஒரேநேரமாக்கல் React-ஐ பின்வருவனவற்றைச் செய்ய உதவுகிறது:
- ஆரம்ப HTML மற்றும் சில JavaScript வந்தவுடன் பக்கத்தை ஹைட்ரேட் செய்யத் தொடங்குங்கள்.
- பயனர் ஒரு பொத்தானைக் கிளிக் செய்தால் ஹைட்ரேஷனை இடைநிறுத்துங்கள்.
- பயனரின் தொடர்புக்கு முன்னுரிமை அளித்தல், கிளிக் செய்யப்பட்ட பொத்தானைக் ஹைட்ரேட் செய்து அதன் நிகழ்வு கையாளுதலை இயக்குதல்.
- தொடர்பு கையாளப்பட்டதும் பின்னணியில் பக்கத்தின் மீதமுள்ளவற்றை ஹைட்ரேஷனை மீண்டும் தொடங்குங்கள்.
இந்த குறுக்கீடு முறை முக்கியமானது. இது பயனர் உள்ளீடு உடனடியாக கையாளப்படுவதை உறுதி செய்கிறது, First Input Delay (FID) மற்றும் புதிய, மேலும் விரிவான Interaction to Next Paint (INP) போன்ற அளவீடுகளை வியத்தகு முறையில் மேம்படுத்துகிறது. பக்கம் பின்னணியில் ஏற்றப்பட்டு ஹைட்ரேட் செய்யும் போது கூட அது ஒருபோதும் உறைந்ததாகத் தோன்றாது.
நடைமுறைச் செயல்படுத்தல்: உங்கள் பயன்பாட்டிற்கு Selective Hydration-ஐக் கொண்டு வருதல்
கோட்பாடு சிறந்தது, ஆனால் நடைமுறைக்கு வருவோம். உங்கள் சொந்த React பயன்பாட்டில் இந்த சக்திவாய்ந்த அம்சத்தை எவ்வாறு இயக்குவது?
முன் தேவைகள் மற்றும் அமைப்பு
முதலில், உங்கள் திட்டம் சரியாக அமைக்கப்பட்டிருப்பதை உறுதிசெய்யவும்:
- React 18-க்கு மேம்படுத்தவும்: `react` மற்றும் `react-dom` தொகுப்புகள் இரண்டும் பதிப்பு 18.0.0 அல்லது அதற்கு மேல் இருக்க வேண்டும்.
- கிளையண்டில் `hydrateRoot` ஐப் பயன்படுத்தவும்: பழைய `ReactDOM.hydrate`-ஐ புதிய `hydrateRoot` API உடன் மாற்றவும். இந்த புதிய API உங்கள் பயன்பாட்டை ஒரேநேர அம்சங்களுக்கு ஒதுக்குகிறது.
```jsx
// client/index.js
import { hydrateRoot } from 'react-dom/client';
import App from './App';
const container = document.getElementById('root');
hydrateRoot(container,
); ``` - சேவையகத்தில் ஸ்ட்ரீமிங் API-ஐப் பயன்படுத்தவும்: நீங்கள் ஒரு ஸ்ட்ரீமிங் ரெண்டரரைப் பயன்படுத்த வேண்டும். Node.js சூழல்களுக்கு Express அல்லது Next.js போன்றவற்றுக்கு, இது `renderToPipeableStream` ஆகும். மற்ற சூழல்களில் அவற்றின் சொந்த சமமானவை உள்ளன (எ.கா., Deno அல்லது Cloudflare Workers-க்கு `renderToReadableStream`).
குறியீடு எடுத்துக்காட்டு: ஒரு படி-படி வழிகாட்டி
முழு ஓட்டத்தையும் விளக்க Express.js-ஐப் பயன்படுத்தி ஒரு எளிய எடுத்துக்காட்டை உருவாக்குவோம்.
எங்கள் பயன்பாட்டு அமைப்பு:
- ஒரு `
` மற்றும் ஒரு ` ` உள்ளடக்கப் பகுதியைக் கொண்ட `App` கூறு. - உடனடியாகக் கிடைக்கும் `
` கூறு. - குறியீடு-பிரித்து `
`-க்குள் வைக்கும் ஒரு மெதுவான ` ` கூறு.
படி 1: சேவையகம் (`server.js`)
இங்கே, HTML-ஐ துண்டுகளாக அனுப்ப `renderToPipeableStream`-ஐப் பயன்படுத்துகிறோம்.
```jsx // server.js import express from 'express'; import fs from 'fs'; import path from 'path'; import React from 'react'; import ReactDOMServer from 'react-dom/server'; import App from './src/App'; const app = express(); app.use('^/$', (req, res, next) => { const { pipe } = ReactDOMServer.renderToPipeableStream(, { bootstrapScripts: ['/main.js'], onShellReady() { res.setHeader('content-type', 'text/html'); pipe(res); } } ); }); app.use(express.static(path.resolve(__dirname, 'build'))); app.listen(3000, () => { console.log('Server is listening on port 3000'); }); ``` படி 2: முக்கிய App கூறு (`src/App.js`)
எங்கள் `CommentsSection`-ஐ டைனமிக்-ஆக இறக்குமதி செய்து `
```jsx // src/App.js import React, { Suspense } from 'react'; const CommentsSection = React.lazy(() => import('./CommentsSection')); const Spinner = () =>`-க்குள் சுற்ற ` `-ஐப் பயன்படுத்துவோம். Loading comments...
; function App() { return (); } export default App; ```My Awesome Blog Post
This is the main content. It loads instantly and is interactive right away.
}> படி 3: மெதுவான கூறு (`src/CommentsSection.js`)
ஒரு மெதுவான கூறை உருவகப்படுத்த, அதன் promise-ஐ தாமதப்படுத்தி அதைச் சுற்றுவதற்கான ஒரு எளிய கருவியை நாம் உருவாக்கலாம். ஒரு நிஜ-உலக சூழ்நிலையில், இந்த தாமதம் சிக்கலான கணக்கீடுகள், ஒரு பெரிய குறியீடு தொகுப்பு அல்லது தரவு பெறுதல் காரணமாக இருக்கலாம்.
```jsx // நெட்வொர்க் தாமதத்தை உருவகப்படுத்தும் ஒரு கருவி function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } // src/CommentsSection.js import React from 'react'; // மெதுவான தொகுதி ஏற்றுதலை உருவகப்படுத்துதல் await delay(3000); function CommentsSection() { return (); } export default CommentsSection; ```Comments
- Great post!
- Very informative, thank you.
(குறிப்பு: Top-level `await` இதற்கு நவீன தொகுப்பான் அமைப்பு தேவைப்படுகிறது.)
இயக்க நேரத்தில் என்ன நடக்கும்?
- கோரிக்கை: பயனர் பக்கத்தைக் கோருகிறார்.
- ஆரம்ப ஸ்ட்ரீம்: Node.js சேவையகம் ரெண்டரிங் செய்யத் தொடங்குகிறது. அது `nav`, `h1`, `p`, மற்றும் `button` ஐ ரெண்டர் செய்கிறது. `CommentsSection`-க்கான `
` எல்லைக்கு வரும்போது, அது காத்திருக்காது. அது பதிலி HTML (` Loading comments...
`) ஐ அனுப்புகிறது மற்றும் தொடர்கிறது. ஆரம்ப HTML துண்டு உலாவிக்கு அனுப்பப்படுகிறது. - விரைவான FCP: உலாவி இந்த ஆரம்ப HTML-ஐ ரெண்டர் செய்கிறது. பயனர் உடனடியாக வழிசெலுத்தல் பட்டி மற்றும் முக்கிய பதிவு உள்ளடக்கத்தைப் பார்க்கிறார். கருத்துப் பகுதி ஒரு ஏற்றும் செய்தியைக் காட்டுகிறது.
- கிளையண்ட் JS ஏற்றப்படுகிறது: `main.js` தொகுப்பு பதிவிறக்கம் செய்யத் தொடங்குகிறது.
- Selective Hydration தொடங்குகிறது: `main.js` வந்தவுடன், React பக்கத்தை ஹைட்ரேட் செய்யத் தொடங்குகிறது. அது `nav` மற்றும் `button`-க்கு நிகழ்வு கேட்பான்களை இணைக்கிறது. கருத்துகள் இன்னும் "ஏற்றிக்கொண்டிருக்கும்" போது கூட, பயனர் இப்போது "Click Me" பொத்தானைக் கிளிக் செய்து எச்சரிக்கையைப் பார்க்க முடியும்.
- Lazy கூறு வருகிறது: பின்னணியில், உலாவி `CommentsSection.js`-க்கான குறியீட்டைப் பெறுகிறது. நாம் உருவகப்படுத்திய 3-வினாடி தாமதம் ஏற்படுகிறது.
- இறுதி ஸ்ட்ரீம் மற்றும் ஹைட்ரேஷன்: `CommentsSection.js` ஏற்றப்பட்டவுடன், React அதைக் ஹைட்ரேட் செய்து, ஸ்பின்னரை உண்மையான கருத்து பட்டியல் மற்றும் உள்ளீட்டு புலத்துடன் தடையின்றி மாற்றுகிறது. இது பயனரைத் தடுக்காமல் அல்லது main thread-ஐத் தடுக்காமல் நிகழ்கிறது.
இந்த நுண்ணிய, முன்னுரிமைப்படுத்தப்பட்ட செயல்முறையே Selective Hydration-ன் சாராம்சம்.
தாக்கத்தை பகுப்பாய்வு செய்தல்: செயல்திறன் நன்மைகள் மற்றும் பயனர் அனுபவ வெற்றிகள்
Selective Hydration-ஐ ஏற்றுக்கொள்வது என்பது சமீபத்திய போக்கைப் பின்பற்றுவது மட்டுமல்ல; இது உங்கள் பயனர்களுக்கு உறுதியான மேம்பாடுகளை வழங்குவதாகும்.
மேம்படுத்தப்பட்ட Core Web Vitals
- Time to Interactive (TTI): இது மிக முக்கியமான மேம்பாட்டைக் காண்கிறது. பக்கத்தின் பகுதிகள் ஹைட்ரேட் செய்யப்படும்போது ஊடாடக்கூடியதாக மாறுவதால், TTI இனி மெதுவான கூற்றால் நிர்ணயிக்கப்படுவதில்லை. பார்வைக்குரிய, உயர்-முன்னுரிமை உள்ளடக்கத்திற்கான TTI மிக முன்னதாகவே எட்டப்படுகிறது.
- First Input Delay (FID) / Interaction to Next Paint (INP): இந்த அளவீடுகள் பதிலளிப்புத்தன்மையை அளவிடுகின்றன. ஒரேநேர ரெண்டரிங் பயனர் உள்ளீட்டைக் கையாள ஹைட்ரேஷனை குறுக்கிட முடியும் என்பதால், பயனரின் செயல் மற்றும் UI-ன் பிரதிபலிப்புக்கு இடையிலான தாமதம் குறைக்கப்படுகிறது. பக்கம் தொடக்கத்திலிருந்தே துடிப்பானதாகவும் பதிலளிக்கக்கூடியதாகவும் உணர்கிறது.
மேம்படுத்தப்பட்ட பயனர் அனுபவம்
தொழில்நுட்ப அளவீடுகள் நேரடியாக ஒரு சிறந்த பயனர் பயணமாக மொழிபெயர்க்கப்படுகின்றன. SSR "பயங்கரமான பள்ளத்தாக்கின்" நீக்கம் ஒரு பெரிய வெற்றியாகும். பயனர்கள் ஒரு உறுப்பைப் பார்க்க முடிந்தால், அதை ஊடாட முடியும் என்று அவர்கள் நம்பலாம். உலகளாவிய பார்வையாளர்களுக்கு மெதுவான நெட்வொர்க்குகளில், இது உருமாற்றமானது. அவர்கள் தளத்தைப் பயன்படுத்துவதற்கு முன்பு பல-மெகாபைட் JavaScript தொகுப்பு முடிவடையும் வரை அவர்கள் காத்திருக்க வேண்டியதில்லை. அவர்கள் துண்டு துண்டாக ஒரு செயல்படும், ஊடாடக்கூடிய இடைமுகத்தைப் பெறுகிறார்கள், இது மிகவும் நேர்த்தியான மற்றும் திருப்திகரமான அனுபவமாகும்.
உலகளாவிய செயல்திறன் பார்வை
உலகளாவிய வாடிக்கையாளர் தளத்திற்கு சேவை செய்யும் ஒரு நிறுவனத்திற்கு, நெட்வொர்க் வேகம் மற்றும் சாதனத் திறன்களின் பன்முகத்தன்மை ஒரு பெரிய சவாலாக உள்ளது. சியோலில் உள்ள ஒரு உயர்-நிலை ஸ்மார்ட்போனுடன் 5G இணைப்பைக் கொண்ட ஒரு பயனர், ஒரு கிராமப்புறப் பகுதியில் 3G இணைப்பைக் கொண்ட ஒரு பட்ஜெட் சாதனத்தைக் கொண்ட பயனரை விட கணிசமாக வேறுபட்ட அனுபவத்தைப் பெறுவார். Selective Hydration இந்த இடைவெளியைக் குறைக்க உதவுகிறது. HTML-ஐ ஸ்ட்ரீமிங் செய்வதன் மூலமும், தேர்ந்தெடுத்து ஹைட்ரேட் செய்வதன் மூலமும், நீங்கள் மெதுவான இணைப்பில் உள்ள பயனருக்கு மிக விரைவாக மதிப்பை வழங்குகிறீர்கள். அவர்கள் முக்கியமான உள்ளடக்கம் மற்றும் அடிப்படை ஊடாடலை முதலில் பெறுகிறார்கள், அதே நேரத்தில் கனமான கூறுகள் பின்னணியில் ஏற்றப்படுகின்றன. இந்த அணுகுமுறை அனைவருக்கும், எல்லா இடங்களிலும் மிகவும் சமமான மற்றும் அணுகக்கூடிய வலையை உருவாக்குகிறது.
பொதுவான சிக்கல்கள் மற்றும் சிறந்த நடைமுறைகள்
Selective Hydration-ஐ முழுமையாகப் பயன்படுத்த, இந்த சிறந்த நடைமுறைகளைக் கவனியுங்கள்:
Hydration Bottlenecks-ஐ அடையாளம் காணுதல்
எந்தெந்த கூறுகள் ரெண்டரிங் மற்றும் ஹைட்ரேட் செய்ய அதிக நேரம் எடுக்கின்றன என்பதை அடையாளம் காண React DevTools Profiler-ஐப் பயன்படுத்தவும். கிளையண்டில் கணக்கீட்டு ரீதியாக விலையுயர்ந்த, பெரிய சார்பு மரங்கள் அல்லது கனமான மூன்றாம் தரப்பு ஸ்கிரிப்ட்களைத் தொடங்கும் கூறுகளைத் தேடுங்கள். இவை `
`-க்குள் சுற்ற சிறந்த வேட்பாளர்கள். `
`-ன் மூலோபாய பயன்பாடு ஒவ்வொரு கூறுகளையும் `
`-க்குள் சுற்ற வேண்டாம். இது ஒரு சிதைந்த ஏற்றுதல் அனுபவத்திற்கு வழிவகுக்கும். மூலோபாயமாக இருங்கள். நல்ல சஸ்பென்ஷன் வேட்பாளர்கள்: - கீழே உள்ள உள்ளடக்கம்: பயனர் முதலில் பார்க்காத எதுவும்.
- முக்கியமற்ற விட்ஜெட்டுகள்: சாட்போட்கள், விரிவான பகுப்பாய்வு விளக்கப்படங்கள், சமூக ஊடக ஊட்டங்கள்.
- பயனர் தொடர்பை அடிப்படையாகக் கொண்ட கூறுகள்: இயல்பாகத் தெரியாத ஒரு modal அல்லது tab-க்குள் உள்ள உள்ளடக்கம்.
- கனமான மூன்றாம் தரப்பு நூலகங்கள்: ஊடாடக்கூடிய வரைபடங்கள் அல்லது சிக்கலான தரவு காட்சிப்படுத்தல் கூறுகள்.
தரவு பெறுதல் பரிசீலனைகள்
Selective Hydration Suspense-இயக்கப்பட்ட தரவு பெறுதலுடன் கை கோர்த்து செயல்படுகிறது. React ஒரு குறிப்பிட்ட தரவு-பெறும் தீர்வை வழங்கவில்லை என்றாலும், Relay போன்ற நூலகங்களும் Next.js போன்ற கட்டமைப்புகளும் உள்ளமைக்கப்பட்ட ஆதரவைக் கொண்டுள்ளன. நீங்கள் ஒரு promise-ஐ வீசும் தனிப்பயன் hooks-ஐயும் உருவாக்கலாம், இதனால் Suspense உடன் ஒருங்கிணைக்க முடியும், இது உங்கள் கூறுகள் ஆரம்ப ஸ்ட்ரீமைத் தடுக்காமல் தரவுக்காக சேவையகத்தில் காத்திருக்க அனுமதிக்கிறது.
SEO தாக்கங்கள்
மேம்பட்ட ரெண்டரிங் நுட்பங்களைப் பற்றி ஒரு பொதுவான கவலை SEO ஆகும். அதிர்ஷ்டவசமாக, Selective Hydration SEO-க்கு சிறந்தது. ஆரம்ப HTML இன்னும் சேவையகத்தில் ரெண்டர் செய்யப்படுவதால், தேடுபொறி கிராலர்கள் உடனடியாக அர்த்தமுள்ள உள்ளடக்கத்தைப் பெறுகின்றன. Googlebot போன்ற நவீன கிராலர்கள் JavaScript-ஐயும் செயலாக்க முடியும், மேலும் பின்னர் ஸ்ட்ரீம் செய்யப்படும் உள்ளடக்கத்தைக் காண்பார்கள். இதன் விளைவாக ஒரு வேகமான, அட்டவணைப்படுத்தக்கூடிய பக்கம் மற்றும் பயனர்களுக்கு மிகவும் செயல்திறன் மிக்கது - ஒரு வெற்றி-வெற்றி.
React-ல் ரெண்டரிங்-ன் எதிர்காலம்: Server Components
Selective Hydration என்பது React-ல் அடுத்த பெரிய பரிணாம வளர்ச்சிக்கு வழி வகுக்கும் ஒரு அடிப்படை தொழில்நுட்பமாகும்: React Server Components (RSC).
Server Components என்பது சேவையகத்தில் பிரத்தியேகமாக இயங்கும் ஒரு புதிய வகை கூறு ஆகும். அவை கிளையன்ட்-பக்க JavaScript அச்சுப்பாதையைக் கொண்டிருக்கவில்லை, அதாவது அவை உங்கள் தொகுப்பு அளவிற்கு பூஜ்ஜிய கிலோபைட்களை பங்களிக்கின்றன. அவை நிலையான உள்ளடக்கத்தைக் காண்பிப்பதற்கும் அல்லது தரவுத்தளத்திலிருந்து நேரடியாகத் தரவைப் பெறுவதற்கும் சரியானவை.
எதிர்காலப் பார்வை என்பது கட்டமைப்புகளின் தடையற்ற கலவையாகும்:
- நிலையான உள்ளடக்கம் மற்றும் தரவு அணுகலுக்கான Server Components.
- ஊடாடலுக்கு Client Components (நாம் இன்று பயன்படுத்தும் கூறுகள்).
- பயனரைத் தடுக்காமல் பக்கத்தின் ஊடாடும் பகுதிகளை உயிர்ப்பிக்கும் பாலமாக Selective Hydration.
இந்த கலவை அனைத்து உலகங்களின் சிறந்தவற்றைக் கொண்டுவரும் என்று உறுதியளிக்கிறது: சேவையக-ரெண்டர் செய்யப்பட்ட பயன்பாட்டின் செயல்திறன் மற்றும் எளிமை, கிளையன்ட்-பக்க SPA-வின் பணக்கார ஊடாடலுடன்.
முடிவுரை: வலை உருவாக்கத்தில் ஒரு paradigm shift
React Selective Hydration என்பது ஒரு அதிகரிக்கும் செயல்திறன் மேம்பாட்டை விட அதிகம். இது நாம் வலைக்காகக் கட்டும் விதத்தில் ஒரு அடிப்படை paradigm shift-ஐக் குறிக்கிறது. ஒரு monolithic, அனைத்தையும் அல்லது எதையும் செய்யக்கூடிய மாதிரியிலிருந்து விலகிச் செல்வதன் மூலம், நாம் மேலும் நுண்ணிய, மீள்திறன் கொண்ட மற்றும் பயனரின் உண்மையான தொடர்புகளை மையமாகக் கொண்ட பயன்பாடுகளை உருவாக்க முடியும்.
இது என்ன முக்கியம் என்பதை முன்னுரிமைப்படுத்த அனுமதிக்கிறது, சவாலான நெட்வொர்க் நிலைகளிலும் கூட ஒரு பயன்படுத்தக்கூடிய மற்றும் மகிழ்ச்சியான அனுபவத்தை வழங்குகிறது. ஒரு வலைப்பக்கத்தின் அனைத்து பகுதிகளும் சமமாக உருவாக்கப்படவில்லை என்பதை இது ஒப்புக்கொள்கிறது மற்றும் ஏற்றுதல் செயல்முறையைத் துல்லியத்துடன் ஒருங்கிணைக்க டெவலப்பர்களுக்கு கருவிகளைக் கொடுக்கிறது.
பெரிய அளவிலான, உலகளாவிய பயன்பாட்டில் பணிபுரியும் எந்தவொரு டெவலப்பருக்கும், React 18-க்கு மேம்படுத்துவதும் Selective Hydration-ஐ ஏற்றுக்கொள்வதும் இனி விருப்பமல்ல - இது அவசியம். `Suspense` மற்றும் ஸ்ட்ரீமிங் SSR உடன் இன்று பரிசோதனை செய்யத் தொடங்குங்கள். உங்கள் பயனர்கள், அவர்கள் உலகில் எங்கிருந்தாலும், வேகமான, மென்மையான மற்றும் மேலும் பதிலளிக்கக்கூடிய அனுபவத்திற்காக உங்களுக்கு நன்றி தெரிவிப்பார்கள்.