Next.js ನಿಮಗೆ ತಾನಾಗಿಯೇ (out of the box) ನೀಡುವವುಗಳು

  • Data cache – Next.js 13+ ನಲ್ಲಿ ಪ್ರತಿಯೊಂದು fetch() ಕರೆಯು ಪ್ರತಿ-ಕೋರಿಕೆ (per-request) ಮೆಮೊರಿ ಕ್ಯಾಶ್‌ನಲ್ಲಿ ಸಂಗ್ರಹವಾಗುತ್ತದೆ. revalidate ಆಯ್ಕೆಯನ್ನು ಸೇರಿಸುವುದರಿಂದ, ನಿರ್ದಿಷ್ಟ ಅವಧಿಯ ನಂತರ ಡೇಟಾವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಲು ರನ್‌ಟೈಮ್‌ಗೆ ಸೂಚಿಸಬಹುದು, ಇದರಿಂದ ಅಗತ್ಯವಿದ್ದಾಗ ಮಾತ್ರ API ಕರೆಯನ್ನು ಹೊಸದಾಗಿ ಮಾಡಲಾಗುತ್ತದೆ.
  • Full-route cache – ಈ ಫ್ರೇಮ್‌ವರ್ಕ್ ರೆಂಡರ್ ಮಾಡಿದ HTML ಮತ್ತು ಇಡೀ ರೂಟ್ (route) ಗೆ ಅಗತ್ಯವಿರುವ ಡೇಟಾವನ್ನು ಉಳಿಸಿಕೊಳ್ಳುತ್ತದೆ. ಸರ್ವರ್ ಮತ್ತೆ ರೆಂಡರ್ ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸುವುದರಿಂದ, ಮರಳಿ ಬರುವ ಸಂದರ್ಶಕರಿಗೆ ತಕ್ಷಣವೇ ಪುಟವು ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ.
  • ISR – ಹಳೆಯ ಆವೃತ್ತಿಯು ಟ್ರಾಫಿಕ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತಿರುವಾಗಲೇ ಹಿನ್ನೆಲೆಯಲ್ಲಿ (background) ಸ್ಟ್ಯಾಟಿಕ್ ಪುಟಗಳು ಮರುಜನ್ಮ ಪಡೆಯುತ್ತವೆ (regenerate). ಇದು ಪ್ರತಿ ಬಾರಿ ಕಂಟೆಂಟ್ ಬದಲಾದಾಗಲೂ ಇಡೀ ಸೈಟ್ ಅನ್ನು ಮರುನಿರ್ಮಿಸುವ (rebuild) ಅಗತ್ಯವಿಲ್ಲದೆ, ದೊಡ್ಡ ಸೈಟ್ ಅನ್ನು ಸ್ಟ್ಯಾಟಿಕ್ ಆಗಿಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
  • Server Component cache() – React ನ cache ಹೆಲ್ಪರ್ ಒಂದು ನಿರ್ದಿಷ್ಟ ಕೋರಿಕೆಯ ಅವಧಿಯವರೆಗೆ ದುಬಾರಿ ಲೆಕ್ಕಾಚಾರಗಳು ಅಥವಾ ಡೇಟಾಬೇಸ್ ಕನೆಕ್ಷನ್‌ಗಳನ್ನು ಮೆಮೊರೈಸ್ (memoize) ಮಾಡುತ್ತದೆ, ಇದರಿಂದ ಪೇಜ್‌ನ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀನಲ್ಲಿ ಒಂದೇ ಕೆಲಸವನ್ನು ಪದೇ ಪದೇ ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸಬಹುದು.

ಈ ಕ್ಯಾಶ್‌ಗಳು "first-hit" ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸುತ್ತವೆ, ಆದರೆ ಇವು ಇನ್ನೂ Node ಪ್ರಕ್ರಿಯೆಯ ಒಳಗೇ ಇರುತ್ತವೆ. ಸರ್ವರ್ ಮತ್ತು ಡೇಟಾಬೇಸ್ ಅನ್ನು ರಕ್ಷಿಸಲು, ಕ್ಯಾಶಿಂಗ್ ಅನ್ನು ಹೊರಕ್ಕೆ (outward) ತಳ್ಳಬೇಕು.

ನೀವು ಸೇರಿಸಬಹುದಾದ ಬಾಹ್ಯ ಪದರಗಳು (External layers)

ಪದರ (Layer) ಇದು ಏನನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ ಸಾಮಾನ್ಯ ಸಾಧನ ಇದು ಹೇಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ
CDN ಸ್ಟ್ಯಾಟಿಕ್ ಅಸೆಟ್ಸ್, HTML, API JSON Cloudflare, Akamai, AWS CloudFront ಕಂಟೆಂಟ್ ಅನ್ನು ಎಡ್ಜ್ ಲೊಕೇಶನ್‌ಗಳಿಗೆ ವರ್ಗಾಯಿಸುತ್ತದೆ, ಇದರಿಂದ ಬಳಕೆದಾರರಿಗೆ ತಲುಪುವ ಸಮಯ ಕಡಿಮೆಯಾಗುತ್ತದೆ
Reverse proxy Node ತಲುಪುವ ಮೊದಲು ಇಡೀ ಪೇಜ್ ರೆಸ್ಪಾನ್ಸ್‌ಗಳು Nginx, Varnish ಕ್ಯಾಶ್ ಮಾಡಿದ ಪುಟಗಳನ್ನು ನೇರವಾಗಿ ನೀಡುತ್ತದೆ, ಇದರಿಂದ Next.js ಇನ್‌ಸ್ಟೆನ್ಸ್ ಮೇಲಿನ ಹೊರೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ
Application-level cache ದುಬಾರಿ DB ಕ್ವೇರಿಗಳು ಅಥವಾ API ಕರೆಗಳ ಫಲಿತಾಂಶಗಳು Redis, Memcached ಸರ್ವರ್ ರೀಸ್ಟಾರ್ಟ್ ಆದರೂ ಉಳಿಯುವ ಮತ್ತು ಅನೇಕ ಆ್ಯಪ್ ಇನ್‌ಸ್ಟೆನ್ಸ್‌ಗಳ ನಡುವೆ ಹಂಚಿಕೊಳ್ಳಬಹುದಾದ ವೇಗದ key-value ಸ್ಟೋರ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ

ಪ್ರತಿ ಪದರವು ಮೂಲ ಡೇಟಾಬೇಸ್‌ನಿಂದ ದೂರವಿರುತ್ತದೆ, ಆದ್ದರಿಂದ ಒಂದು ಹಂತದಲ್ಲಿ ಕ್ಯಾಶ್ ಸಿಗದಿದ್ದಲ್ಲಿ (miss), ಅದು ಮುಂದಿನ ಹಂತಕ್ಕೆ ಹರಿಯುತ್ತದೆ, ಮತ್ತು ಅಂತಿಮವಾಗಿ ಅತ್ಯಗತ್ಯವಿದ್ದಾಗ ಮಾತ್ರ ಡೇಟಾಬೇಸ್‌ಗೆ ತಲುಪುತ್ತದೆ.

ಕ್ಯಾಶ್‌ಗಳನ್ನು ತಾಜಾವಾಗಿ (fresh) ಇರಿಸುವುದು

Invalidation (ಅಮಾನ್ಯೀಕರಣ) ಪ್ರಕ್ರಿಯೆಯು ಹೆಚ್ಚಿನ ತಂಡಗಳಿಗೆ ಸವಾಲಾಗಿರುತ್ತದೆ. ಈ ಮೂರು ಪ್ರಾಯೋಗಿಕ ಮಾದರಿಗಳು ಚೆನ್ನಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ:

  • Time-based (TTL) – ಕ್ಯಾಶ್ ಎಂಟ್ರಿಗೆ ಒಂದು ನಿರ್ದಿಷ್ಟ ಅವಧಿಯ ಮಿತಿ (expiration) ನೀಡಿ. ಇದನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡುವುದು ಸುಲಭ, ಆದರೆ ಟೈಮರ್ ಮುಗಿಯುವವರೆಗೆ ಇದು ಹಳೆಯ ಡೇಟಾವನ್ನು ನೀಡಬಹುದು.
  • Event-driven – ಕಂಟೆಂಟ್ ಬದಲಾದಾಗ ವೆಬ್‌ಹುಕ್ (webhook) ಕಳುಹಿಸುವ ನಿಮ್ಮ CMS ಅಥವಾ ಯಾವುದೇ ಡೇಟಾ ಮೂಲದೊಂದಿಗೆ ಇದನ್ನು ಜೋಡಿಸಿ. ವೆಬ್‌ಹುಕ್ ಸಂಬಂಧಿತ ಕ್ಯಾಶ್ ಎಂಟ್ರಿಯನ್ನು ಅಳಿಸಲು (purge) ಪ್ರಚೋದಿಸುತ್ತದೆ.
  • Tag-based – Fetch ಗಳ ಗುಂಪಿಗೆ ಒಂದು ತಾರ್ಕಿಕ ಟ್ಯಾಗ್ ಅನ್ನು ಲಗತ್ತಿಸಿ (ಉದಾಹರಣೆಗೆ, 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 ಸರ್ವರ್‌ನ ಮುಂದೆ ಇರುತ್ತದೆ, ಇದು ಅಪರೂಪವಾಗಿ ಬದಲಾಗುವ ರೂಟ್‌ಗಳಿಗೆ ಕ್ಯಾಶ್ ಮಾಡಿದ ರೆಸ್ಪಾನ್ಸ್‌ಗಳನ್ನು ನೀಡುತ್ತದೆ.
  4. Next.js internal cache – ಫ್ರೇಮ್‌ವರ್ಕ್‌ನ ಡೇಟಾ ಮತ್ತು ರೂಟ್ ಕ್ಯಾಶ್‌ಗಳು ಪ್ರತಿ-ಕೋರಿಕೆ ಮೆಮೊರೈಸೇಶನ್ ಮತ್ತು ISR ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತವೆ.
  5. Application cache – Redis ಭಾರೀ ಡೇಟಾಬೇಸ್ ಕ್ವೇರಿಗಳ ಫಲಿತಾಂಶಗಳನ್ನು ಕೀ (key) ಪ್ಯಾರಾಮೀಟರ್‌ಗಳು ಅಥವಾ ಟ್ಯಾಗ್‌ಗಳ ಮೂಲಕ ಸಂಗ್ರಹಿಸುತ್ತದೆ.
  6. Database – ಇದು ಅಂತಿಮ ಸತ್ಯದ ಮೂಲವಾಗಿದೆ, ಮೇಲಿನ ಎಲ್ಲಾ ಹಂತಗಳಲ್ಲಿ ಕ್ಯಾಶ್ ಸಿಗದಿದ್ದಾಗ ಮಾತ್ರ ಇದನ್ನು ಕ್ವೇರಿ ಮಾಡಲಾಗುತ್ತದೆ.

ಒಂದು ಕೋರಿಕೆ ಬಂದಾಗ, ಅದು ಯಾವುದಾದರೂ ಒಂದು ಪದರ ಉತ್ತರ ನೀಡುವವರೆಗೆ ಈ ಪಟ್ಟಿಯಲ್ಲಿ ಕೆಳಕ್ಕೆ ಹೋಗುತ್ತದೆ. ಅತ್ಯಂತ ವೇಗದ ಉತ್ತರವು ಗೆಲ್ಲುತ್ತದೆ ಮತ್ತು ಮುಂದಿನ ಬಾರಿ ಬಳಸಲು ಆ ರೆಸ್ಪಾನ್ಸ್ ಅನ್ನು ಚೈನ್‌ನಲ್ಲಿ ಹಿಂದಕ್ಕೆ ಬರೆಯಲಾಗುತ್ತದೆ.

ಎಲ್ಲವನ್ನೂ ಒಟ್ಟಿಗೆ ಮಾಡುವುದು

  1. ನಿಮ್ಮ API ರೂಟ್‌ಗಳಲ್ಲಿ Cache-Control ಹೆಡರ್‌ಗಳನ್ನು ಸೆಟ್ ಮಾಡಿ
  2. ನಿಮ್ಮ CDN ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ – HTML ಮತ್ತು JSON ಎಂಡ್‌ಪಾಯಿಂಟ್‌ಗಳಿಗಾಗಿ ಎಡ್ಜ್ ಕ್ಯಾಶಿಂಗ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ ಮತ್ತು CDN Cache-Control ಅನ್ನು ಪಾಲಿಸುತ್ತಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
  3. ರಿವರ್ಸ್ ಪ್ರೊಕ್ಸಿ ಅನ್ನು ನಿಯೋಜಿಸಿ (Deploy) – ನಿಮ್ಮ Next.js ಸರ್ವರ್‌ನ ಮುಂದೆ Nginx ಅನ್ನು ಇರಿಸಿ.
  4. Redis ಅನ್ನು ಸೇರಿಸಿ – ದುಬಾರಿ ಡೇಟಾಬೇಸ್ ಕ್ವೇರಿಗಳ ಫಲಿತಾಂಶಗಳನ್ನು ಕ್ಯಾಶ್ ಮಾಡಿ.
  5. ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ revalidateTag ಬಳಸಿ – ನಿರ್ದಿಷ್ಟ ಟ್ಯಾಗ್‌ನ Next.js ಇಂಟರ್ನಲ್ ಕ್ಯಾಶ್ ಅನ್ನು ಅಳಿಸಲು revalidateTag ಅನ್ನು ಕರೆಯಿರಿ.

ಸಾರಾಂಶ (Takeaway)

Next.js ಒಳಗಿರುವ ಒಂದೇ ಒಂದು ಕ್ಯಾಶ್ ಮೊದಲ ಕೋರಿಕೆಯನ್ನು ವೇಗಗೊಳಿಸುತ್ತದೆ, ಆದರೆ ನಿಜವಾದ ಸ್ಕೇಲೆಬಿಲಿಟಿ (scalability) ಒಂದು ಶಿಸ್ತುಬದ್ಧ ಸ್ಟ್ಯಾಕ್‌ನಿಂದ ಬರುತ್ತದೆ: browser → CDN → reverse proxy → framework → Redis → database. ಪ್ರತಿ ಪದರವನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ, ಸಮಯ, ಇವೆಂಟ್‌ಗಳು ಮತ್ತು ಟ್ಯಾಗ್‌ಗಳ ಮೂಲಕ ಇನ್‌ವ್ಯಾಲಿಡೇಶನ್ ಅನ್ನು ನಿರ್ವಹಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಮೆಟ್ರಿಕ್‌ಗಳನ್ನು ಗಮನಿಸಿ. ಇದರಿಂದ ನಿಮ್ಮ ಬ್ಯಾಕೆಂಡ್ ಟ್ರಾಫಿಕ್ ಏರಿಳಿತಗಳನ್ನು ತಡೆದುಕೊಳ್ಳುವಾಗ ಲೇಟೆನ್ಸಿ (latency) ಕಡಿಮೆಯಿರುತ್ತದೆ.