परिचय

Next.js लंबे समय से सर्वर-रेंडर किए गए रिएक्ट एप्लिकेशन बनाने के लिए एक लोकप्रिय विकल्प रहा है। सर्वर-साइड रेंडरिंग (एसएसआर) के लिए इसके अंतर्निहित समर्थन के साथ, डेवलपर्स गतिशील, एसईओ-अनुकूल एप्लिकेशन बना सकते हैं। हालाँकि, Next.js 13 में ऐप राउटर की शुरूआत और Next.js 14 में परिशोधन ने SSR को काफी सरल और बढ़ाया है।

इस ब्लॉग पोस्ट में, हम पारंपरिक पेज रूटिंग सिस्टम और नए ऐप रूटिंग सिस्टम के बीच एसएसआर में अंतर का पता लगाएंगे, इस बात पर प्रकाश डालेंगे कि एसएसआर कैसे काम करता है और नए रूटिंग प्रतिमान के साथ यह कैसे बदल गया है।

पेज रूटिंग में एसएसआर (प्री-नेक्स्ट.जेएस 13)

ऐप राउटर पेश होने से पहले, SSR को getServerSideProps जैसे विशिष्ट कार्यों का उपयोग करके पेज रूटिंग सिस्टम में नियंत्रित किया जाता था। इस फ़ंक्शन को प्रत्येक अनुरोध पर बुलाया गया था, जिससे डेवलपर्स को पेज रेंडर करने से पहले डेटा सर्वर-साइड लाने की अनुमति मिली।

getServerSideProps का उपयोग करके पेज रूटिंग में SSR का उदाहरण:

export default function Blogs({ data }) {
  // Render the fetched data
  return (
    

      {data.map((item) => (
        

          
{item.title}
          
{item.content}
        
      ))}
    
  );
}

// This function runs on every request
export async function getServerSideProps() {
  // Fetch data from an external API
  const res = await fetch('https://api.example.com/blogs');
  const data = await res.json();

  // Pass the data as props to the page component
  return { props: { data } };
}

यहां, getServerSideProps पेज रूटिंग सिस्टम में SSR की कुंजी है। यह आपको प्रत्येक अनुरोध पर एपीआई (या किसी अन्य डेटा स्रोत) से डेटा लाने और इसे प्रॉप्स के रूप में पेज घटक पर भेजने की अनुमति देता है। यह पैटर्न, शक्तिशाली होते हुए भी, बहुत सारे सर्वर-साइड लॉजिक और विभिन्न मार्गों को संभालते समय जटिल कोडबेस का परिणाम दे सकता है।

नेक्स्ट.जेएस 14 में ऐप रूटिंग और एसएसआर

नेक्स्ट.जेएस 14 के साथ, एसएसआर अधिक सुव्यवस्थित हो गया है और ऐप रूटिंग सिस्टम में एकीकृत हो गया है। यह नया सिस्टम सर्वर कंपोनेंट्स और क्लाइंट कंपोनेंट्स पेश करता है, जहां एसएसआर अधिक सहज है।

ऐप रूटिंग में, अब आप getServerSideProps जैसे विशेष फ़ंक्शन की आवश्यकता के बिना सीधे घटकों के अंदर डेटा प्राप्त कर सकते हैं। आप सर्वर क्रियाओं का उपयोग करके इसे प्राप्त कर सकते हैं, जो कोड को सरल और बनाए रखने में आसान बनाता है।

सर्वर घटकों के साथ ऐप रूटिंग में एसएसआर का उदाहरण:

"use server";

export async function getBlogs() {
  try {
    const response = await fetch('https://api.example.com/posts');
    return response.json();
  } catch (error) {
    return { error: error.message };
  }
}

// This component runs on the server and fetches data
export default async function Blog() {
  const blogs = await getBlogs();

  return (
    

      {(blogs || []).map((blog) => (
        

          
{blog.name}
          
{blog.content}
        
      ))}
    
  );
}

इस ऐप रूटिंग उदाहरण में, हम उपयोग सर्वर का उपयोग करके सीधे घटक फ़ाइल के अंदर डेटा लाने के लिए एक सर्वर घटक का उपयोग कर रहे हैं। यह अलग एपीआई मार्गों या फ़ंक्शन जैसे getServerSideProps की आवश्यकता को हटा देता है।

सर्वर क्रियाओं की शक्ति
Next.js 14 सर्वर क्रियाओं को शुरू करके प्रक्रिया को सरल बनाता है। ये क्रियाएं आपको घटक फ़ाइल के भीतर सीधे डेटा लाने और संसाधित करने की अनुमति देती हैं, जिससे जटिलता कम हो जाती है और आपका कोडबेस अधिक रखरखाव योग्य हो जाता है।

सर्वर क्रियाओं के मुख्य लाभ:

क्लीनर कोड: सर्वर-साइड लॉजिक को अलग-अलग फ़ाइलों या फ़ंक्शंस में बिखेरने के बजाय, आप सब कुछ एक ही स्थान पर रख सकते हैं।
बेहतर रख-रखाव: कम चलने वाले भागों का अर्थ है प्रबंधन करने के लिए कम कोड, जिससे आपके एप्लिकेशन को बनाए रखना आसान हो जाता है।
बेहतर प्रदर्शन: बुद्धिमान कैशिंग तंत्र के साथ, आप इष्टतम प्रदर्शन के लिए अपने सर्वर-साइड तर्क को ठीक कर सकते हैं।

नेक्स्ट.जेएस में हाइड्रेशन

नेक्स्ट.जेएस और सर्वर-साइड रेंडरिंग (एसएसआर) के संदर्भ में, हाइड्रेशन उस प्रक्रिया को संदर्भित करता है जहां एक स्थिर रूप से प्रस्तुत HTML पेज (सर्वर से भेजा गया) ब्राउज़र में पूरी तरह से इंटरैक्टिव रिएक्ट एप्लिकेशन में परिवर्तित हो जाता है। यह पेज को इंटरैक्टिव बनाने के लिए रिएक्ट के क्लाइंट-साइड जावास्क्रिप्ट के साथ स्थिर HTML को "हाइड्रेट" करता है।

ऐप रूटिंग बनाम पेज रूटिंग में हाइड्रेशन

पेज रूटिंग में, पेज पर प्रत्येक घटक के लिए हाइड्रेशन की आवश्यकता होती है, जो इसे क्लाइंट पक्ष पर इंटरैक्टिव बनाता है। इसका मतलब यह है कि इंटरैक्शन के लिए आवश्यक सभी जावास्क्रिप्ट क्लाइंट को भेज दी जाती है, जिससे एप्लिकेशन स्केल के रूप में प्रदर्शन में बाधाएं आ सकती हैं।

ऐप रूटिंग में, सर्वर घटकों के साथ, केवल क्लाइंट घटक (वे जो इंटरएक्टिविटी को संभालते हैं) हाइड्रेटेड होते हैं। यह चयनात्मक हाइड्रेशन क्लाइंट को भेजे गए जावास्क्रिप्ट की मात्रा को कम कर देता है, जिसके परिणामस्वरूप प्रदर्शन में सुधार होता है।

ऐप रूटिंग में क्लाइंट घटकों का उदाहरण:

'use client';  // Mark this as a client component

export default function Button() {
  return (
     alert('Button clicked!')}>Click Me
  );
}

यहां, बटन घटक को 'क्लाइंट का उपयोग करें' के साथ क्लाइंट घटक के रूप में चिह्नित किया गया है। यह अन्तरक्रियाशीलता की अनुमति देता है और क्लाइंट पक्ष पर चलता है, जबकि अन्य गैर-संवादात्मक घटक सर्वर घटक के रूप में बने रहते हैं, जिससे प्रदर्शन में सुधार होता है।

ऐप रूटिंग में हाइड्रेशन के बारे में अधिक जानकारी

यह ऐसे काम करता है:

सर्वर घटकों के रूप में मूल घटक:

मूल घटक (आमतौर पर उच्च-स्तरीय घटक या संपूर्ण पृष्ठ घटक) आमतौर पर सर्वर घटक होते हैं। वे सर्वर पर चलते हैं और डेटा लाने, स्थिर HTML प्रस्तुत करने और उस डेटा को चाइल्ड घटकों तक भेजने जैसी चीज़ों को संभालते हैं।
चूँकि ये सर्वर-रेंडर हैं, इनमें क्लाइंट-साइड पर कोई जावास्क्रिप्ट शामिल नहीं है, और ये इंटरैक्टिव नहीं हैं।

इंटरएक्टिविटी के लिए ग्राहक घटक:

चाइल्ड घटक, जो अन्तरक्रियाशीलता (जैसे बटन, फॉर्म इत्यादि) को संभालते हैं, क्लाइंट घटक हैं। ये घटक रिएक्ट हुक (यूज़स्टेट, यूज़इफ़ेक्ट, आदि) का उपयोग कर सकते हैं और क्लाइंट-साइड पर हाइड्रेटेड होते हैं।
सर्वर घटक इन क्लाइंट घटकों को प्रॉप्स के माध्यम से डेटा पास करते हैं।
एक बार HTML ब्राउज़र में लोड हो जाने के बाद, Next.js क्लाइंट घटकों को हाइड्रेट करता है, आवश्यक ईवेंट श्रोताओं को जोड़ता है और पेज को इंटरैक्टिव बनाता है।

// Server Component (Parent Component)
export default async function ParentComponent() {
  // Fetch data on the server
  const data = await fetch('https://api.example.com/data').then(res => res.json());

  return (
    

      
This is Server-Side Rendered
      
  );
}

// Client Component (Child Component)
'use client';

import { useState } from 'react';

function ClientComponent({ data }) {
  const [count, setCount] = useState(0);

  return (
    

      
Data from server: {JSON.stringify(data)}
      
Client-side counter: {count}
       setCount(count   1)}>Increment
    
  );
}

निष्कर्ष

नेक्स्ट.जेएस 14 ऐप राउटर में सर्वर क्रियाओं की शुरूआत के साथ सर्वर-साइड रेंडरिंग (एसएसआर) को आसान और अधिक शक्तिशाली बनाता है। डेवलपर्स को सीधे घटक फ़ाइलों के अंदर डेटा लाने की अनुमति देकर, यह नई प्रणाली सर्वर-साइड लॉजिक को सुव्यवस्थित करती है, कोडबेस को सरल बनाती है, और अलग एपीआई मार्गों की आवश्यकता को कम करती है। चयनात्मक हाइड्रेशन के साथ, Next.js 14 में SSR अब तेज़ और अधिक कुशल है, जो आपको आसानी से अत्यधिक गतिशील और SEO-अनुकूल एप्लिकेशन बनाने में मदद करता है।

इन सर्वर क्रियाओं का लाभ उठाकर, आप अपने कोड को साफ और रखरखाव योग्य रखते हुए अपने ऐप के प्रदर्शन में सुधार कर सकते हैं। सर्वर और क्लाइंट घटकों के साथ पेज रूटिंग से ऐप रूटिंग में बदलाव स्केलेबल वेब अनुप्रयोगों के निर्माण में एक बड़ी छलांग का प्रतिनिधित्व करता है।