Next.js 15 पूर्ण-स्टैक वेब ऐप · पाठ

उन्नत डेटा फ़ेचिंग पैटर्न

सर्वर कंपोनेंट में सीधे `async/await` का उपयोग करके प्रभावी डेटा फ़ेचिंग लागू कीजिए और रीवैलिडेशन रणनीतियों का अन्वेषण कीजिए।

पाठ 3, कुल 4 में से11 चरण

उन्नत डेटा फ़ेचिंग पैटर्न, CoddyKit पर Next.js 15 पूर्ण-स्टैक वेब ऐप का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Next.js 15 पूर्ण-स्टैक वेब ऐप सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Next.js 15 पूर्ण-स्टैक वेब ऐप पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

कुशल डेटा प्राप्त करना

Next.js में तेज़ और प्रतिक्रियाशील एप्लिकेशन बनाने के लिए डेटा को कुशलता से प्राप्त करना महत्वपूर्ण है। हमने डेटा प्राप्त करने की बुनियादी विधियाँ देखी हैं, लेकिन उन्नत रणनीतियों का क्या?

इस पाठ में हम सीखेंगे कि सर्वर कंपोनेंट्स में डेटा प्राप्त करने की प्रक्रिया को कैसे बेहतर ढंग से नियंत्रित करें, कैशिंग को कैसे नियंत्रित करें और डेटा को ताज़ा कैसे रखें, ताकि प्रदर्शन और उपयोगकर्ता अनुभव बेहतर हो सके।

सीधे सर्वर से डेटा प्राप्त करना

Next.js 15 का ऐप राउटर आपको सर्वर कंपोनेंट्स के भीतर सीधे async/await का उपयोग करने देता है। इसका अर्थ है कि आप क्लाइंट-साइड हुक्स या एपीआई रूट्स की आवश्यकता के बिना, यूआई को रेंडर करते समय उसी स्थान पर डेटा प्राप्त कर सकते हैं।

यहाँ किसी todo आइटम को प्राप्त करने का एक सरल उदाहरण दिया गया है:

// app/page.tsx

export default async function HomePage() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const todo = await response.json();

  return (
    <div>
      <h1>Todo Item:</h1>
      <p><b>Title:</b> {todo.title}</p>
      <p><b>Completed:</b> {todo.completed ? 'Yes' : 'No'}</p>
    </div>
  );
}

स्वचालित कैशिंग

डिफ़ॉल्ट रूप से, Next.js सर्वर कंपोनेंट्स में किए गए fetch अनुरोधों को अपने-आप कैश करता है। यह एक शक्तिशाली अनुकूलन है!

डिफ़ॉल्ट व्यवहार { cache: 'force-cache' } का उपयोग करने के बराबर है।
यह ऐसे डेटा के लिए आदर्श है जो अक्सर नहीं बदलता, जैसे ब्लॉग पोस्ट या उत्पाद का विवरण।
डेटा एक बार प्राप्त हो जाने के बाद, निश्चित समयावधि के भीतर उसी यूआरएल के बाद के अनुरोध कैश किए गए डेटा का उपयोग करेंगे, जिससे पृष्ठ तेज़ी से लोड होंगे।

हमेशा ताज़ा डेटा

कभी-कभी आपको हर अनुरोध पर बिल्कुल नवीनतम डेटा चाहिए होता है और आप किसी भी कैश को अनदेखा करना चाहते हैं। ऐसे में cache: 'no-store' उपयोगी होता है।

इसका उपयोग अत्यधिक गतिशील सामग्री, उपयोगकर्ता-विशिष्ट डेटा या रियल-टाइम फ़ीड के लिए करें, जहाँ कुछ सेकंड पुराना डेटा भी स्वीकार्य न हो।

// app/live-data/page.tsx

export default async function LiveDataPage() {
  // Fetch data that should never be cached
  const response = await fetch(
    'https://api.example.com/live-feed',
    { cache: 'no-store' } // Always fetch fresh data
  );
  const data = await response.json();

  return (
    <div>
      <h1>Live Feed:</h1>
      <p>{data.latestUpdate}</p>
      <p>Fetched: {new Date().toLocaleTimeString()}</p>
    </div>
  );
}

निर्धारित डेटा अपडेट

यदि आपको ताज़ा डेटा चाहिए, लेकिन हर अनुरोध पर नहीं, तो क्या करें? आप next: { revalidate: seconds } का उपयोग करके Next.js को बता सकते हैं कि निश्चित समय के बाद डेटा को फिर से प्राप्त करे।

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

// app/news/page.tsx

export default async function NewsPage() {
  const response = await fetch(
    'https://api.example.com/latest-news',
    { next: { revalidate: 60 } } // Revalidate every 60 seconds
  );
  const news = await response.json();

  return (
    <div>
      <h1>Latest News:</h1>
      <ul>
        {news.articles.slice(0, 3).map(article => (
          <li key={article.id}>{article.title}</li>
        ))}
      </ul>
    </div>
  );
}

पाथ के आधार पर पुनः सत्यापन

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

revalidatePath('/your-path') फ़ंक्शन को आमतौर पर सर्वर ऐक्शन या एपीआई रूट से कॉल किया जाता है। डेटा में बदलाव के बाद, जैसे किसी उपयोगकर्ता द्वारा अपनी प्रोफ़ाइल अपडेट करने पर, आप उस उपयोगकर्ता के प्रोफ़ाइल पृष्ठ का कैश अमान्य कर सकते हैं, ताकि उसे तुरंत नवीनतम डेटा दिखाई दे।

टैग के आधार पर पुनः सत्यापन

माँग पर पुनः सत्यापन का एक अधिक लचीला तरीका टैग का उपयोग करना है। आप next: { tags: ['tag1', 'tag2'] } की सहायता से किसी fetch अनुरोध को एक या अधिक टैग से जोड़ सकते हैं।

बाद में आप revalidateTag('tag1') को कॉल करके 'tag1' से जुड़े सभी कैश किए गए डेटा को अमान्य कर सकते हैं, चाहे उनका विशिष्ट पाथ कुछ भी हो। यह उन डेटा के लिए उपयोगी है जो कई पृष्ठों पर दिखाई देते हैं, जैसे उत्पाद या श्रेणियाँ।

// app/products/page.tsx

export default async function ProductsPage() {
  const response = await fetch(
    'https://api.example.com/products',
    { next: { tags: ['products-list'] } } // Tag this fetch
  );
  const products = await response.json();

  return (
    <div>
      <h1>Our Products:</h1>
      <ul>
        {products.slice(0, 3).map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

विश्वसनीय डेटा प्राप्त करना

डेटा प्राप्त करते समय त्रुटियाँ हो सकती हैं, जैसे नेटवर्क की समस्याएँ, एपीआई का अनुपलब्ध होना या अमान्य प्रतिक्रियाएँ। एप्लिकेशन को क्रैश होने से बचाने के लिए इनका उचित ढंग से निपटारा करना अत्यंत आवश्यक है।

अपने fetch कॉल्स को हमेशा try...catch ब्लॉक में रखें और response.ok प्रॉपर्टी की जाँच करें, ताकि यह सुनिश्चित हो सके कि अनुरोध सफल रहा।

// app/error-example/page.tsx

export default async function ErrorExamplePage() {
  let data = null;
  let errorMessage = null;

  try {
    const response = await fetch('https://api.nonexistent.com/data');
    if (!response.ok) {
      throw new Error(`Failed to fetch: ${response.statusText}`);
    }
    data = await response.json();
  } catch (error) {
    errorMessage = error.message;
  }

  return (
    <div>
      <h1>Data Fetching with Error Handling:</h1>
      {errorMessage && <p style={{ color: 'red' }}>Error: {errorMessage}</p>}
      {data && <p>Data: {data.message}</p>}
    </div>
  );
}

किसका उपयोग कब करें

सही डेटा प्राप्त करने की रणनीति चुनना आपके डेटा की विशेषताओं पर निर्भर करता है:

डिफ़ॉल्ट कैशिंग (force-cache): स्थिर सामग्री या ऐसे डेटा के लिए जो बहुत कम अपडेट होता है। सर्वोत्तम प्रदर्शन।
cache: 'no-store': अत्यधिक गतिशील, रियल-टाइम या उपयोगकर्ता-विशिष्ट डेटा के लिए, जिसे हमेशा ताज़ा होना चाहिए।
next: { revalidate: seconds }: समय-समय पर अपडेट होने वाले डेटा के लिए, जिससे ताज़गी और प्रदर्शन में संतुलन बना रहता है।
माँग पर पुनः सत्यापन (revalidatePath/revalidateTag): उपयोगकर्ता की कार्रवाइयों या आपके बैकएंड में डेटा बदलाव जैसी विशेष घटनाओं के बाद अपडेट शुरू करने के लिए।

डेटा प्राप्त करने के निर्णय

Next.js के सर्वर कंपोनेंट में निम्नलिखित परिस्थितियों के लिए आप आमतौर पर fetch के किन विकल्पों का उपयोग करेंगे?

इंटरैक्टिव पाठ में इसका उत्तर दें

उन्नत डेटा प्राप्ति का सारांश

अब आपने Next.js के सर्वर कंपोनेंट्स में डेटा प्राप्त करने के उन्नत तरीकों का अध्ययन कर लिया है!

डेटा प्राप्त करने के लिए आप सर्वर कंपोनेंट्स में सीधे async/await का उपयोग कर सकते हैं।
Next.js डिफ़ॉल्ट रूप से fetch अनुरोधों को स्वचालित रूप से कैश करता है (force-cache)।
रियल-टाइम डेटा के लिए cache: 'no-store' का उपयोग करके आप कैश को अनदेखा कर सकते हैं।
next: { revalidate: seconds } का उपयोग करके समय-आधारित पुनः सत्यापन लागू करें।
revalidatePath और revalidateTag के साथ माँग पर पुनः सत्यापन की अवधारणाओं को समझें।
विश्वसनीय एप्लिकेशन के लिए हमेशा त्रुटि प्रबंधन शामिल करें।

इन रणनीतियों में निपुण होने से आपको अत्यधिक प्रभावी और गतिशील Next.js एप्लिकेशन बनाने में सहायता मिलेगी!

शुरुआत निःशुल्क

एआई शिक्षक के साथ TypeScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 12
पाठ: 48

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “उन्नत डेटा फ़ेचिंग पैटर्न” पाठ निःशुल्क है?

हाँ — Next.js 15 पूर्ण-स्टैक वेब ऐप अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “उन्नत डेटा फ़ेचिंग पैटर्न” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Next.js 15 पूर्ण-स्टैक वेब ऐप पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“उन्नत डेटा फ़ेचिंग पैटर्न” में मैं क्या सीखूँगा?

सर्वर कंपोनेंट में सीधे `async/await` का उपयोग करके प्रभावी डेटा फ़ेचिंग लागू कीजिए और रीवैलिडेशन रणनीतियों का अन्वेषण कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Next.js 15 पूर्ण-स्टैक वेब ऐप का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Next.js 15 पूर्ण-स्टैक वेब ऐप शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Next.js 15 पूर्ण-स्टैक वेब ऐप शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“उन्नत डेटा फ़ेचिंग पैटर्न” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Next.js 15 पूर्ण-स्टैक वेब ऐप पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Next.js 15 पूर्ण-स्टैक वेब ऐप पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Next.js 15 पूर्ण-स्टैक वेब ऐप पर वापस जाएँ