Next.js में उन्नत डेटा फ़ेचिंग

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

सर्वर-साइड रेंडरिंग (एसएसआर)

उदाहरण: getServerSideProps का उपयोग करना

// pages/post/[id].js
export async function getServerSideProps(context) {
  const { params } = context;
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

const PostPage = ({ post }) => {
  return (
    

      
{post.title}
      
{post.body}
    
  );
};

export default PostPage;

स्टेटिक साइट जेनरेशन (एसएसजी)

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

उदाहरण: getStaticProps का उपयोग करना

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

const HomePage = ({ posts }) => {
  return (
    

      {posts.map((post) => (
        

          
{post.title}
          
{post.body}
        
      ))}
    
  );
};

export default HomePage;

वृद्धिशील स्थैतिक पुनर्जनन (आईएसआर)

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

उदाहरण: पुनर्वैधीकरण के साथ getStaticProps का उपयोग करना

// pages/posts/[id].js
export async function getStaticProps(context) {
  const { params } = context;
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
    revalidate: 60, // Revalidate the page every 60 seconds
  };
}

const PostPage = ({ post }) => {
  return (
    

      
{post.title}
      
{post.body}
    
  );
};

export default PostPage;

क्लाइंट-साइड डेटा फ़ेचिंग

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

उदाहरण: क्लाइंट-साइड डेटा फ़ेचिंग के लिए यूज़इफ़ेक्ट और यूज़स्टेट का उपयोग करना

import { useEffect, useState } from 'react';

const PostsPage = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await fetch('https://api.example.com/posts');
      const data = await res.json();
      setPosts(data);
      setLoading(false);
    };

    fetchPosts();
  }, []);

  if (loading) {
    return 
Loading...
;
  }

  return (
    

      {posts.map((post) => (
        

          
{post.title}
          
{post.body}
        
      ))}
    
  );
};

export default PostsPage;

डेटा प्राप्त करने के तरीकों का संयोजन

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

उदाहरण: एसएसआर और क्लाइंट-साइड फ़ेचिंग का संयोजन

// pages/user/[id].js
import { useEffect, useState } from 'react';

export async function getServerSideProps(context) {
  const { params } = context;
  const res = await fetch(`https://api.example.com/users/${params.id}`);
  const user = await res.json();

  return {
    props: {
      user,
    },
  };
}

const UserPage = ({ user }) => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await fetch(`https://api.example.com/users/${user.id}/posts`);
      const data = await res.json();
      setPosts(data);
      setLoading(false);
    };

    fetchPosts();
  }, [user.id]);

  return (
    

      
{user.name}
      
{user.email}

      
Posts
      {loading ? (
        
Loading...
      ) : (
        

          {posts.map((post) => (
            

              
{post.title}
              
{post.body}
            
          ))}
        
      )}
    
  );
};

export default UserPage;

क्लाइंट-साइड फ़ेचिंग के लिए SWR का उपयोग करना

SWR (stale-while-revalidate) डेटा लाने के लिए वर्सेल द्वारा बनाई गई एक रिएक्ट हुक लाइब्रेरी है। यह कैशिंग, पुनर्वैधीकरण, फोकस ट्रैकिंग और बहुत कुछ जैसी सुविधाएं प्रदान करता है, जिससे क्लाइंट-साइड डेटा प्राप्त करना अधिक कुशल और शक्तिशाली हो जाता है।

उदाहरण: एसडब्ल्यूआर का उपयोग करना

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

const SWRPostsPage = () => {
  const { data, error } = useSWR('https://api.example.com/posts', fetcher);

  if (error) return 
Error loading posts.
;
  if (!data) return 
Loading...
;

  return (
    

      {data.map((post) => (
        

          
{post.title}
          
{post.body}
        
      ))}
    
  );
};

export default SWRPostsPage;

निष्कर्ष

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