Next.js 14 ના Server Components બંડલ સાઈઝમાં અંદાજે 60% નો ઘટાડો કરે છે અને સામાન્ય બ્લોગ પેજ પર first-paint સમયને 200 ms થી નીચે લાવે છે, જેનો અર્થ છે કે વપરાશકર્તાઓ સામગ્રી ઝડપથી જોઈ શકે છે અને સર્ચ એન્જિનને સંપૂર્ણ રીતે રેન્ડર થયેલ HTML મળે છે.

આ નવું રિલીઝ Next.js સાથે બનેલી React એપ્સ માટે ડિફોલ્ટ એક્ઝિક્યુશન મોડલને બદલી નાખે છે. અગાઉ જ્યાં દરેક કમ્પોનન્ટ બ્રાઉઝર પર મોકલવામાં આવતા હતા, ત્યાં હવે ડેવલપર્સ UI ના ભાગોને “Server Components” તરીકે માર્ક કરી શકે છે જેથી તેઓ ફક્ત બેકએન્ડ પર જ ચાલે. આ કમ્પોનન્ટ્સનો કોડ ક્યારેય ક્લાયન્ટ સુધી પહોંચતો નથી, જેનાથી બ્રાઉઝર પાસે ફક્ત એટલો જ ભાગ રહે છે જેને ઇન્ટરેક્ટિવિટીની જરૂર હોય છે.

આ ફેરફાર શા માટે મહત્વનો છે

React ડેવલપર્સ લાંબા સમયથી ત્રણ પરસ્પર જોડાયેલી સમસ્યાઓ સાથે ઝઝૂમી રહ્યા છે: નેટવર્ક રિક્વેસ્ટનો આકરો મારો, ફૂલેલા JavaScript બંડલ્સ અને ધીમી પેજ લોડિંગ પ્રક્રિયા. આ સમસ્યાઓ SEO ને પણ નુકસાન પહોંચાડે છે કારણ કે ક્રોલર્સને મોકલવામાં આવતું પ્રારંભિક HTML ઘણીવાર ખાલી હોય છે, જેના કારણે સર્ચ બોટ્સને ક્લાયન્ટ-સાઇડ હાઇડ્રેશન (client-side hydration) માટે રાહ જોવી પડે છે. Next.js 14 ડેટા-હેવી કામને સંપૂર્ણપણે ક્લાયન્ટથી દૂર કરીને આ મૂળ કારણને ઉકેલે છે.

Server Components જૂના મોડલથી કેવી રીતે અલગ છે

  • Server Components – સર્વર પર એક્ઝિક્યુટ થાય છે, ડેટા ફેચ કરે છે, ડેટાબેઝ સાથે વાતચીત કરે છે અને સાદું HTML આઉટપુટ આપે છે. તેમનો JavaScript ક્યારેય નેટવર્ક પરથી પસાર થતો નથી.
  • Client Components – બ્રાઉઝરમાં રહે છે અને બટન ક્લિક, ફોર્મ સબમિશન અથવા React state અથવા effects નો ઉપયોગ કરતા કોઈપણ કમ્પોનન્ટ જેવા UI ઇન્ટરેક્શન હેન્ડલ કરે છે.

આ ફ્રેમવર્ક એક સરળ ડાયરેક્ટિવ દ્વારા આ વિભાજન લાગુ કરે છે. ફાઇલના ઉપરના ભાગમાં use client ઉમેરવાથી Next.js ને તે કમ્પોનન્ટને ફક્ત ક્લાયન્ટ-સાઇડ તરીકે ગણવા માટે કહેવામાં આવે છે. તે માર્કર વગરની કોઈપણ વસ્તુ ડિફોલ્ટ તરીકે Server Component ગણાય છે.

વાસ્તવિક દુનિયાના આંકડા

વ્યક્તિગત બ્લોગ પેજ પરના એક ઝડપી પ્રયોગથી તેની અસર સ્પષ્ટ થાય છે. fetch ને Server Component માં ખસેડ્યા પછી અને સર્વરને લિસ્ટને સ્ટેટિક HTML તરીકે રેન્ડર કરવા દેતા, JavaScript બંડલ 60% ઘટ્યું અને પેજ 200 ms થી ઓછા સમયમાં રેન્ડર થયું.

એક વ્યવહારુ લેયરિંગ પેટર્ન

  1. Bottom layer (Server) – APIs અથવા ડેટાબેઝમાંથી ડેટા મેળવો. કોઈપણ પ્રાઇવેટ લોજિક અહીં રાખો; તે ક્યારેય સર્વર છોડતું નથી.
  2. Middle layer (Server) – કાચા ડેટાને શુદ્ધ HTML માર્કઅપમાં રૂપાંતરિત કરો. આ લેયર હજુ પણ React ના JSX સિન્ટેક્સનો ઉપયોગ કરી શકે છે પરંતુ તે ફક્ત સર્વર-ઓન્લી રહેશે.
  3. Top layer (Client) – ઇન્ટરેક્ટિવિટી માટે નાના, અલગ વિજેટ્સ ઉમેરો. સામાન્ય ઉદાહરણોમાં “like” બટન, કોમેન્ટ ફોર્મ અથવા ડ્રોપડાઉન મેનૂ જેમને સ્ટેટની જરૂર હોય છે તે શામેલ છે.

આ પદાનુક્રમ (hierarchy) અનુસરવાથી એપ્લિકેશનનો મોટો ભાગ હળવો રહે છે અને વપરાશકર્તાઓ જે ગતિશીલ અનુભવની અપેક્ષા રાખે છે તે જળવાઈ રહે છે.

તમે આજે કરી શકો તેવા પગલાં

  1. તમારા કોડબેઝમાં એવા કમ્પોનન્ટ્સ શોધો જે ફક્ત ડેટા ફેચ કરવા માટે useEffect નો ઉપયોગ કરે છે.
  2. fetch કોલને નવા Server Component માં અલગ કરો અને તેને રેન્ડર કરેલ માર્કઅપ રિટર્ન કરવા દો.
  3. બાકી રહેલા કોઈપણ ઇન્ટરેક્ટિવ એલિમેન્ટ્સ માટે ન્યૂનતમ ક્લાયન્ટ કમ્પોનન્ટ બનાવો (ઉપર use client ઉમેરો).
  4. તમારું બંડલ એનાલાઇઝર ફરીથી ચલાવો; તમારે સાઈઝમાં નોંધપાત્ર ઘટાડો જોવા મળશે.

બધે જ use client નો ઉપયોગ કરવાનું ટાળો. જો કોઈ કમ્પોનન્ટ React state, context અથવા lifecycle hooks પર આધારિત ન હોય, તો તેને Server Component તરીકે જ રહેવા દો. તમે ક્લાયન્ટથી જેટલો વધુ કોડ દૂર રાખશો, ડાઉનલોડ એટલું નાનું હશે અને પેજ એટલું ઝડપી હશે.

મુખ્ય વાત: ડેટા ફેચિંગ અને ભારે રેન્ડરિંગને સર્વર પર ખસેડીને, Next.js 14 તમને ઘણું ઓછું JavaScript મોકલવા દે છે, તરત જ સંપૂર્ણ રીતે રેન્ડર થયેલ HTML પહોંચાડે છે અને જ્યાં ખરેખર જરૂર હોય ત્યાં ઇન્ટરેક્ટિવિટી જાળવી રાખે છે. પરિણામ એ ઝડપી, વધુ કાર્યક્ષમ વેબ અનુભવ છે જે વપરાશકર્તાઓ અને સર્ચ એન્જિન બંનેને ફાયદો પહોંચાડે છે.