Next.js 15 फुलस्टैक (App Router + Server Actions) · पाठ

Suspense और लोडिंग अवस्थाओं के साथ UI स्ट्रीमिंग

React Suspense, loading.tsx फ़ाइलों और स्केलेटन की सहायता से सर्वर-रेंडर किया गया UI स्ट्रीम करके अनुभव की गई गति बेहतर बनाएँ, ताकि उपयोगकर्ताओं को सामग्री जल्दी दिखाई दे।

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

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

वॉटरफ़ॉल की समस्या

यदि कोई पेज रेंडर होने से पहले हर डेटा प्राप्ति का इंतज़ार करता है, तो उपयोगकर्ता खाली स्क्रीन देखते रहते हैं। स्ट्रीमिंग से सर्वर पेज के तैयार हिस्से तुरंत भेज सकता है और धीमे हिस्से पूरे होने पर उन्हें भर सकता है।

स्ट्रीमिंग SSR क्या है?

App Router वाला Next.js HTML को खंडों में स्ट्रीम कर सकता है। शेल और तेज़ कॉम्पोनेंट पहले आते हैं; धीमे, डेटा-निर्भर हिस्से तैयार होने पर स्ट्रीम होते हैं, जिससे पहले बाइट तक का समय और अनुमानित गति बेहतर होती है।

React Suspense की मूल बातें

Suspense ऐसे कॉम्पोनेंट को रैप करता है जो अभी तैयार न हो और उसके तैयार होने तक fallback दिखाता है। बाकी पेज बिना प्रतीक्षा किए रेंडर होता है।

import { Suspense } from 'react';
<Suspense fallback={<p>Loading...</p>}>
  <SlowComponent />
</Suspense>

असिंक्रोनस सर्वर कॉम्पोनेंट

App Router में Server Component async हो सकता है और डेटा का इंतज़ार कर सकता है। उसे Suspense में रैप करने से डेटा प्राप्ति पूरी होने तक पेज स्ट्रीम हो सकता है।

async function Reviews() {
  const data = await getReviews();
  return <ReviewList items={data} />;
}

धीमे हिस्से को स्ट्रीम करना

पेज शेल को तुरंत रेंडर करें और धीमे हिस्से को स्ट्रीम करें। समीक्षाएँ लोड होने के दौरान उपयोगकर्ता बाकी हिस्से के साथ इंटरैक्ट कर सकते हैं।

export default function Page() {
  return (
    <main>
      <Header />
      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews />
      </Suspense>
    </main>
  );
}

loading.tsx परंपरा

रूट के पास मौजूद loading.tsx फ़ाइल उस रूट के पेज को अपने-आप Suspense में रैप करती है। पेज का डेटा लोड होने तक इसका एक्सपोर्ट तुरंत दिखाया जाता है।

// app/dashboard/loading.tsx
export default function Loading() {
  return <DashboardSkeleton />;
}

स्केलेटन बनाना

स्केलेटन धूसर प्लेसहोल्डर से अंतिम लेआउट की नकल करता है, लेआउट में बदलाव घटाता है और संकेत देता है कि सामग्री आने वाली है।

function ReviewsSkeleton() {
  return (
    <div className="animate-pulse space-y-2">
      <div className="h-4 bg-gray-200 rounded" />
      <div className="h-4 bg-gray-200 rounded w-3/4" />
    </div>
  );
}

समानांतर डेटा प्राप्ति

वॉटरफ़ॉल बनाने वाले क्रमिक await से बचें। कई Suspense सीमाएँ स्वतंत्र हिस्सों को समानांतर रूप से डेटा प्राप्त करने और हर हिस्से के पूरा होते ही स्ट्रीम करने देती हैं।

<Suspense fallback={<A />}><Sales /></Suspense>
<Suspense fallback={<B />}><Traffic /></Suspense>

सूक्ष्म सीमाएँ

Suspense को पूरे पेज के बजाय सबसे छोटी धीमी इकाई के आसपास रखें। अधिक सूक्ष्म सीमाओं का अर्थ है कि UI का बड़ा हिस्सा जल्दी इंटरैक्टिव हो जाता है।

स्ट्रीमिंग बनाम स्थिर

व्यक्तिगत या धीमे डेटा के लिए स्ट्रीमिंग बहुत उपयोगी है। जो सामग्री कम बदलती है, उसके लिए स्थिर जनरेशन या कैशिंग अब भी तेज़ है। दोनों को मिलाएँ: जो कैश कर सकते हैं, उसे कैश करें और बाकी को स्ट्रीम करें।

सर्वोत्तम अभ्यास

प्रभावी ढंग से स्ट्रीम करें:

धीमे असिंक्रोनस Server Components को Suspense में रैप करें
रूट-स्तरीय फ़ॉलबैक के लिए loading.tsx का उपयोग करें
लेआउट बदलाव घटाने के लिए स्केलेटन दिखाएँ
वॉटरफ़ॉल से बचने के लिए समानांतर सीमाओं का उपयोग करें

त्वरित जाँच

स्ट्रीमिंग संबंधी अपने ज्ञान की जाँच करें।

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

पुनरावलोकन

आपने UI को स्ट्रीम करना सीखा:

स्ट्रीमिंग SSR पहले तैयार HTML भेजता है और बाद में धीमे हिस्से भरता है
असिंक्रोनस कॉम्पोनेंट को फ़ॉलबैक के साथ Suspense में रैप करें
स्वचालित रूट फ़ॉलबैक के लिए loading.tsx का उपयोग करें
स्केलेटन दिखाएँ और समानांतर सीमाओं का उपयोग करें

अब धीमे डेटा के बावजूद आपके पेज तेज़ महसूस होते हैं।

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

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

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

पाठ्यक्रम: 22
पाठ: 88

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

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

क्या “Suspense और लोडिंग अवस्थाओं के साथ UI स्ट्रीमिंग” पाठ निःशुल्क है?

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

“Suspense और लोडिंग अवस्थाओं के साथ UI स्ट्रीमिंग” में मैं क्या सीखूँगा?

React Suspense, loading.tsx फ़ाइलों और स्केलेटन की सहायता से सर्वर-रेंडर किया गया UI स्ट्रीम करके अनुभव की गई गति बेहतर बनाएँ, ताकि उपयोगकर्ताओं को सामग्री जल्दी दिखाई दे। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Next.js 15 फुलस्टैक (App Router + Server Actions) का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Next.js 15 फुलस्टैक (App Router + Server Actions) शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Next.js 15 फुलस्टैक (App Router + Server Actions) शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“Suspense और लोडिंग अवस्थाओं के साथ UI स्ट्रीमिंग” पाठ पूरा करने में कितना समय लगता है?

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

क्या मैं इस Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

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

चित्र और फ़ॉन्ट का अनुकूलन
बंडल आकार का विश्लेषण
उन्नत कैशिंग रणनीतियाँ
Suspense और लोडिंग अवस्थाओं के साथ UI स्ट्रीमिंग

← Next.js 15 फुलस्टैक (App Router + Server Actions) पर वापस जाएँ