റിയാക്ട് സെലക്ടീവ് ഹൈഡ്രേഷൻ: മുൻഗണന അടിസ്ഥാനമാക്കിയുള്ള കമ്പോണന്റ് ലോഡിംഗിനെക്കുറിച്ചൊരു ആഴത്തിലുള്ള വിശകലനം

മികച്ച വെബ് പ്രകടനത്തിനായുള്ള നിരന്തരമായ പരിശ്രമത്തിൽ, ഫ്രണ്ടെൻഡ് ഡെവലപ്പർമാർ എപ്പോഴും സങ്കീർണ്ണമായ ഒരു വിട്ടുവീഴ്ചയെ അഭിമുഖീകരിക്കുന്നു. നമുക്ക് സമ്പന്നവും ഇന്ററാക്ടീവുമായ ആപ്ലിക്കേഷനുകൾ വേണം, എന്നാൽ ഉപയോക്താവിന്റെ ഉപകരണമോ നെറ്റ്‌വർക്ക് വേഗതയോ പരിഗണിക്കാതെ, അവ തൽക്ഷണം ലോഡുചെയ്യുകയും കാലതാമസമില്ലാതെ പ്രതികരിക്കുകയും വേണം. വർഷങ്ങളായി, സെർവർ-സൈഡ് റെൻഡറിംഗ് (SSR) ഈ പരിശ്രമത്തിന്റെ ഒരു അടിസ്ഥാന ശിലയായിരുന്നു, വേഗതയേറിയ പ്രാരംഭ പേജ് ലോഡുകളും ശക്തമായ SEO നേട്ടങ്ങളും ഇത് നൽകി. എന്നിരുന്നാലും, പരമ്പരാഗത SSR-ന് ഒരു പ്രധാന തടസ്സമുണ്ടായിരുന്നു: ഭയാനകമായ "എല്ലാം അല്ലെങ്കിൽ ഒന്നുമില്ല" എന്ന ഹൈഡ്രേഷൻ പ്രശ്നം.

ഒരു SSR-ജനറേറ്റഡ് പേജ് യഥാർത്ഥത്തിൽ ഇന്ററാക്ടീവ് ആകുന്നതിന് മുമ്പ്, മുഴുവൻ ആപ്ലിക്കേഷന്റെയും ജാവാസ്ക്രിപ്റ്റ് ബണ്ടിൽ ഡൗൺലോഡ് ചെയ്യുകയും, പാഴ്സ് ചെയ്യുകയും, എക്സിക്യൂട്ട് ചെയ്യുകയും വേണമായിരുന്നു. ഇത് പലപ്പോഴും ഉപയോക്താക്കൾക്ക് നിരാശാജനകമായ ഒരു അനുഭവത്തിലേക്ക് നയിച്ചു, അവിടെ ഒരു പേജ് പൂർണ്ണവും തയ്യാറായതുമായി കാണപ്പെടുമെങ്കിലും ക്ലിക്കുകളോടോ ഇൻപുട്ടുകളോടോ പ്രതികരിക്കില്ല. ഈ പ്രതിഭാസം ടൈം ടു ഇന്ററാക്ടീവ് (TTI), പുതിയ ഇന്ററാക്ഷൻ ടു നെക്സ്റ്റ് പെയിന്റ് (INP) പോലുള്ള പ്രധാന മെട്രിക്കുകളെ പ്രതികൂലമായി ബാധിക്കുന്നു.

അപ്പോഴാണ് റിയാക്ട് 18 വരുന്നത്. അതിന്റെ വിപ്ലവകരമായ കൺകറന്റ് റെൻഡറിംഗ് എഞ്ചിൻ ഉപയോഗിച്ച്, റിയാക്ട് ശക്തവും ലളിതവുമായ ഒരു പരിഹാരം അവതരിപ്പിച്ചു: സെലക്ടീവ് ഹൈഡ്രേഷൻ. ഇത് വെറുമൊരു ചെറിയ മെച്ചപ്പെടുത്തലല്ല; റിയാക്ട് ആപ്ലിക്കേഷനുകൾ ബ്രൗസറിൽ എങ്ങനെ ജീവൻ നേടുന്നു എന്നതിലെ ഒരു അടിസ്ഥാനപരമായ മാറ്റമാണിത്. ഇത് മോണോലിത്തിക്ക് ഹൈഡ്രേഷൻ മാതൃകയിൽ നിന്ന് മാറി, ഉപയോക്തൃ ഇടപെടലിന് പ്രഥമസ്ഥാനം നൽകുന്ന ഒരു സൂക്ഷ്മവും മുൻഗണന അടിസ്ഥാനമാക്കിയുള്ളതുമായ ഒരു സിസ്റ്റത്തിലേക്ക് നീങ്ങുന്നു.

ഈ സമഗ്രമായ ഗൈഡ് റിയാക്ട് സെലക്ടീവ് ഹൈഡ്രേഷന്റെ പ്രവർത്തനരീതികൾ, പ്രയോജനങ്ങൾ, പ്രായോഗിക നടപ്പാക്കൽ എന്നിവയെക്കുറിച്ച് പര്യവേക്ഷണം ചെയ്യും. ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു, ആഗോള ആപ്ലിക്കേഷനുകൾക്ക് ഇതൊരു ഗെയിം ചേഞ്ചർ ആകുന്നത് എന്തുകൊണ്ട്, വേഗതയേറിയതും കൂടുതൽ പ്രതിരോധശേഷിയുള്ളതുമായ ഉപയോക്തൃ അനുഭവങ്ങൾ നിർമ്മിക്കാൻ നിങ്ങൾക്ക് ഇത് എങ്ങനെ പ്രയോജനപ്പെടുത്താം എന്നിവയെക്കുറിച്ച് നമ്മൾ വിശദമായി ചർച്ച ചെയ്യും.

ഭൂതകാലത്തെ മനസ്സിലാക്കൽ: പരമ്പരാഗത SSR ഹൈഡ്രേഷന്റെ വെല്ലുവിളി

സെലക്ടീവ് ഹൈഡ്രേഷന്റെ പുതുമയെ പൂർണ്ണമായി അഭിനന്ദിക്കാൻ, അത് മറികടക്കാൻ രൂപകൽപ്പന ചെയ്ത പരിമിതികളെ നാം ആദ്യം മനസ്സിലാക്കണം. നമുക്ക് റിയാക്ട് 18-ന് മുമ്പുള്ള സെർവർ-സൈഡ് റെൻഡറിംഗിന്റെ ലോകത്തേക്ക് മടങ്ങാം.

എന്താണ് സെർവർ-സൈഡ് റെൻഡറിംഗ് (SSR)?

ഒരു സാധാരണ ക്ലയിന്റ്-സൈഡ് റെൻഡേർഡ് (CSR) റിയാക്ട് ആപ്ലിക്കേഷനിൽ, ബ്രൗസറിന് ഒരു ചെറിയ HTML ഫയലും ഒരു വലിയ ജാവാസ്ക്രിപ്റ്റ് ബണ്ടിലുമാണ് ലഭിക്കുന്നത്. തുടർന്ന് ബ്രൗസർ പേജ് ഉള്ളടക്കം റെൻഡർ ചെയ്യുന്നതിനായി ജാവാസ്ക്രിപ്റ്റ് എക്സിക്യൂട്ട് ചെയ്യുന്നു. ഈ പ്രക്രിയ മന്ദഗതിയിലാകാം, ഇത് ഉപയോക്താക്കളെ ഒരു ശൂന്യമായ സ്ക്രീനിൽ നോക്കിയിരിക്കാൻ ഇടയാക്കുകയും സെർച്ച് എഞ്ചിൻ ക്രോളറുകൾക്ക് ഉള്ളടക്കം ഇൻഡെക്സ് ചെയ്യുന്നത് ബുദ്ധിമുട്ടാക്കുകയും ചെയ്യുന്നു.

SSR ഈ മാതൃകയെ തലകീഴായി മാറ്റുന്നു. സെർവർ റിയാക്ട് ആപ്ലിക്കേഷൻ പ്രവർത്തിപ്പിക്കുകയും, അഭ്യർത്ഥിച്ച പേജിനായി പൂർണ്ണമായ HTML സൃഷ്ടിക്കുകയും, അത് ബ്രൗസറിലേക്ക് അയയ്ക്കുകയും ചെയ്യുന്നു. ഇതിന്റെ പ്രയോജനങ്ങൾ ഉടനടി ലഭിക്കുന്നു:

വേഗതയേറിയ ഫസ്റ്റ് കണ്ടന്റ്ഫുൾ പെയിന്റ് (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 />  <!-- ഈ കമ്പോണന്റ് ഡാറ്റ ലഭ്യമാക്കിയേക്കാം -->
        </Suspense>
      </main>
      <Suspense fallback={<ChatWidgetLoader />}>
        <ChatWidget /> <!-- ഇതൊരു ഹെവി തേർഡ്-പാർട്ടി സ്ക്രിപ്റ്റാണ് -->
      </Suspense>
      <Footer />
    </div>
  );
}

ഈ ഉദാഹരണത്തിൽ, `Header`, `ArticleContent`, `Footer` എന്നിവ ഉടനടി റെൻഡർ ചെയ്യുകയും സ്ട്രീം ചെയ്യുകയും ചെയ്യും. ബ്രൗസറിന് `CommentsSkeleton`, `ChatWidgetLoader` എന്നിവയ്ക്കുള്ള HTML ലഭിക്കും. പിന്നീട്, `CommentsSection`, `ChatWidget` എന്നിവ സെർവറിൽ തയ്യാറാകുമ്പോൾ, അവയുടെ HTML ക്ലയന്റിലേക്ക് സ്ട്രീം ചെയ്യും. ഈ `` ബൗണ്ടറികൾ സെലക്ടീവ് ഹൈഡ്രേഷന്റെ മാന്ത്രികത പ്രവർത്തിക്കാൻ അനുവദിക്കുന്ന വിടവുകൾ സൃഷ്ടിക്കുന്നു.

ഇതെങ്ങനെ പ്രവർത്തിക്കുന്നു: മുൻഗണന അടിസ്ഥാനമാക്കിയുള്ള ലോഡിംഗ് പ്രവർത്തനത്തിൽ

പ്രവർത്തനങ്ങളുടെ ക്രമം നിർണ്ണയിക്കാൻ ഉപയോക്തൃ ഇടപെടൽ എങ്ങനെ ഉപയോഗിക്കുന്നു എന്നതിലാണ് സെലക്ടീവ് ഹൈഡ്രേഷന്റെ യഥാർത്ഥ മിഴിവ്. റിയാക്ട് ഇനി കർശനമായ, ടോപ്പ്-ഡൗൺ ഹൈഡ്രേഷൻ സ്ക്രിപ്റ്റ് പിന്തുടരുന്നില്ല; അത് ഉപയോക്താവിനോട് ചലനാത്മകമായി പ്രതികരിക്കുന്നു.

ഉപയോക്താവാണ് മുൻഗണന

ഇതാണ് പ്രധാന തത്വം: ഉപയോക്താവ് സംവദിക്കുന്ന കമ്പോണന്റുകൾക്ക് റിയാക്ട് ഹൈഡ്രേറ്റ് ചെയ്യുന്നതിൽ മുൻഗണന നൽകുന്നു.

റിയാക്ട് പേജ് ഹൈഡ്രേറ്റ് ചെയ്യുമ്പോൾ, അത് റൂട്ട് ലെവലിൽ ഇവന്റ് ലിസണറുകൾ ഘടിപ്പിക്കുന്നു. ഇതുവരെ ഹൈഡ്രേറ്റ് ചെയ്തിട്ടില്ലാത്ത ഒരു കമ്പോണന്റിനുള്ളിലെ ഒരു ബട്ടണിൽ ഉപയോക്താവ് ക്ലിക്ക് ചെയ്താൽ, റിയാക്ട് വളരെ സമർത്ഥമായ ഒരു കാര്യം ചെയ്യുന്നു:

ഇവന്റ് ക്യാപ്‌ചർ: റിയാക്ട് റൂട്ടിൽ വെച്ച് ക്ലിക്ക് ഇവന്റ് പിടിച്ചെടുക്കുന്നു.
മുൻഗണന നൽകൽ: ഉപയോക്താവ് ഏത് കമ്പോണന്റിലാണ് ക്ലിക്ക് ചെയ്തതെന്ന് അത് തിരിച്ചറിയുന്നു. തുടർന്ന് ആ പ്രത്യേക കമ്പോണന്റിനെയും അതിന്റെ പാരന്റ് കമ്പോണന്റുകളെയും ഹൈഡ്രേറ്റ് ചെയ്യുന്നതിനുള്ള മുൻഗണന വർദ്ധിപ്പിക്കുന്നു. നടന്നുകൊണ്ടിരിക്കുന്ന താഴ്ന്ന മുൻഗണനയുള്ള ഏതെങ്കിലും ഹൈഡ്രേഷൻ പ്രവർത്തനം താൽക്കാലികമായി നിർത്തുന്നു.
ഹൈഡ്രേറ്റ് ചെയ്ത് റീപ്ലേ ചെയ്യുക: റിയാക്ട് അടിയന്തിരമായി ടാർഗെറ്റ് കമ്പോണന്റിനെ ഹൈഡ്രേറ്റ് ചെയ്യുന്നു. ഹൈഡ്രേഷൻ പൂർത്തിയാകുകയും `onClick` ഹാൻഡ്‌ലർ ഘടിപ്പിക്കുകയും ചെയ്തുകഴിഞ്ഞാൽ, റിയാക്ട് പിടിച്ചെടുത്ത ക്ലിക്ക് ഇവന്റ് വീണ്ടും പ്ലേ ചെയ്യുന്നു.

ഉപയോക്താവിന്റെ കാഴ്ചപ്പാടിൽ, കമ്പോണന്റ് തുടക്കം മുതൽ ഇന്ററാക്ടീവ് ആയിരുന്നതുപോലെ, ആ ഇടപെടൽ പ്രവർത്തിക്കുന്നു. ഇത് തൽക്ഷണം സംഭവിക്കാൻ തിരശ്ശീലയ്ക്ക് പിന്നിൽ സങ്കീർണ്ണമായ ഒരു മുൻഗണനാ നൃത്തം നടന്നുവെന്ന് അവർ അറിയുന്നതേയില്ല.

ഘട്ടം ഘട്ടമായുള്ള ഒരു സാഹചര്യം

ഇത് പ്രവർത്തനത്തിൽ കാണാൻ നമ്മുടെ ഇ-കൊമേഴ്‌സ് പേജ് ഉദാഹരണത്തിലൂടെ കടന്നുപോകാം. പേജിന് ഒരു പ്രധാന ഉൽപ്പന്ന ഗ്രിഡ്, സങ്കീർണ്ണമായ ഫിൽട്ടറുകളുള്ള ഒരു സൈഡ്‌ബാർ, താഴെ ഒരു ഹെവി തേർഡ്-പാർട്ടി ചാറ്റ് വിഡ്ജറ്റ് എന്നിവയുണ്ട്.

സെർവർ സ്ട്രീമിംഗ്: ഉൽപ്പന്ന ഗ്രിഡ് ഉൾപ്പെടെയുള്ള പ്രാരംഭ HTML ഷെൽ സെർവർ അയയ്ക്കുന്നു. സൈഡ്‌ബാറും ചാറ്റ് വിഡ്ജറ്റും ``-ൽ പൊതിഞ്ഞ് അവയുടെ ഫാൾബാക്ക് UI-കൾ (സ്കെലിറ്റൺ/ലോഡറുകൾ) അയയ്ക്കുന്നു.
പ്രാരംഭ റെൻഡർ: ബ്രൗസർ ഉൽപ്പന്ന ഗ്രിഡ് റെൻഡർ ചെയ്യുന്നു. ഉപയോക്താവിന് ഉൽപ്പന്നങ്ങൾ മിക്കവാറും ഉടനടി കാണാൻ കഴിയും. ജാവാസ്ക്രിപ്റ്റ് ഘടിപ്പിക്കാത്തതിനാൽ TTI ഇപ്പോഴും ഉയർന്നതാണ്.
കോഡ് ലോഡിംഗ്: ജാവാസ്ക്രിപ്റ്റ് ബണ്ടിലുകൾ ഡൗൺലോഡ് ചെയ്യാൻ തുടങ്ങുന്നു. സൈഡ്‌ബാറിനും ചാറ്റ് വിഡ്ജറ്റിനുമുള്ള കോഡ് പ്രത്യേക, കോഡ്-സ്പ്ലിറ്റ് ചങ്കുകളിലാണെന്ന് കരുതുക.
ഉപയോക്തൃ ഇടപെടൽ: ഒന്നും ഹൈഡ്രേറ്റ് ചെയ്തുതീരുന്നതിനുമുമ്പ്, ഉപയോക്താവിന് ഇഷ്ടപ്പെട്ട ഒരു ഉൽപ്പന്നം കാണുകയും ഉൽപ്പന്ന ഗ്രിഡിനുള്ളിലെ "Add to Cart" ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുകയും ചെയ്യുന്നു.
മുൻഗണനയുടെ മാന്ത്രികത: റിയാക്ട് ക്ലിക്ക് പിടിച്ചെടുക്കുന്നു. `ProductGrid` കമ്പോണന്റിനുള്ളിലാണ് ക്ലിക്ക് നടന്നതെന്ന് അത് കാണുന്നു. പേജിന്റെ മറ്റ് ഭാഗങ്ങളുടെ ഹൈഡ്രേഷൻ (അത് ഒരുപക്ഷേ ഇപ്പോൾ തുടങ്ങിയിട്ടുണ്ടാവാം) ഉടനടി നിർത്തുകയോ താൽക്കാലികമായി നിർത്തുകയോ ചെയ്ത് `ProductGrid` ഹൈഡ്രേറ്റ് ചെയ്യുന്നതിൽ മാത്രം ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു.
വേഗതയേറിയ ഇന്ററാക്ടിവിറ്റി: `ProductGrid` കമ്പോണന്റ് വളരെ വേഗത്തിൽ ഹൈഡ്രേറ്റ് ചെയ്യുന്നു, കാരണം അതിന്റെ കോഡ് മിക്കവാറും പ്രധാന ബണ്ടിലിലായിരിക്കും. `onClick` ഹാൻഡ്‌ലർ ഘടിപ്പിക്കുകയും, പിടിച്ചെടുത്ത ക്ലിക്ക് ഇവന്റ് വീണ്ടും പ്ലേ ചെയ്യുകയും ചെയ്യുന്നു. ഇനം കാർട്ടിലേക്ക് ചേർക്കുന്നു. ഉപയോക്താവിന് ഉടനടി ഫീഡ്‌ബാക്ക് ലഭിക്കുന്നു.
ഹൈഡ്രേഷൻ പുനരാരംഭിക്കുന്നു: ഇപ്പോൾ ഉയർന്ന മുൻഗണനയുള്ള ഇടപെടൽ കൈകാര്യം ചെയ്തുകഴിഞ്ഞു, റിയാക്ട് അതിന്റെ ജോലി പുനരാരംഭിക്കുന്നു. അത് സൈഡ്‌ബാർ ഹൈഡ്രേറ്റ് ചെയ്യാൻ മുന്നോട്ട് പോകുന്നു. ഒടുവിൽ, ചാറ്റ് വിഡ്ജറ്റിന്റെ കോഡ് എത്തുമ്പോൾ, അത് ആ കമ്പോണന്റിനെ അവസാനമായി ഹൈഡ്രേറ്റ് ചെയ്യുന്നു.

ഫലം? പേജിന്റെ ഏറ്റവും നിർണായക ഭാഗത്തിനായുള്ള TTI, ഉപയോക്താവിന്റെ സ്വന്തം ഉദ്ദേശ്യം കൊണ്ട് നയിക്കപ്പെട്ട്, ഏതാണ്ട് തൽക്ഷണമായിരുന്നു. മൊത്തത്തിലുള്ള പേജ് TTI ഇനി ഒരൊറ്റ, ഭയാനകമായ സംഖ്യയല്ല, മറിച്ച് പുരോഗമനപരവും ഉപയോക്തൃ കേന്ദ്രീകൃതവുമായ ഒരു പ്രക്രിയയാണ്.

ആഗോള ഉപയോക്താക്കൾക്കുള്ള മൂർത്തമായ പ്രയോജനങ്ങൾ

സെലക്ടീവ് ഹൈഡ്രേഷന്റെ സ്വാധീനം വളരെ വലുതാണ്, പ്രത്യേകിച്ചും വ്യത്യസ്ത നെറ്റ്‌വർക്ക് സാഹചര്യങ്ങളും ഉപകരണ ശേഷികളുമുള്ള വൈവിധ്യമാർന്ന, ആഗോള ഉപയോക്താക്കൾക്ക് സേവനം നൽകുന്ന ആപ്ലിക്കേഷനുകൾക്ക്.

അനുഭവവേദ്യമായ പ്രകടനത്തിൽ നാടകീയമായ പുരോഗതി

ഏറ്റവും പ്രധാനപ്പെട്ട നേട്ടം ഉപയോക്താക്കൾക്ക് അനുഭവവേദ്യമാകുന്ന പ്രകടനത്തിലെ വലിയ പുരോഗതിയാണ്. ഉപയോക്താവ് സംവദിക്കുന്ന പേജിന്റെ ഭാഗങ്ങൾ ആദ്യം ലഭ്യമാക്കുന്നതിലൂടെ, ആപ്ലിക്കേഷൻ വേഗതയേറിയതായി *തോന്നുന്നു*. ഉപയോക്താക്കളെ നിലനിർത്തുന്നതിന് ഇത് നിർണായകമാണ്. ഒരു വികസ്വര രാജ്യത്തെ വേഗത കുറഞ്ഞ 3G നെറ്റ്‌വർക്കിലുള്ള ഒരു ഉപയോക്താവിനെ സംബന്ധിച്ചിടത്തോളം, മുഴുവൻ പേജും ഇന്ററാക്ടീവ് ആകാൻ 15 സെക്കൻഡ് കാത്തിരിക്കുന്നതും, 3 സെക്കൻഡിനുള്ളിൽ പ്രധാന ഉള്ളടക്കവുമായി സംവദിക്കാൻ കഴിയുന്നതും തമ്മിലുള്ള വ്യത്യാസം വളരെ വലുതാണ്.

മെച്ചപ്പെട്ട കോർ വെബ് വൈറ്റൽസ്

സെലക്ടീവ് ഹൈഡ്രേഷൻ ഗൂഗിളിന്റെ കോർ വെബ് വൈറ്റൽസിനെ നേരിട്ട് സ്വാധീനിക്കുന്നു:

ഇന്ററാക്ഷൻ ടു നെക്സ്റ്റ് പെയിന്റ് (INP): ഈ പുതിയ മെട്രിക് പ്രതികരണശേഷി അളക്കുന്നു. ഉപയോക്തൃ ഇൻപുട്ടിനെ അടിസ്ഥാനമാക്കി ഹൈഡ്രേഷന് മുൻഗണന നൽകുന്നതിലൂടെ, സെലക്ടീവ് ഹൈഡ്രേഷൻ ഇടപെടലുകൾ വേഗത്തിൽ കൈകാര്യം ചെയ്യപ്പെടുന്നുവെന്ന് ഉറപ്പാക്കുന്നു, ഇത് വളരെ കുറഞ്ഞ INP-ലേക്ക് നയിക്കുന്നു.
ടൈം ടു ഇന്ററാക്ടീവ് (TTI): *മുഴുവൻ* പേജിനുമുള്ള TTI-ക്ക് ഇനിയും സമയമെടുത്തേക്കാം എങ്കിലും, നിർണായകമായ ഉപയോക്തൃ പാതകൾക്കുള്ള TTI ഗണ്യമായി കുറയുന്നു.
ഫസ്റ്റ് ഇൻപുട്ട് ഡിലേ (FID): INP-ക്ക് സമാനമായി, ആദ്യത്തെ ഇടപെടൽ പ്രോസസ്സ് ചെയ്യുന്നതിന് മുമ്പുള്ള കാലതാമസം FID അളക്കുന്നു. സെലക്ടീവ് ഹൈഡ്രേഷൻ ഈ കാലതാമസം കുറയ്ക്കുന്നു.

ഭാരമേറിയ കമ്പോണന്റുകളിൽ നിന്ന് ഉള്ളടക്കത്തെ വേർപെടുത്തുന്നു

ആധുനിക വെബ് ആപ്പുകൾ പലപ്പോഴും അനലിറ്റിക്സ്, A/B ടെസ്റ്റിംഗ്, കസ്റ്റമർ സപ്പോർട്ട് ചാറ്റുകൾ, അല്ലെങ്കിൽ പരസ്യങ്ങൾ എന്നിവയ്ക്കുള്ള ഭാരമേറിയ തേർഡ്-പാർട്ടി സ്ക്രിപ്റ്റുകളാൽ നിറഞ്ഞതാണ്. ചരിത്രപരമായി, ഈ സ്ക്രിപ്റ്റുകൾക്ക് മുഴുവൻ ആപ്ലിക്കേഷനും ഇന്ററാക്ടീവ് ആകുന്നതിൽ നിന്ന് തടയാൻ കഴിയുമായിരുന്നു. സെലക്ടീവ് ഹൈഡ്രേഷനും ``-ഉം ഉപയോഗിച്ച്, ഈ അപ്രധാനമായ കമ്പോണന്റുകളെ പൂർണ്ണമായും ഒറ്റപ്പെടുത്താൻ കഴിയും. പ്രധാന ആപ്ലിക്കേഷൻ ഉള്ളടക്കം ലോഡുചെയ്യുകയും ഇന്ററാക്ടീവ് ആകുകയും ചെയ്യുമ്പോൾ, ഈ ഭാരമേറിയ സ്ക്രിപ്റ്റുകൾ പശ്ചാത്തലത്തിൽ ലോഡുചെയ്യുകയും ഹൈഡ്രേറ്റ് ചെയ്യുകയും ചെയ്യും, ഇത് പ്രധാന ഉപയോക്തൃ അനുഭവത്തെ ബാധിക്കാതെ തന്നെ.

കൂടുതൽ പ്രതിരോധശേഷിയുള്ള ആപ്ലിക്കേഷനുകൾ

ഹൈഡ്രേഷൻ ഭാഗങ്ങളായി സംഭവിക്കുന്നതിനാൽ, അപ്രധാനമായ ഒരു കമ്പോണന്റിലെ (ഒരു സോഷ്യൽ മീഡിയ വിഡ്ജറ്റ് പോലുള്ളവ) ഒരു പിശക് മുഴുവൻ പേജിനെയും തകർക്കണമെന്നില്ല. റിയാക്ടിന് ആ `` ബൗണ്ടറിക്കുള്ളിൽ പിശകിനെ ഒറ്റപ്പെടുത്താൻ കഴിഞ്ഞേക്കും, അതേസമയം ആപ്ലിക്കേഷന്റെ ബാക്കി ഭാഗങ്ങൾ ഇന്ററാക്ടീവ് ആയി തുടരും.

പ്രായോഗിക നിർവ്വഹണവും മികച്ച രീതികളും

സെലക്ടീവ് ഹൈഡ്രേഷൻ സ്വീകരിക്കുന്നത് സങ്കീർണ്ണമായ പുതിയ കോഡ് എഴുതുന്നതിനേക്കാൾ, നിങ്ങളുടെ ആപ്ലിക്കേഷൻ ശരിയായി ഘടനപ്പെടുത്തുന്നതിനെക്കുറിച്ചാണ്. Next.js (അതിന്റെ ആപ്പ് റൂട്ടർ ഉപയോഗിച്ച്), Remix പോലുള്ള ആധുനിക ഫ്രെയിംവർക്കുകൾ നിങ്ങൾക്ക് വേണ്ടി സെർവർ സജ്ജീകരണത്തിന്റെ ഭൂരിഭാഗവും കൈകാര്യം ചെയ്യുന്നു, എന്നാൽ പ്രധാന തത്വങ്ങൾ മനസ്സിലാക്കുന്നത് നിർണായകമാണ്.

`hydrateRoot` API സ്വീകരിക്കുന്നു

ക്ലയിന്റിൽ, ഈ പുതിയ സ്വഭാവത്തിന്റെ പ്രവേശന പോയിന്റ് `hydrateRoot` API ആണ്. നിങ്ങൾ പഴയ `ReactDOM.hydrate`-ൽ നിന്ന് `ReactDOM.hydrateRoot`-ലേക്ക് മാറും.


// മുമ്പ് (ലെഗസി)
import { hydrate } from 'react-dom';
const container = document.getElementById('root');
hydrate(<App />, container);

// ശേഷം (റിയാക്ട് 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}> <!-- മറഞ്ഞിരിക്കുന്ന വിഡ്ജറ്റിന് വിഷ്വൽ ലോഡർ ആവശ്യമില്ല -->
        <ChatWidget />
      </Suspense>
    </div>
  );
}

ഈ സജ്ജീകരണത്തിൽ, `CommentsSection`, `ChatWidget` എന്നിവയ്ക്കുള്ള ജാവാസ്ക്രിപ്റ്റ് കോഡ് പ്രത്യേക ഫയലുകളിലായിരിക്കും. റിയാക്ട് അവയെ റെൻഡർ ചെയ്യാൻ തീരുമാനിക്കുമ്പോൾ മാത്രമേ ബ്രൗസർ അവയെ ലഭ്യമാക്കുകയുള്ളൂ, കൂടാതെ അവ പ്രധാന `ArticleContent`-നെ തടസ്സപ്പെടുത്താതെ സ്വതന്ത്രമായി ഹൈഡ്രേറ്റ് ചെയ്യും.

`renderToPipeableStream` ഉപയോഗിച്ചുള്ള സെർവർ-സൈഡ് സജ്ജീകരണം

ഒരു കസ്റ്റം SSR സൊല്യൂഷൻ നിർമ്മിക്കുന്നവർക്ക്, ഉപയോഗിക്കേണ്ട സെർവർ-സൈഡ് API ആണ് `renderToPipeableStream`. ഈ API സ്ട്രീമിംഗിനായി പ്രത്യേകം രൂപകൽപ്പന ചെയ്തിട്ടുള്ളതും ``-മായി പരിധികളില്ലാതെ സംയോജിക്കുന്നതുമാണ്. എപ്പോൾ HTML അയയ്ക്കണമെന്നും പിശകുകൾ എങ്ങനെ കൈകാര്യം ചെയ്യണമെന്നും ഇത് നിങ്ങൾക്ക് സൂക്ഷ്മമായ നിയന്ത്രണം നൽകുന്നു. എന്നിരുന്നാലും, മിക്ക ഡെവലപ്പർമാർക്കും, Next.js പോലുള്ള ഒരു മെറ്റാ-ഫ്രെയിംവർക്കാണ് ശുപാർശ ചെയ്യുന്ന മാർഗ്ഗം, കാരണം അത് ഈ സങ്കീർണ്ണതയെ ലളിതമാക്കുന്നു.

ഭാവി: റിയാക്ട് സെർവർ കമ്പോണന്റ്സ്

സെലക്ടീവ് ഹൈഡ്രേഷൻ ഒരു സുപ്രധാന മുന്നേറ്റമാണ്, പക്ഷേ ഇത് ഇതിലും വലിയ ഒരു കഥയുടെ ഭാഗമാണ്. അടുത്ത പരിണാമം റിയാക്ട് സെർവർ കമ്പോണന്റ്സ് (RSCs) ആണ്. RSCs സെർവറിൽ മാത്രം പ്രവർത്തിക്കുന്നതും അവയുടെ ജാവാസ്ക്രിപ്റ്റ് ഒരിക്കലും ക്ലയിന്റിലേക്ക് അയയ്ക്കാത്തതുമായ കമ്പോണന്റുകളാണ്. ഇതിനർത്ഥം അവയെ ഹൈഡ്രേറ്റ് ചെയ്യേണ്ട ആവശ്യമില്ല, ഇത് ക്ലയിന്റ്-സൈഡ് ജാവാസ്ക്രിപ്റ്റ് ബണ്ടിൽ കൂടുതൽ കുറയ്ക്കുന്നു.

സെലക്ടീവ് ഹൈഡ്രേഷനും RSCs-ഉം ഒരുമിച്ച് നന്നായി പ്രവർത്തിക്കുന്നു. നിങ്ങളുടെ ആപ്പിന്റെ ഡാറ്റ പ്രദർശിപ്പിക്കുന്നതിനുള്ള ഭാഗങ്ങൾ RSCs ആകാം (ക്ലയിന്റ്-സൈഡ് JS ഇല്ല), അതേസമയം ഇന്ററാക്ടീവ് ഭാഗങ്ങൾ സെലക്ടീവ് ഹൈഡ്രേഷനിൽ നിന്ന് പ്രയോജനം നേടുന്ന ക്ലയിന്റ് കമ്പോണന്റുകളാകാം. ഈ സംയോജനം റിയാക്ട് ഉപയോഗിച്ച് ഉയർന്ന പ്രകടനമുള്ള, ഇന്ററാക്ടീവ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിന്റെ ഭാവിയെ പ്രതിനിധീകരിക്കുന്നു.

ഉപസംഹാരം: കഠിനമായിട്ടല്ല, ബുദ്ധിപരമായി ഹൈഡ്രേറ്റ് ചെയ്യുക

റിയാക്ടിന്റെ സെലക്ടീവ് ഹൈഡ്രേഷൻ ഒരു പ്രകടന ഒപ്റ്റിമൈസേഷൻ എന്നതിലുപരി, കൂടുതൽ ഉപയോക്തൃ-കേന്ദ്രീകൃത ആർക്കിടെക്ചറിലേക്കുള്ള ഒരു അടിസ്ഥാനപരമായ മാറ്റമാണ്. ഭൂതകാലത്തെ "എല്ലാം അല്ലെങ്കിൽ ഒന്നുമില്ല" എന്ന പരിമിതികളിൽ നിന്ന് മോചിതമാകുന്നതിലൂടെ, റിയാക്ട് 18 ഡെവലപ്പർമാർക്ക് വെല്ലുവിളി നിറഞ്ഞ നെറ്റ്‌വർക്ക് സാഹചര്യങ്ങളിൽ പോലും വേഗത്തിൽ ലോഡ് ചെയ്യാനും വേഗത്തിൽ സംവദിക്കാനും കഴിയുന്ന ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ അധികാരം നൽകുന്നു.

പ്രധാന പാഠങ്ങൾ വ്യക്തമാണ്:

ഇത് തടസ്സങ്ങൾ പരിഹരിക്കുന്നു: സെലക്ടീവ് ഹൈഡ്രേഷൻ പരമ്പരാഗത SSR-ന്റെ TTI പ്രശ്നത്തെ നേരിട്ട് അഭിസംബോധന ചെയ്യുന്നു.
ഉപയോക്തൃ ഇടപെടലാണ് പ്രധാനം: ഉപയോക്താവ് എന്തുചെയ്യുന്നു എന്നതിനെ അടിസ്ഥാനമാക്കി ഇത് ബുദ്ധിപരമായി ഹൈഡ്രേഷന് മുൻഗണന നൽകുന്നു, ഇത് ആപ്പുകൾക്ക് തൽക്ഷണ പ്രതികരണശേഷി നൽകുന്നു.
കൺകറൻസിയിലൂടെ സാധ്യമാകുന്നത്: ഇത് റിയാക്ട് 18-ന്റെ കൺകറന്റ് എഞ്ചിൻ, സ്ട്രീമിംഗ് SSR, `` എന്നിവയുമായി ചേർന്ന് പ്രവർത്തിക്കുന്നതിലൂടെ സാധ്യമാകുന്നു.
ഒരു ആഗോള നേട്ടം: ഇത് ലോകമെമ്പാടുമുള്ള ഉപയോക്താക്കൾക്ക്, ഏത് ഉപകരണത്തിലും, ഗണ്യമായി മികച്ചതും കൂടുതൽ തുല്യവുമായ ഒരു അനുഭവം നൽകുന്നു.

ഒരു ആഗോള ഉപയോക്താക്കൾക്കായി നിർമ്മിക്കുന്ന ഡെവലപ്പർമാർ എന്ന നിലയിൽ, എല്ലാവർക്കും ആക്സസ് ചെയ്യാവുന്നതും, പ്രതിരോധശേഷിയുള്ളതും, ആനന്ദകരവുമായ അനുഭവങ്ങൾ സൃഷ്ടിക്കുക എന്നതാണ് ഞങ്ങളുടെ ലക്ഷ്യം. സെലക്ടീവ് ഹൈഡ്രേഷന്റെ ശക്തിയെ സ്വീകരിക്കുന്നതിലൂടെ, നമ്മുടെ ഉപയോക്താക്കളെ കാത്തിരിപ്പിക്കുന്നത് നിർത്തി, മുൻഗണന നൽകുന്ന ഓരോ കമ്പോണന്റിലൂടെയും ആ വാഗ്ദാനം നിറവേറ്റാൻ നമുക്ക് ആരംഭിക്കാം.