Next.js તમને સીધું જ (out of the box) શું પ્રદાન કરે છે

  • Data cache – Next.js 13+ માં દરેક fetch() કોલ એક પ્રતિ-રિકવેસ્ટ (per-request) મેમરી કેશમાં જાય છે. revalidate વિકલ્પ ઉમેરવાથી રનટાઇમને એક નિશ્ચિત અંતરાલ પછી ડેટા રિફ્રેશ કરવા માટે કહેવામાં આવે છે, જે જરૂર પડે ત્યારે જ 'hot API call' ને 'cold' માં ફેરવે છે.
  • Full-route cache – ફ્રેમવર્ક રેન્ડર કરેલા HTML અને આખા રૂટ માટે જરૂરી ડેટાને સાચવી રાખે છે. ફરીથી આવતા મુલાકાતીઓને ત્વરિત ટ્રાન્ઝિશન જોવા મળે છે કારણ કે સર્વર ફરીથી રેન્ડર કરવાનું ટાળે છે.
  • ISR – જૂનું વર્ઝન ટ્રાફિક સર્વ કરવાનું ચાલુ રાખે છે તે દરમિયાન સ્ટેટિક પેજ બેકગ્રાઉન્ડમાં ફરીથી જનરેટ થાય છે. આનાથી તમે દરેક વખતે કન્ટેન્ટ બદલાય ત્યારે આખી સાઇટને ફરીથી બિલ્ડ કર્યા વગર સ્ટેટિક રાખી શકો છો.
  • Server Component cache() – React નું cache હેલ્પર સિંગલ રિકવેસ્ટ દરમિયાન ખર્ચાળ ગણતરીઓ અથવા ડેટાબેઝ કનેક્શનને મેમોઇઝ (memoize) કરે છે, જેનાથી પેજની કમ્પોનન્ટ ટ્રીની અંદર ડુપ્લીકેટ કામ ટાળી શકાય છે.

આ કેશ "first-hit" સમસ્યાનું નિરાકરણ લાવે છે પરંતુ હજુ પણ Node પ્રોસેસની અંદર જ રહે છે. સર્વર અને ડેટાબેઝને સુરક્ષિત રાખવા માટે, કેશિંગને બહારની તરફ ધકેલો (push outward).

તમે ઉમેરી શકો તેવા બાહ્ય લેયર્સ (External layers)

લેયર (Layer) તે શું સ્ટોર કરે છે સામાન્ય સાધન (Typical tool) તે કેવી રીતે મદદ કરે છે
CDN Static assets, HTML, API JSON Cloudflare, Akamai, AWS CloudFront કન્ટેન્ટને એજ લોકેશન પર લઈ જાય છે, જેનાથી યુઝર સુધી પહોંચવાનો સમય (round-trip) ઘટે છે
Reverse proxy Node સુધી પહોંચતા પહેલા આખા પેજના પ્રતિસાદો Nginx, Varnish સીધા કેશ કરેલા પેજ સર્વ કરે છે, જેનાથી Next.js ઇન્સ્ટન્સ પરનો લોડ ઘટે છે
Application-level cache ખર્ચાળ DB ક્વેરીઝ અથવા API કોલ્સના પરિણામો Redis, Memcached ઝડપી key-value સ્ટોર પૂરું પાડે છે જે સર્વર રીસ્ટાર્ટ થયા પછી પણ જળવાઈ રહે છે અને મલ્ટીપલ એપ ઇન્સ્ટન્સ વચ્ચે શેર કરી શકાય છે

દરેક લેયર ઓરિજિન ડેટાબેઝથી વધુ દૂર હોય છે, તેથી એક લેવલ પર 'miss' થવાથી તે આગલા લેવલ પર જાય છે, અને અંતે જ્યારે ખૂબ જ જરૂરી હોય ત્યારે જ ડેટાબેઝ સુધી પહોંચે છે.

કેશને ફ્રેશ (fresh) રાખવી

ઇનવેલિડેશન (Invalidation) મોટાભાગની ટીમોને મૂંઝવણમાં મૂકે છે. ત્રણ વ્યવહારુ પેટર્ન સારી રીતે કામ કરે છે:

  • Time-based (TTL) – કેશ એન્ટ્રીને નિશ્ચિત એક્સપાયરી આપો. કન્ફિગર કરવામાં સરળ છે પરંતુ ટાઈમર સમાપ્ત ન થાય ત્યાં સુધી તે જૂનો ડેટા સર્વ કરી શકે છે.
  • Event-driven – તમારા CMS અથવા કોઈપણ ડેટા સોર્સ સાથે જોડાઓ જે કન્ટેન્ટ બદલાય ત્યારે વેબહૂક (webhook) મોકલે છે. વેબહૂક સંબંધિત કેશ એન્ટ્રીને પ્યોરજ (purge) કરવા માટે ટ્રિગર કરે છે.
  • Tag-based – ફેચના જૂથ સાથે લોજિકલ ટેગ જોડો (દા.ત., product-list). જ્યારે તે જૂથમાં કોઈપણ આઇટમ બદલાય, ત્યારે revalidateTag('product-list') નો એક સિંગલ કોલ તે ટેગ ધરાવતી દરેક એન્ટ્રીને ક્લિયર કરી દે છે.

આ અભિગમોનું મિશ્રણ તમને ફ્રેશનેસ અને કેશ-હિટ રેટ વચ્ચે સંતુલન જાળવવામાં મદદ કરે છે.

મોટાભાગની ટીમો માટે કામ કરતી હાયરાર્કી (Hierarchy)

  1. Browser cache – સ્ટેટિક એસેટ્સ (CSS, JS, images) ને લાંબો max-age મળે છે જેથી યુઝરનું ડિવાઇસ નેટવર્કને ફરી ક્યારેય પૂછતું નથી.
  2. CDN – એજ નોડ્સ સંપૂર્ણ HTML પેજ અને API JSON ને કેશ કરે છે, જે તમે Next.js માં સેટ કરેલા Cache-Control હેડર્સનું પાલન કરે છે.
  3. Reverse proxy – Nginx અથવા Varnish ઇન્સ્ટન્સ Next.js સર્વરની આગળ હોય છે, જે ભાગ્યે જ બદલાતા રૂટ્સ માટે કેશ કરેલા પ્રતિસાદો (responses) સર્વ કરે છે.
  4. Next.js internal cache – ફ્રેમવર્કના ડેટા અને રૂટ કેશ પ્રતિ-રિકવેસ્ટ મેમોઇઝેશન અને ISR હેન્ડલ કરે છે.
  5. Application cache – Redis ભારે ડેટાબેઝ ક્વેરીઝના પરિણામોને ક્વેરી પેરામીટર્સ અથવા ટેગ્સ દ્વારા સ્ટોર કરે છે.
  6. Database – સત્યનો અંતિમ સ્ત્રોત, જે દરેક ઉચ્ચ સ્તરે કેશ મિસ (cache miss) થવા પર જ ક્વેરી કરવામાં આવે છે.

જ્યારે રિકવેસ્ટ આવે છે, ત્યારે તે આ યાદીમાં નીચે તરફ જાય છે જ્યાં સુધી કોઈ લેયર તેનો જવાબ ન આપે. સૌથી ઝડપી જવાબ જીતે છે, અને પ્રતિસાદ ભવિષ્યના ઉપયોગ માટે ચેઇનમાં ઉપર તરફ લખાય છે.

બધું એકસાથે જોડવું

  1. તમારા API રૂટ્સમાં Cache-Control હેડર્સ સેટ કરો
  2. તમારા CDN ને કન્ફિગર કરો – HTML અને JSON એન્ડપોઇન્ટ્સ માટે એજ કેશિંગ સક્ષમ કરો, અને ખાતરી કરો કે CDN Cache-Control નું પાલન કરે છે.
  3. રિવર્સ પ્રોક્સી ડિપ્લોય કરો – તમારા Next.js સર્વરની આગળ Nginx મૂકો.
  4. Redis ઉમેરો – ખર્ચાળ ડેટાબેઝ ક્વેરીઝના પરિણામોને કેશ કરો.
  5. તમારા કમ્પોનન્ટ્સમાં revalidateTag નો ઉપયોગ કરો – ચોક્કસ ટેગ માટે Next.js ઇન્ટરનલ કેશ ક્લિયર કરવા માટે revalidateTag ને કોલ કરો.

મુખ્ય વાત (Takeaway)

Next.js ની અંદરનો એક સિંગલ કેશ પ્રથમ રિકવેસ્ટને ઝડપી બનાવે છે, પરંતુ સાચી સ્કેલેબિલિટી એક શિસ્તબદ્ધ સ્ટેકમાંથી આવે છે: browser → CDN → reverse proxy → framework → Redis → database. દરેક લેયરને કન્ફિગર કરો, સમય, ઇવેન્ટ્સ અને ટેગ્સ સાથે ઇનવેલિડેશન હેન્ડલ કરો, અને તમારા મેટ્રિક્સ પર નજર રાખો. લેટન્સી (Latency) ઓછી રહેશે જ્યારે તમારું બેકએન્ડ ટ્રાફિક સ્પાઇક્સને સહન કરશે.