SSR (सर्वर-साइड रेंडरिंग) Next.js में पेज बनाने का एक और तरीका है। इस लेख में, मैं यह बताना चाहता हूं कि एसएसआर क्या है, यह कैसे काम करता है, और इसे नेक्स्ट.जेएस प्रोजेक्ट के पेज राउटर और ऐप राउटर दोनों में कैसे लागू किया जाए।

एसएसआर क्या है?

एसएसआर उपयोगकर्ता द्वारा अनुरोध करने के बाद एक स्थिर पृष्ठ (या पूर्व-रेंडर पृष्ठ) उत्पन्न करने की एक विधि है। इसका मतलब यह है कि प्रत्येक अनुरोध पर एक स्थिर पृष्ठ उत्पन्न होता है। यह विधि उन पृष्ठों के लिए उपयोगी है जिन्हें बार-बार अद्यतन करने की आवश्यकता होती है, क्योंकि यह सुनिश्चित करता है कि डेटा हमेशा ताज़ा रहे

एसएसआर कैसे काम करता है?

जब आप नेक्स्ट.जेएस में एसएसआर का उपयोग करते हैं, तो हर बार जब कोई उपयोगकर्ता एक पेज का अनुरोध करता है जहां एसएसआर लागू किया जाता है, तो अनुरोध किए जाने के बाद पेज जेनरेट होता है। इसका मतलब यह है कि उपयोगकर्ता को तब तक इंतजार करना होगा जब तक Next.js प्रत्येक अनुरोध के लिए स्थिर सामग्री को फिर से तैयार और बंडल नहीं कर देता। एक बार स्थिर पृष्ठ तैयार हो जाने पर, उपयोगकर्ता अनुरोधित पृष्ठ देख सकता है।

यह ध्यान रखना महत्वपूर्ण है कि एसएसआर केवल सर्वर पर चलता है, और यह प्रत्येक अनुरोध के लिए एक स्थिर पृष्ठ बनाता है, इसलिए यह प्रोजेक्ट की निर्माण प्रक्रिया के दौरान नहीं चलता है।

ऐप राउटर में एसएसआर कैसे लागू करें

ऐप राउटर में एसएसआर लागू करने के लिए, आपको एक विशेष फ़ंक्शन लिखने या एक विशिष्ट कॉन्फ़िगरेशन सेट करने की आवश्यकता नहीं है क्योंकि यह आपके सर्वर घटकों में डिफ़ॉल्ट रूप से सक्षम है।

उदाहरण के लिए, यदि आपके पास एक स्थिर पृष्ठ है और आप एपीआई से डेटा लाते हैं, तो यह पृष्ठ डिफ़ॉल्ट रूप से एसएसआर का उपयोग करेगा। यह ध्यान रखना महत्वपूर्ण है कि जब एसएसआर का उपयोग किया जाता है, तो पेज को बिल्ड समय पर बंडल या प्री-रेंडर नहीं किया जाता है और यदि आप अपने प्रोजेक्ट में डायनामिक पेज का उपयोग करते हैं, तो यदि आप कोई डेटा नहीं लाते हैं तो यह डिफ़ॉल्ट रूप से एसएसजी का उपयोग करेगा। लेकिन जब आप एपीआई से प्राप्त करते हैं, तो यह एसएसआर पर स्विच हो जाएगा, और फिर, निर्माण समय के दौरान कोई स्थिर पेज बंडल नहीं किया जाएगा।

यह स्थैतिक मार्ग में एसएसआर लागू करने का उदाहरण है:

import React from 'react';

const AboutPage = async () => {
  // Fetch data from an API or any server-side source
  const data = getDataFromApi();

  return (
    

      
About Us
      
{data}
    
  );
};

export default AboutPage;

पेज राउटर में SSR कैसे लागू करें

पेज राउटर में एसएसआर लागू करने के लिए, आपको अपनी फ़ाइल में एक getServerSideProps फ़ंक्शन बनाना होगा। यह फ़ंक्शन प्रत्येक उपयोगकर्ता के अनुरोध के बाद कॉल किया जाएगा। यदि आप डायनामिक रूट का उपयोग कर रहे हैं, जैसे कि [आईडी] फ़ाइल, तो आपको अपनी फ़ाइल में getServerSideProps का भी उपयोग करना होगा। यह फ़ंक्शन एक तर्क लेता है, जिसे अक्सर संदर्भ नाम दिया जाता है, जिससे आप आईडी, गतिशील पृष्ठ का मान पुनर्प्राप्त कर सकते हैं। यह फ़ंक्शन प्रत्येक उपयोगकर्ता अनुरोध पर सर्वर द्वारा कॉल किया जाता है।

यह tsx फ़ाइल में कार्यान्वयन का उदाहरण है:

import { GetServerSideProps } from 'next';

interface AboutProps {
  data: string;
}

const AboutPage: React.FC = ({ data }) => {
  return (
    

      
About Us
      
{data}
    
  );
};

// This function runs on the server on every request
export const getServerSideProps: GetServerSideProps = async () => {
  const data = getDataFromApi();
  return {
    props: {
      data,
    },
  };
};

export default AboutPage;

यह jsx फ़ाइल में कार्यान्वयन का उदाहरण है:

const AboutPage = ({ data }) => {
  return (
    

      
About Us
      
{data}
    
  );
};

// This function runs on the server on every request
export async function getServerSideProps() {
  const data = getDataFromApi();

  return {
    props: {
      data,
    },
  };
}

export default AboutPage;

निष्कर्ष

SSR स्थिर पृष्ठों को बंडल करने या बनाने के लिए एक उपयोगी विधि है, लेकिन निर्माण समय के दौरान ऐसा नहीं होता है। जब आपको प्रत्येक उपयोगकर्ता अनुरोध पर अपने पेज को अपडेट करने की आवश्यकता होती है ताकि उपयोगकर्ता नवीनतम डेटा देख सकें, तो आप एसएसआर का उपयोग कर सकते हैं। हालाँकि, यह ध्यान रखना महत्वपूर्ण है कि इसमें अधिक समय लग सकता है और यह एसएसजी (स्टेटिक साइट जेनरेशन) या आईएसआर (इंक्रीमेंटल स्टेटिक रीजेनरेशन) जैसी अन्य विधियों जितना तेज़ नहीं है क्योंकि यह प्रत्येक उपयोगकर्ता अनुरोध के लिए एक स्थिर पृष्ठ उत्पन्न करता है।

मुझे आशा है कि आपको यह लेख पसंद आया होगा! यदि आपके कोई प्रश्न हों तो बेझिझक मुझसे पूछें। यदि आप आईएसआर और एसएसजी के बारे में पढ़ना चाहते हैं, तो आप उन पर मेरे लेख यहां आईएसआर के लिए और यहां एसएसजी के लिए देख सकते हैं। यदि आप हर चीज़ के बारे में अधिक जानना चाहते हैं, तो आप मेरी वेबसाइट का अनुसरण कर सकते हैं।

पढ़ने के लिए आपका शुक्रिया! अभी के लिए बाय!