રિએક્ટ સિલેક્ટિવ હાઇડ્રેશન: પ્રાધાન્યતા-આધારિત કમ્પોનન્ટ લોડિંગમાં એક ઊંડાણપૂર્વકનો અભ્યાસ

શ્રેષ્ઠ વેબ પર્ફોર્મન્સની સતત શોધમાં, ફ્રન્ટએન્ડ ડેવલપર્સ હંમેશા એક જટિલ સમાધાનમાંથી પસાર થાય છે. આપણે સમૃદ્ધ, ઇન્ટરેક્ટિવ એપ્લિકેશન્સ જોઈએ છે, પરંતુ તે તરત જ લોડ થાય અને વિલંબ વિના પ્રતિસાદ આપે તે પણ જરૂરી છે, ભલે યુઝરનું ડિવાઇસ કે નેટવર્ક સ્પીડ ગમે તે હોય. વર્ષોથી, સર્વર-સાઇડ રેન્ડરિંગ (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 />  <!-- 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 શેલ મોકલે છે, જેમાં પ્રોડક્ટ ગ્રીડનો સમાવેશ થાય છે. સાઇડબાર અને ચેટ વિજેટ `` માં લપેટાયેલા છે અને તેમના ફોલબેક UIs (સ્કેલેટન્સ/લોડર્સ) મોકલવામાં આવે છે.
પ્રારંભિક રેન્ડર: બ્રાઉઝર પ્રોડક્ટ ગ્રીડને રેન્ડર કરે છે. યુઝર લગભગ તરત જ ઉત્પાદનો જોઈ શકે છે. TTI હજી પણ ઊંચું છે કારણ કે હજી સુધી કોઈ જાવાસ્ક્રિપ્ટ જોડાયેલ નથી.
કોડ લોડિંગ: જાવાસ્ક્રિપ્ટ બંડલ્સ ડાઉનલોડ થવાનું શરૂ કરે છે. ધારો કે સાઇડબાર અને ચેટ વિજેટ માટેનો કોડ અલગ, કોડ-સ્પ્લિટ ટુકડાઓમાં છે.
યુઝરની ક્રિયાપ્રતિક્રિયા: કંઈપણ હાઇડ્રેટ થવાનું સમાપ્ત થાય તે પહેલાં, યુઝરને તેમને ગમતું ઉત્પાદન દેખાય છે અને પ્રોડક્ટ ગ્રીડની અંદર "Add to Cart" બટન પર ક્લિક કરે છે.
પ્રાથમિકતાનો જાદુ: રિએક્ટ ક્લિકને કેપ્ચર કરે છે. તે જુએ છે કે ક્લિક `ProductGrid` કમ્પોનન્ટની અંદર થયું છે. તે તરત જ પેજના અન્ય ભાગોના હાઇડ્રેશનને રદ કરે છે અથવા અટકાવે છે (જે તેણે કદાચ હમણાં જ શરૂ કર્યું હશે) અને ફક્ત `ProductGrid` ને હાઇડ્રેટ કરવા પર ધ્યાન કેન્દ્રિત કરે છે.
ઝડપી ઇન્ટરેક્ટિવિટી: `ProductGrid` કમ્પોનન્ટ ખૂબ જ ઝડપથી હાઇડ્રેટ થાય છે કારણ કે તેનો કોડ સંભવતઃ મુખ્ય બંડલમાં છે. `onClick` હેન્ડલર જોડાઈ જાય છે, અને કેપ્ચર કરેલી ક્લિક ઇવેન્ટને રિપ્લે કરવામાં આવે છે. આઇટમ કાર્ટમાં ઉમેરવામાં આવે છે. યુઝરને તાત્કાલિક પ્રતિસાદ મળે છે.
હાઇડ્રેશન ફરી શરૂ કરવું: હવે જ્યારે ઉચ્ચ-પ્રાથમિકતાવાળી ક્રિયાપ્રતિક્રિયા સંભાળી લેવામાં આવી છે, ત્યારે રિએક્ટ તેનું કામ ફરી શરૂ કરે છે. તે સાઇડબારને હાઇડ્રેટ કરવા માટે આગળ વધે છે. છેવટે, જ્યારે ચેટ વિજેટ માટેનો કોડ આવે છે, ત્યારે તે તે કમ્પોનન્ટને છેલ્લે હાઇડ્રેટ કરે છે.

પરિણામ? પેજના સૌથી નિર્ણાયક ભાગ માટે TTI લગભગ ત્વરિત હતું, જે યુઝરના પોતાના ઇરાદાથી ચાલતું હતું. એકંદરે પેજ TTI હવે એક જ, ડરામણો નંબર નથી, પરંતુ એક પ્રગતિશીલ અને યુઝર-કેન્દ્રિત પ્રક્રિયા છે.

વૈશ્વિક પ્રેક્ષકો માટે મૂર્ત લાભો

સિલેક્ટિવ હાઇડ્રેશનની અસર ગહન છે, ખાસ કરીને વિવિધ નેટવર્ક પરિસ્થિતિઓ અને ઉપકરણ ક્ષમતાઓ સાથે વૈશ્વિક, વૈવિધ્યસભર પ્રેક્ષકોને સેવા આપતી એપ્લિકેશન્સ માટે.

અનુભવાયેલ પર્ફોર્મન્સમાં નાટકીય સુધારો

સૌથી મોટો ફાયદો યુઝર-અનુભવાયેલ પર્ફોર્મન્સમાં મોટો સુધારો છે. પેજના જે ભાગો સાથે યુઝર ક્રિયાપ્રતિક્રિયા કરે છે તેને પ્રથમ ઉપલબ્ધ કરાવીને, એપ્લિકેશન *ઝડપી* લાગે છે. આ યુઝરને જાળવી રાખવા માટે નિર્ણાયક છે. વિકાસશીલ દેશમાં ધીમા 3G નેટવર્ક પરના યુઝર માટે, આખા પેજને ઇન્ટરેક્ટિવ બનવા માટે 15 સેકન્ડ રાહ જોવી અને 3 સેકન્ડમાં મુખ્ય સામગ્રી સાથે ક્રિયાપ્રતિક્રિયા કરી શકવા વચ્ચેનો તફાવત જબરદસ્ત છે.

બહેતર કોર વેબ વાઇટલ્સ

સિલેક્ટિવ હાઇડ્રેશન સીધા Google ના કોર વેબ વાઇટલ્સને અસર કરે છે:

ઇન્ટરેક્શન ટુ નેક્સ્ટ પેઇન્ટ (INP): આ નવું મેટ્રિક પ્રતિભાવશીલતાને માપે છે. યુઝર ઇનપુટના આધારે હાઇડ્રેશનને પ્રાથમિકતા આપીને, સિલેક્ટિવ હાઇડ્રેશન ખાતરી કરે છે કે ક્રિયાપ્રતિક્રિયાઓ ઝડપથી સંભાળવામાં આવે છે, જે ખૂબ નીચા INP તરફ દોરી જાય છે.
ટાઇમ ટુ ઇન્ટરેક્ટિવ (TTI): જ્યારે *આખા* પેજ માટે TTI હજુ પણ સમય લઈ શકે છે, નિર્ણાયક યુઝર પાથવેઝ માટે TTI માં નાટકીય રીતે ઘટાડો થાય છે.
ફર્સ્ટ ઇનપુટ ડિલે (FID): INP ની જેમ, FID પ્રથમ ક્રિયાપ્રતિક્રિયા પર પ્રક્રિયા થાય તે પહેલાંના વિલંબને માપે છે. સિલેક્ટિવ હાઇડ્રેશન આ વિલંબને ઘટાડે છે.

ભારે કમ્પોનન્ટ્સમાંથી સામગ્રીને અલગ કરવી

આધુનિક વેબ એપ્સ ઘણીવાર એનાલિટિક્સ, A/B ટેસ્ટિંગ, કસ્ટમર સપોર્ટ ચેટ્સ અથવા જાહેરાત માટે ભારે તૃતીય-પક્ષ સ્ક્રિપ્ટોથી ભરેલી હોય છે. ઐતિહાસિક રીતે, આ સ્ક્રિપ્ટો સમગ્ર એપ્લિકેશનને ઇન્ટરેક્ટિવ બનતા અટકાવી શકતી હતી. સિલેક્ટિવ હાઇડ્રેશન અને `` સાથે, આ બિન-નિર્ણાયક કમ્પોનન્ટ્સને સંપૂર્ણપણે અલગ કરી શકાય છે. મુખ્ય એપ્લિકેશન સામગ્રી લોડ થઈ શકે છે અને ઇન્ટરેક્ટિવ બની શકે છે જ્યારે આ ભારે સ્ક્રિપ્ટો પૃષ્ઠભૂમિમાં લોડ અને હાઇડ્રેટ થાય છે, મુખ્ય યુઝર અનુભવને અસર કર્યા વિના.

વધુ સ્થિતિસ્થાપક એપ્લિકેશન્સ

કારણ કે હાઇડ્રેશન ટુકડાઓમાં થઈ શકે છે, એક બિન-આવશ્યક કમ્પોનન્ટ (જેમ કે સોશિયલ મીડિયા વિજેટ) માં ભૂલ જરૂરી નથી કે આખા પેજને તોડી નાખે. રિએક્ટ સંભવિત રીતે તે `` બાઉન્ડ્રીની અંદર ભૂલને અલગ કરી શકે છે જ્યારે બાકીની એપ્લિકેશન ઇન્ટરેક્ટિવ રહે છે.

વ્યવહારુ અમલીકરણ અને શ્રેષ્ઠ પ્રયાસો

સિલેક્ટિવ હાઇડ્રેશન અપનાવવું એ જટિલ નવો કોડ લખવા કરતાં તમારી એપ્લિકેશનને યોગ્ય રીતે ગોઠવવા વિશે વધુ છે. નેક્સ્ટ.જેએસ (તેના એપ રાઉટર સાથે) અને રીમિક્સ જેવા આધુનિક ફ્રેમવર્ક તમારા માટે મોટાભાગના સર્વર સેટઅપને સંભાળે છે, પરંતુ મુખ્ય સિદ્ધાંતોને સમજવું એ ચાવીરૂપ છે.

`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}> <!-- No visual loader needed for a hidden widget -->
        <ChatWidget />
      </Suspense>
    </div>
  );
}

આ સેટઅપમાં, `CommentsSection` અને `ChatWidget` માટેનો જાવાસ્ક્રિપ્ટ કોડ અલગ ફાઇલોમાં હશે. બ્રાઉઝર તેમને ફક્ત ત્યારે જ મેળવશે જ્યારે રિએક્ટ તેમને રેન્ડર કરવાનું નક્કી કરશે, અને તેઓ મુખ્ય `ArticleContent` ને બ્લોક કર્યા વિના સ્વતંત્ર રીતે હાઇડ્રેટ થશે.

`renderToPipeableStream` સાથે સર્વર-સાઇડ સેટઅપ

જેઓ કસ્ટમ SSR સોલ્યુશન બનાવી રહ્યા છે, તેમના માટે સર્વર-સાઇડ API `renderToPipeableStream` છે. આ API ખાસ કરીને સ્ટ્રીમિંગ માટે રચાયેલ છે અને `` સાથે એકીકૃત રીતે સંકલિત થાય છે. તે તમને HTML ક્યારે મોકલવું અને ભૂલોને કેવી રીતે હેન્ડલ કરવી તેના પર ઝીણવટભર્યું નિયંત્રણ આપે છે. જોકે, મોટાભાગના ડેવલપર્સ માટે, નેક્સ્ટ.જેએસ જેવું મેટા-ફ્રેમવર્ક ભલામણ કરેલ પાથ છે કારણ કે તે આ જટિલતાને દૂર કરે છે.

ભવિષ્ય: રિએક્ટ સર્વર કમ્પોનન્ટ્સ

સિલેક્ટિવ હાઇડ્રેશન એ એક સ્મારક પગલું છે, પરંતુ તે એક મોટી વાર્તાનો ભાગ છે. આગામી ઉત્ક્રાંતિ રિએક્ટ સર્વર કમ્પોનન્ટ્સ (RSCs) છે. RSCs એવા કમ્પોનન્ટ્સ છે જે ફક્ત સર્વર પર ચાલે છે અને તેમનો જાવાસ્ક્રિપ્ટ ક્યારેય ક્લાયંટને મોકલતા નથી. આનો અર્થ એ છે કે તેમને બિલકુલ હાઇડ્રેટ કરવાની જરૂર નથી, જે ક્લાયંટ-સાઇડ જાવાસ્ક્રિપ્ટ બંડલને વધુ ઘટાડે છે.

સિલેક્ટિવ હાઇડ્રેશન અને RSCs એકસાથે સંપૂર્ણ રીતે કામ કરે છે. તમારી એપ્લિકેશનના જે ભાગો ફક્ત ડેટા પ્રદર્શિત કરવા માટે છે તે RSCs (શૂન્ય ક્લાયંટ-સાઇડ JS) હોઈ શકે છે, જ્યારે ઇન્ટરેક્ટિવ ભાગો ક્લાયંટ કમ્પોનન્ટ્સ હોઈ શકે છે જે સિલેક્ટિવ હાઇડ્રેશનથી લાભ મેળવે છે. આ સંયોજન રિએક્ટ સાથે અત્યંત કાર્યક્ષમ, ઇન્ટરેક્ટિવ એપ્લિકેશન્સ બનાવવાના ભવિષ્યનું પ્રતિનિધિત્વ કરે છે.

નિષ્કર્ષ: વધુ સ્માર્ટ રીતે હાઇડ્રેટ કરવું, વધુ મહેનતથી નહીં

રિએક્ટનું સિલેક્ટિવ હાઇડ્રેશન માત્ર એક પર્ફોર્મન્સ ઓપ્ટિમાઇઝેશન કરતાં વધુ છે; તે વધુ યુઝર-કેન્દ્રિત આર્કિટેક્ચર તરફ એક મૂળભૂત પરિવર્તન છે. ભૂતકાળની "બધું-અથવા-કંઈ નહીં" ની મર્યાદાઓથી મુક્ત થઈને, રિએક્ટ 18 ડેવલપર્સને એવી એપ્લિકેશન્સ બનાવવાની શક્તિ આપે છે જે ફક્ત લોડ કરવામાં જ ઝડપી નથી, પરંતુ પડકારજનક નેટવર્ક પરિસ્થિતિઓમાં પણ ક્રિયાપ્રતિક્રિયા કરવામાં ઝડપી છે.

મુખ્ય તારણો સ્પષ્ટ છે:

તે બોટલનેકને ઉકેલે છે: સિલેક્ટિવ હાઇડ્રેશન સીધા પરંપરાગત SSR ની TTI સમસ્યાને સંબોધે છે.
યુઝરની ક્રિયાપ્રતિક્રિયા જ સર્વોપરી છે: તે યુઝર શું કરી રહ્યો છે તેના આધારે બુદ્ધિપૂર્વક હાઇડ્રેશનને પ્રાથમિકતા આપે છે, જે એપ્સને તરત જ પ્રતિભાવશીલ બનાવે છે.
કોન્કરન્સી દ્વારા સક્ષમ: તે રિએક્ટ 18ના કોન્કરન્ટ એન્જિન દ્વારા શક્ય બન્યું છે, જે સ્ટ્રીમિંગ SSR અને `` સાથે કામ કરે છે.
એક વૈશ્વિક લાભ: તે વિશ્વભરના યુઝર્સ માટે, કોઈપણ ઉપકરણ પર, નોંધપાત્ર રીતે બહેતર અને વધુ સમાન અનુભવ પ્રદાન કરે છે.

વૈશ્વિક પ્રેક્ષકો માટે નિર્માણ કરતા ડેવલપર્સ તરીકે, અમારો ધ્યેય એવા અનુભવો બનાવવાનો છે જે દરેક માટે સુલભ, સ્થિતિસ્થાપક અને આનંદદાયક હોય. સિલેક્ટિવ હાઇડ્રેશનની શક્તિને અપનાવીને, આપણે આપણા યુઝર્સને રાહ જોવડાવવાનું બંધ કરી શકીએ છીએ અને તે વચન પૂરું કરવાનું શરૂ કરી શકીએ છીએ, એક સમયે એક પ્રાથમિકતાવાળા કમ્પોનન્ટ સાથે.