Next.js 14 ರ Server Components ಬಂಡಲ್ ಗಾತ್ರವನ್ನು (bundle size) ಸುಮಾರು 60% ರಷ್ಟು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಸಾಮಾನ್ಯ ಬ್ಲಾಗ್ ಪುಟದಲ್ಲಿ ಮೊದಲ ಬಾರಿಗೆ ಪೇಂಟ್ ಆಗುವ ಸಮಯವನ್ನು (first-paint times) 200 ms ಗಿಂತ ಕಡಿಮೆ ಮಾಡುತ್ತದೆ, ಅಂದರೆ ಬಳಕೆದಾರರು ವಿಷಯವನ್ನು ವೇಗವಾಗಿ ನೋಡಬಹುದು ಮತ್ತು ಸರ್ಚ್ ಇಂಜಿನ್‌ಗಳು ಸಂಪೂರ್ಣವಾಗಿ ರೆಂಡರ್ ಆದ HTML ಅನ್ನು ಪಡೆಯುತ್ತವೆ.

ಈ ಹೊಸ ಬಿಡುಗಡೆಯು Next.js ಬಳಸಿ ನಿರ್ಮಿಸಲಾದ React ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಡಿಫಾಲ್ಟ್ ಎಕ್ಸಿಕ್ಯೂಷನ್ ಮಾಡೆಲ್ ಅನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. ಈ ಹಿಂದೆ ಪ್ರತಿಯೊಂದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಬ್ರೌಸರ್ ಕಡೆಗೆ ಕಳುಹಿಸಲಾಗುತ್ತಿತ್ತು, ಆದರೆ ಈಗ ಡೆವಲಪರ್‌ಗಳು UI ನ ಕೆಲವು ಭಾಗಗಳನ್ನು “Server Components” ಎಂದು ಗುರುತಿಸಬಹುದು, ಇದರಿಂದ ಅವು ಕೇವಲ ಬ್ಯಾಕೆಂಡ್‌ನಲ್ಲಿ ಮಾತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ. ಆ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಕೋಡ್ ಎಂದಿಗೂ ಕ್ಲೈಂಟ್‌ಗೆ ತಲುಪುವುದಿಲ್ಲ, ಇದರಿಂದ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಕೇವಲ ಇಂಟರಾಕ್ಟಿವಿಟಿ (interactivity) ಅಗತ್ಯವಿರುವ ಭಾಗಗಳು ಮಾತ್ರ ಉಳಿಯುತ್ತವೆ.

ಈ ಬದಲಾವಣೆ ಏಕೆ ಮುಖ್ಯ

React ಡೆವಲಪರ್‌ಗಳು ದೀರ್ಘಕಾಲದಿಂದ ಮೂರು ಪರಸ್ಪರ ಸಂಬಂಧಿತ ಸಮಸ್ಯೆಗಳೊಂದಿಗೆ ಹೋರಾಡುತ್ತಿದ್ದಾರೆ: ನೆಟ್‌ವರ್ಕ್ ರಿಕ್ವೆಸ್ಟ್‌ಗಳ ಸುರಿಮಳೆ, ದೊಡ್ಡದಾದ JavaScript ಬಂಡಲ್‌ಗಳು ಮತ್ತು ನಿಧಾನಗತಿಯ ಪೇಜ್ ಲೋಡ್‌ಗಳು. ಈ ಸಮಸ್ಯೆಗಳು SEO ಅನ್ನು ಕೂಡ ಹಾನಿಗೊಳಿಸುತ್ತವೆ ಏಕೆಂದರೆ ಕ್ರಾಲರ್‌ಗಳಿಗೆ (crawlers) ಕಳುಹಿಸಲಾದ ಆರಂಭಿಕ HTML ಹೆಚ್ಚಾಗಿ ಖಾಲಿ ಇರುತ್ತದೆ, ಇದು ಸರ್ಚ್ ಬಾಟ್‌ಗಳು ಕ್ಲೈಂಟ್-ಸೈಡ್ ಹೈಡ್ರೇಶನ್ (client-side hydration) ಗಾಗಿ ಕಾಯುವಂತೆ ಮಾಡುತ್ತದೆ. Next.js 14 ಡೇಟಾ-ಭಾರೀ ಕೆಲಸವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಕ್ಲೈಂಟ್‌ನಿಂದ ಹೊರಗೆ ಕೊಂಡೊಯ್ಯುವ ಮೂಲಕ ಈ ಮೂಲ ಕಾರಣವನ್ನು ಪರಿಹರಿಸುತ್ತದೆ.

Server Components ಹಳೆಯ ಮಾಡೆಲ್‌ನಿಂದ ಹೇಗೆ ಭಿನ್ನವಾಗಿವೆ

  • Server Components – ಸರ್ವರ್‌ನಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ, ಡೇಟಾವನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತವೆ (fetch), ಡೇಟಾಬೇಸ್‌ಗಳೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸುತ್ತವೆ ಮತ್ತು ಸರಳ HTML ಅನ್ನು ನೀಡುತ್ತವೆ. ಅವುಗಳ JavaScript ಎಂದಿಗೂ ನೆಟ್‌ವರ್ಕ್ ಮೂಲಕ ಪ್ರಯಾಣಿಸುವುದಿಲ್ಲ.
  • Client Components – ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಇರುತ್ತವೆ ಮತ್ತು ಬಟನ್ ಕ್ಲಿಕ್‌ಗಳು, ಫಾರ್ಮ್ ಸಬ್ಮಿಷನ್‌ಗಳು ಅಥವಾ React state ಅಥವಾ effects ಬಳಸುವ ಯಾವುದೇ ಕಾಂಪೊನೆಂಟ್‌ಗಳಂತಹ UI ಇಂಟರಾಕ್ಷನ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತವೆ.

ಈ ಫ್ರೇಮ್‌ವರ್ಕ್ ಒಂದು ಸರಳ ನಿರ್ದೇಶನದ (directive) ಮೂಲಕ ಈ ವಿಭಜನೆಯನ್ನು ಜಾರಿಗೆ ತರುತ್ತದೆ. ಫೈಲ್‌ನ ಮೇಲ್ಭಾಗದಲ್ಲಿ use client ಅನ್ನು ಸೇರಿಸುವುದರಿಂದ, ಆ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಕೇವಲ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಎಂದು ಪರಿಗಣಿಸಲು Next.js ಗೆ ತಿಳಿಸುತ್ತದೆ. ಆ ಮಾರ್ಕರ್ ಇಲ್ಲದ ಯಾವುದೇ ಕಾಂಪೊನೆಂಟ್ mặc적으로 (default) Server Component ಆಗಿರುತ್ತದೆ.

ನೈಜ-ಪ್ರಪಂಚದ ಅಂಕಿಅಂಶಗಳು

ವೈಯಕ್ತಿಕ ಬ್ಲಾಗ್ ಪುಟದ ಮೇಲಿನ ಒಂದು ಸಣ್ಣ ಪ್ರಯೋಗವು ಇದರ ಪರಿಣಾಮವನ್ನು ತೋರಿಸುತ್ತದೆ. Fetch ಅನ್ನು Server Component ಗೆ ವರ್ಗಾಯಿಸಿ, ಸರ್ವರ್ ಪಟ್ಟಿಯನ್ನು ಸ್ಟ್ಯಾಟಿಕ್ HTML ಆಗಿ ರೆಂಡರ್ ಮಾಡಲು ಬಿಟ್ಟ ನಂತರ, JavaScript ಬಂಡಲ್ 60% ರಷ್ಟು ಕುಗ್ಗಿತು ಮತ್ತು ಪುಟವು 200 ms ಗಿಂತ ಕಡಿಮೆ ಸಮಯದಲ್ಲಿ ರೆಂಡರ್ವಾಯಿತು.

ಒಂದು ಪ್ರಾಯೋಗಿಕ ಲೇಯರಿಂಗ್ ಪ್ಯಾಟರ್ನ್ (layering pattern)

  1. Bottom layer (Server) – API ಅಥವಾ ಡೇಟಾಬೇಸ್‌ಗಳಿಂದ ಡೇಟಾವನ್ನು ಪಡೆಯಿರಿ. ಯಾವುದೇ ಖಾಸಗಿ ಲಾಜಿಕ್ ಅನ್ನು ಇಲ್ಲಿಯೇ ಇರಿಸಿ; ಅದು ಎಂದಿಗೂ ಸರ್ವರ್‌ನಿಂದ ಹೊರಗೆ ಹೋಗುವುದಿಲ್ಲ.
  2. Middle layer (Server) – ಕಚ್ಚಾ ಡೇಟಾವನ್ನು ಶುದ್ಧ HTML ಮಾರ್ಕ್‌ಅಪ್ ಆಗಿ ಪರಿವರ್ತಿಸಿ. ಈ ಲೇಯರ್ ಇನ್ನೂ React ನ JSX ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಬಳಸಬಹುದು ಆದರೆ ಇದು ಸರ್ವರ್-ಓನ್ಲಿ ಆಗಿರುತ್ತದೆ.
  3. Top layer (Client) – ಇಂಟರಾಕ್ಟಿವಿಟಿಗಾಗಿ ಸಣ್ಣ, ಪ್ರತ್ಯೇಕ ವಿಜೆಟ್‌ಗಳನ್ನು (widgets) ಸೇರಿಸಿ. "Like" ಬಟನ್‌ಗಳು, ಕಾಮೆಂಟ್ ಫಾರ್ಮ್‌ಗಳು ಅಥವಾ state ಅಗತ್ಯವಿರುವ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುಗಳು ಇದರ ಸಾಮಾನ್ಯ ಉದಾಹರಣೆಗಳಾಗಿವೆ.

ಈ ಶ್ರೇಣೀಕೃತ ಕ್ರಮವನ್ನು (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 ಅನ್ನು ತಕ್ಷಣವೇ ನೀಡಲು ಮತ್ತು ನಿಜವಾಗಿಯೂ ಅಗತ್ಯವಿರುವ ಕಡೆ ಇಂಟರಾಕ್ಟಿವಿಟಿಯನ್ನು ಕಾಯ್ದುಕೊಳ್ಳಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇದರ ಫಲಿತಾಂಶವು ಬಳಕೆದಾರರು ಮತ್ತು ಸರ್ಚ್ ಇಂಜಿನ್‌ಗಳು ಎರಡಕ್ಕೂ ಪ್ರಯೋಜನಕಾರಿಯಾದ ವೇಗವಾದ ಮತ್ತು ಲೀನ್ (leaner) ವೆಬ್ ಅನುಭವವಾಗಿದೆ.