M

MLOG

हिन्दी

कोड स्प्लिटिंग से परे डेटा फ़ेचिंग के लिए रिएक्ट सस्पेंस का अन्वेषण करें। Fetch-As-You-Render, त्रुटि प्रबंधन, और वैश्विक अनुप्रयोगों के लिए भविष्य-प्रूफ पैटर्न को समझें।

रिएक्ट सस्पेंस रिसोर्स लोडिंग: आधुनिक डेटा फ़ेचिंग पैटर्न में महारत हासिल करना

वेब डेवलपमेंट की गतिशील दुनिया में, उपयोगकर्ता अनुभव (UX) सर्वोपरि है। नेटवर्क की स्थितियों या डिवाइस की क्षमताओं के बावजूद, एप्लिकेशन से तेज़, उत्तरदायी और आनंददायक होने की उम्मीद की जाती है। रिएक्ट डेवलपर्स के लिए, इसका मतलब अक्सर जटिल स्टेट मैनेजमेंट, जटिल लोडिंग इंडिकेटर्स, और डेटा फ़ेचिंग वॉटरफॉल के खिलाफ एक निरंतर लड़ाई होती है। पेश है रिएक्ट सस्पेंस, एक शक्तिशाली, यद्यपि अक्सर गलत समझा जाने वाला फीचर, जिसे एसिंक्रोनस ऑपरेशंस, विशेष रूप से डेटा फ़ेचिंग को संभालने के तरीके को मौलिक रूप से बदलने के लिए डिज़ाइन किया गया है।

शुरू में React.lazy() के साथ कोड स्प्लिटिंग के लिए पेश किया गया, सस्पेंस की असली क्षमता *किसी भी* एसिंक्रोनस रिसोर्स को लोड करने के समन्वय में निहित है, जिसमें एपीआई से डेटा भी शामिल है। यह व्यापक गाइड रिसोर्स लोडिंग के लिए रिएक्ट सस्पेंस में गहराई से उतरेगा, इसके मुख्य कॉन्सेप्ट्स, मौलिक डेटा फ़ेचिंग पैटर्न, और प्रदर्शनकारी और लचीले वैश्विक एप्लिकेशन बनाने के लिए व्यावहारिक विचारों की खोज करेगा।

रिएक्ट में डेटा फ़ेचिंग का विकास: अनिवार्य से घोषणात्मक तक

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

सस्पेंस के बिना एक सामान्य डेटा फ़ेचिंग परिदृश्य पर विचार करें:

import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        setIsLoading(true);
        const response = await fetch(`/api/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        setError(e);
      } finally {
        setIsLoading(false);
      }
    };
    fetchUser();
  }, [userId]);

  if (isLoading) {
    return <p>Loading user profile...</p>;
  }

  if (error) {
    return <p style={"color: red;"}>Error: {error.message}</p>;
  }

  if (!user) {
    return <p>No user data available.</p>;
  }

  return (
    <div>
      <h2>User: {user.name}</h2>
      <p>Email: {user.email}</p>
      <!-- उपयोगकर्ता के और विवरण -->
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>Welcome to the Application</h1>
      <UserProfile userId={"123"} />
    </div>
  );
}

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

कोड स्प्लिटिंग से परे रिएक्ट सस्पेंस को समझना

अधिकांश डेवलपर्स पहली बार सस्पेंस का सामना React.lazy() के माध्यम से कोड स्प्लिटिंग के लिए करते हैं, जहाँ यह आपको एक कंपोनेंट के कोड को तब तक लोड करने में देरी करने की अनुमति देता है जब तक कि इसकी आवश्यकता न हो। उदाहरण के लिए:

import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./MyHeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading component...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

इस परिदृश्य में, यदि MyHeavyComponent अभी तक लोड नहीं हुआ है, तो <Suspense> बाउंड्री lazy() द्वारा फेंके गए प्रॉमिस को पकड़ लेगी और कंपोनेंट का कोड तैयार होने तक fallback दिखाएगी। यहाँ मुख्य अंतर्दृष्टि यह है कि सस्पेंस रेंडरिंग के दौरान फेंके गए प्रॉमिस को पकड़कर काम करता है।

यह तंत्र केवल कोड लोडिंग के लिए विशिष्ट नहीं है। रेंडरिंग के दौरान कॉल किया गया कोई भी फ़ंक्शन जो एक प्रॉमिस फेंकता है (उदाहरण के लिए, क्योंकि एक रिसोर्स अभी तक उपलब्ध नहीं है) कंपोनेंट ट्री में ऊपर एक सस्पेंस बाउंड्री द्वारा पकड़ा जा सकता है। जब प्रॉमिस हल हो जाता है, तो रिएक्ट कंपोनेंट को फिर से रेंडर करने का प्रयास करता है, और यदि रिसोर्स अब उपलब्ध है, तो फॉलबैक छिपा दिया जाता है, और वास्तविक सामग्री प्रदर्शित होती है।

डेटा फ़ेचिंग के लिए सस्पेंस की मूल अवधारणाएं

डेटा फ़ेचिंग के लिए सस्पेंस का लाभ उठाने के लिए, हमें कुछ मूल सिद्धांतों को समझने की आवश्यकता है:

1. एक प्रॉमिस फेंकना (Throwing a Promise)

पारंपरिक एसिंक्रोनस कोड के विपरीत जो प्रॉमिस को हल करने के लिए async/await का उपयोग करता है, सस्पेंस एक ऐसे फ़ंक्शन पर निर्भर करता है जो डेटा तैयार न होने पर एक प्रॉमिस *फेंकता* है। जब रिएक्ट ऐसे फ़ंक्शन को कॉल करने वाले कंपोनेंट को रेंडर करने का प्रयास करता है, और डेटा अभी भी पेंडिंग है, तो प्रॉमिस फेंक दिया जाता है। रिएक्ट तब उस कंपोनेंट और उसके बच्चों के रेंडरिंग को 'रोक' देता है, और निकटतम <Suspense> बाउंड्री की तलाश करता है।

2. सस्पेंस बाउंड्री

<Suspense> कंपोनेंट प्रॉमिस के लिए एक एरर बाउंड्री के रूप में कार्य करता है। यह एक fallback प्रॉप लेता है, जो कि वह UI है जिसे तब रेंडर करना है जब इसके कोई भी बच्चे (या उनके वंशज) सस्पेंड हो रहे हों (यानी, एक प्रॉमिस फेंक रहे हों)। एक बार जब इसके सबट्री के भीतर फेंके गए सभी प्रॉमिस हल हो जाते हैं, तो फॉलबैक को वास्तविक सामग्री से बदल दिया जाता है।

एक एकल सस्पेंस बाउंड्री कई एसिंक्रोनस ऑपरेशनों का प्रबंधन कर सकती है। उदाहरण के लिए, यदि आपके पास एक ही <Suspense> बाउंड्री के भीतर दो कंपोनेंट हैं, और प्रत्येक को डेटा फ़ेच करने की आवश्यकता है, तो फॉलबैक तब तक प्रदर्शित होगा जब तक *दोनों* डेटा फ़ेच पूरे नहीं हो जाते। यह आंशिक UI दिखाने से बचाता है और एक अधिक समन्वित लोडिंग अनुभव प्रदान करता है।

3. कैश/रिसोर्स मैनेजर (यूजरलैंड की जिम्मेदारी)

महत्वपूर्ण रूप से, सस्पेंस स्वयं डेटा फ़ेचिंग या कैशिंग को नहीं संभालता है। यह केवल एक समन्वय तंत्र है। डेटा फ़ेचिंग के लिए सस्पेंस को काम करने के लिए, आपको एक परत की आवश्यकता है जो:

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

4. कॉन्करेंट मोड (रिएक्ट 18 के सुधार)

हालांकि सस्पेंस का उपयोग रिएक्ट के पुराने संस्करणों में किया जा सकता है, इसकी पूरी शक्ति कॉन्करेंट रिएक्ट (रिएक्ट 18 में createRoot के साथ डिफ़ॉल्ट रूप से सक्षम) के साथ उजागर होती है। कॉन्करेंट मोड रिएक्ट को रेंडरिंग कार्य को बाधित करने, रोकने और फिर से शुरू करने की अनुमति देता है। इसका मतलब है:

सस्पेंस के साथ डेटा फ़ेचिंग पैटर्न

आइए सस्पेंस के आगमन के साथ डेटा फ़ेचिंग पैटर्न के विकास का पता लगाएं।

पैटर्न 1: फ़ेच-देन-रेंडर (पारंपरिक सस्पेंस रैपिंग के साथ)

यह क्लासिक दृष्टिकोण है जहाँ डेटा फ़ेच किया जाता है, और उसके बाद ही कंपोनेंट रेंडर किया जाता है। डेटा के लिए सीधे 'थ्रो प्रॉमिस' तंत्र का लाभ न उठाते हुए, आप एक ऐसे कंपोनेंट को सस्पेंस बाउंड्री में लपेट सकते हैं जो *अंततः* डेटा रेंडर करता है ताकि एक फॉलबैक प्रदान किया जा सके। यह सस्पेंस को एक सामान्य लोडिंग UI ऑर्केस्ट्रेटर के रूप में उपयोग करने के बारे में अधिक है जो अंततः तैयार हो जाते हैं, भले ही उनका आंतरिक डेटा फ़ेचिंग अभी भी पारंपरिक useEffect आधारित हो।

import React, { Suspense, useState, useEffect } from 'react';

function UserDetails({ userId }) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchUserData = async () => {
      setIsLoading(true);
      const res = await fetch(`/api/users/${userId}`);
      const data = await res.json();
      setUser(data);
      setIsLoading(false);
    };
    fetchUserData();
  }, [userId]);

  if (isLoading) {
    return <p>Loading user details...</p>;
  }

  return (
    <div>
      <h3>User: {user.name}</h3>
      <p>Email: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>Fetch-Then-Render Example</h1>
      <Suspense fallback={<div>Overall page loading...</div>}>
        <UserDetails userId={"1"} />
      </Suspense>
    </div>
  );
}

फायदे: समझने में सरल, पिछड़ा संगत। एक वैश्विक लोडिंग स्टेट जोड़ने के लिए एक त्वरित तरीके के रूप में इस्तेमाल किया जा सकता है।

नुकसान: UserDetails के अंदर बॉयलरप्लेट को खत्म नहीं करता है। यदि कंपोनेंट क्रमिक रूप से डेटा फ़ेच करते हैं तो अभी भी वॉटरफॉल की संभावना है। डेटा के लिए सस्पेंस के 'थ्रो-एंड-कैच' तंत्र का सही मायने में लाभ नहीं उठाता है।

पैटर्न 2: रेंडर-देन-फ़ेच (रेंडर के अंदर फ़ेचिंग, उत्पादन के लिए नहीं)

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

// उत्पादन में इसका उपयोग एक उचित कैशिंग परत के बिना न करें
// यह केवल इस बात का चित्रण है कि एक सीधा 'थ्रो' वैचारिक रूप से कैसे काम कर सकता है।

let fetchedData = null;
let dataPromise = null;

function fetchDataSynchronously(url) {
  if (fetchedData) {
    return fetchedData;
  }

  if (!dataPromise) {
    dataPromise = fetch(url)
      .then(res => res.json())
      .then(data => { fetchedData = data; dataPromise = null; return data; })
      .catch(err => { dataPromise = null; throw err; });
  }
  throw dataPromise; // यहीं पर सस्पेंस काम आता है
}

function UserDetailsBadExample({ userId }) {
  const user = fetchDataSynchronously(`/api/users/${userId}`);
  return (
    <div>
      <h3>User: {user.name}</h3>
      <p>Email: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>Render-Then-Fetch (Illustrative, NOT Recommended Directly)</h1>
      <Suspense fallback={<div>Loading user...</div>}>
        <UserDetailsBadExample userId={"2"} />
      </Suspense>
    </div>
  );
}

फायदे: दिखाता है कि कैसे एक कंपोनेंट सीधे डेटा के लिए 'पूछ' सकता है और यदि तैयार नहीं है तो सस्पेंड हो सकता है।

नुकसान: उत्पादन के लिए अत्यधिक समस्याग्रस्त। यह मैन्युअल, वैश्विक fetchedData और dataPromise प्रणाली सरल है, कई अनुरोधों, अमान्यकरण, या त्रुटि स्थितियों को मजबूती से नहीं संभालती है। यह 'थ्रो-ए-प्रॉमिस' अवधारणा का एक आदिम चित्रण है, न कि अपनाने के लिए एक पैटर्न।

पैटर्न 3: फ़ेच-एज़-यू-रेंडर (आदर्श सस्पेंस पैटर्न)

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

फ़ेच-एज़-यू-रेंडर को लागू करने के लिए, आपको एक तंत्र की आवश्यकता है:

  1. कंपोनेंट के रेंडर फ़ंक्शन के बाहर डेटा फ़ेच शुरू करने के लिए (जैसे, जब एक रूट में प्रवेश किया जाता है, या एक बटन पर क्लिक किया जाता है)।
  2. प्रॉमिस या हल किए गए डेटा को कैश में संग्रहीत करने के लिए।
  3. कंपोनेंट्स को इस कैश से 'पढ़ने' का एक तरीका प्रदान करने के लिए। यदि डेटा अभी तक उपलब्ध नहीं है, तो रीड फ़ंक्शन लंबित प्रॉमिस को फेंकता है।

यह पैटर्न वॉटरफॉल की समस्या का समाधान करता है। यदि दो अलग-अलग कंपोनेंट्स को डेटा की आवश्यकता है, तो उनके अनुरोध समानांतर में शुरू किए जा सकते हैं, और UI तभी दिखाई देगा जब *दोनों* तैयार हों, जो एक ही सस्पेंस बाउंड्री द्वारा समन्वित हो।

मैन्युअल कार्यान्वयन (समझने के लिए)

अंतर्निहित यांत्रिकी को समझने के लिए, आइए एक सरलीकृत मैन्युअल रिसोर्स मैनेजर बनाएं। एक वास्तविक एप्लिकेशन में, आप एक समर्पित लाइब्रेरी का उपयोग करेंगे।

import React, { Suspense } from 'react';

// --- सिंपल कैश/रिसोर्स मैनेजर --- //
const cache = new Map();

function createResource(promise) {
  let status = 'pending';
  let result;
  let suspender = promise.then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      } else if (status === 'success') {
        return result;
      }
    },
  };
}

function fetchData(key, fetcher) {
  if (!cache.has(key)) {
    cache.set(key, createResource(fetcher()));
  }
  return cache.get(key);
}

// --- डेटा फ़ेचिंग फ़ंक्शंस --- //
const fetchUserById = (id) => {
  console.log(`Fetching user ${id}...`);
  return new Promise(resolve => setTimeout(() => {
    const users = {
      '1': { id: '1', name: 'Alice Smith', email: 'alice@example.com' },
      '2': { id: '2', name: 'Bob Johnson', email: 'bob@example.com' },
      '3': { id: '3', name: 'Charlie Brown', email: 'charlie@example.com' }
    };
    resolve(users[id]);
  }, 1500));
};

const fetchPostsByUserId = (userId) => {
  console.log(`Fetching posts for user ${userId}...`);
  return new Promise(resolve => setTimeout(() => {
    const posts = {
      '1': [{ id: 'p1', title: 'My First Post' }, { id: 'p2', title: 'Travel Adventures' }],
      '2': [{ id: 'p3', title: 'Coding Insights' }],
      '3': [{ id: 'p4', title: 'Global Trends' }, { id: 'p5', title: 'Local Cuisine' }]
    };
    resolve(posts[userId] || []);
  }, 2000));
};

// --- कंपोनेंट्स --- //
function UserProfile({ userId }) {
  const userResource = fetchData(`user-${userId}`, () => fetchUserById(userId));
  const user = userResource.read(); // यह सस्पेंड हो जाएगा यदि उपयोगकर्ता डेटा तैयार नहीं है

  return (
    <div>
      <h3>User: {user.name}</h3>
      <p>Email: {user.email}</p>
    </div>
  );
}

function UserPosts({ userId }) {
  const postsResource = fetchData(`posts-${userId}`, () => fetchPostsByUserId(userId));
  const posts = postsResource.read(); // यह सस्पेंड हो जाएगा यदि पोस्ट डेटा तैयार नहीं है

  return (
    <div>
      <h4>Posts by {userId}:</h4>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
        {posts.length === 0 && <li>No posts found.</li>}
      </ul>
    </div>
  );
}

// --- एप्लिकेशन --- //
let initialUserResource = null;
let initialPostsResource = null;

function prefetchDataForUser(userId) {
  initialUserResource = fetchData(`user-${userId}`, () => fetchUserById(userId));
  initialPostsResource = fetchData(`posts-${userId}`, () => fetchPostsByUserId(userId));
}

// App कंपोनेंट के रेंडर होने से पहले ही कुछ डेटा प्री-फ़ेच करें
prefetchDataForUser('1');

function App() {
  return (
    <div>
      <h1>Fetch-As-You-Render with Suspense</h1>
      <p>यह दर्शाता है कि कैसे डेटा फ़ेचिंग समानांतर में हो सकती है, जो सस्पेंस द्वारा समन्वित है।</p>

      <Suspense fallback={<div>Loading user profile and posts...</div>}>
        <UserProfile userId={"1"} />
        <UserPosts userId={"1"} />
      </Suspense>

      <h2>Another Section</h2>
      <Suspense fallback={<div>Loading different user...</div>}>
        <UserProfile userId={"2"} />
      </Suspense>
    </div>
  );
}

इस उदाहरण में:

फ़ेच-एज़-यू-रेंडर के लिए लाइब्रेरीज़

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

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

पैटर्न 4: सस्पेंस-अवेयर लाइब्रेरीज़ के साथ प्रीफ़ेचिंग

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

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

import React, { Suspense } from 'react';
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';

// मान लें कि ये आपके API कॉल हैं
const fetchProductById = async (id) => {
  console.log(`Fetching product ${id}...`);
  return new Promise(resolve => setTimeout(() => {
    const products = {
      'A001': { id: 'A001', name: 'Global Widget X', price: 29.99, description: 'A versatile widget for international use.' },
      'B002': { id: 'B002', name: 'Universal Gadget Y', price: 149.99, description: 'Cutting-edge gadget, loved worldwide.' },
    };
    resolve(products[id]);
  }, 1000));
};

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true, // डिफ़ॉल्ट रूप से सभी क्वेरीज़ के लिए सस्पेंस सक्षम करें
    },
  },
});

function ProductDetails({ productId }) {
  const { data: product } = useQuery({
    queryKey: ['product', productId],
    queryFn: () => fetchProductById(productId),
  });

  return (
    <div style={{"border": "1px solid #ccc", "padding": "15px", "margin": "10px 0"}}>
      <h3>{product.name}</h3>
      <p>Price: ${product.price.toFixed(2)}</p>
      <p>{product.description}</p>
    </div>
  );
}

function ProductList() {
  const handleProductHover = (productId) => {
    // जब उपयोगकर्ता किसी उत्पाद लिंक पर होवर करता है तो डेटा प्रीफ़ेच करें
    queryClient.prefetchQuery({
      queryKey: ['product', productId],
      queryFn: () => fetchProductById(productId),
    });
    console.log(`Prefetching product ${productId}`);
  };

  return (
    <div>
      <h2>Available Products:</h2>
      <ul>
        <li>
          <a href="#" onMouseEnter={() => handleProductHover('A001')}
             onClick={(e) => { e.preventDefault(); /* नेविगेट करें या विवरण दिखाएं */ }}
          >Global Widget X (A001)</a>
        </li>
        <li>
          <a href="#" onMouseEnter={() => handleProductHover('B002')}
             onClick={(e) => { e.preventDefault(); /* नेविगेट करें या विवरण दिखाएं */ }}
          >Universal Gadget Y (B002)</a>
        </li>
      </ul>
      <p>प्रीफ़ेचिंग को क्रिया में देखने के लिए किसी उत्पाद लिंक पर होवर करें। निरीक्षण करने के लिए नेटवर्क टैब खोलें।</p>
    </div>
  );
}

function App() {
  const [showProductA, setShowProductA] = React.useState(false);
  const [showProductB, setShowProductB] = React.useState(false);

  return (
    <QueryClientProvider client={queryClient}>
      <h1>Prefetching with React Suspense (React Query)</h1>
      <ProductList />

      <button onClick={() => setShowProductA(true)}>Show Global Widget X</button>
      <button onClick={() => setShowProductB(true)}>Show Universal Gadget Y</button>

      {showProductA && (
        <Suspense fallback={<p>Loading Global Widget X...</p>}>
          <ProductDetails productId="A001" />
        </Suspense>
      )}
      {showProductB && (
        <Suspense fallback={<p>Loading Universal Gadget Y...</p>}>
          <ProductDetails productId="B002" />
        </Suspense>
      )}
    </QueryClientProvider>
  );
}

इस उदाहरण में, एक उत्पाद लिंक पर होवर करने से `queryClient.prefetchQuery` ट्रिगर होता है, जो पृष्ठभूमि में डेटा फ़ेच शुरू करता है। यदि उपयोगकर्ता फिर उत्पाद विवरण दिखाने के लिए बटन पर क्लिक करता है, और डेटा प्रीफ़ेच से पहले से ही कैश में है, तो कंपोनेंट बिना सस्पेंड हुए तुरंत रेंडर हो जाएगा। यदि प्रीफ़ेच अभी भी प्रगति पर है या शुरू नहीं किया गया था, तो सस्पेंस डेटा तैयार होने तक फॉलबैक प्रदर्शित करेगा।

सस्पेंस और एरर बाउंड्रीज़ के साथ त्रुटि प्रबंधन

जबकि सस्पेंस एक फॉलबैक प्रदर्शित करके 'लोडिंग' स्थिति को संभालता है, यह सीधे 'त्रुटि' स्थितियों को नहीं संभालता है। यदि एक सस्पेंडिंग कंपोनेंट द्वारा फेंका गया एक प्रॉमिस अस्वीकार हो जाता है (यानी, डेटा फ़ेचिंग विफल हो जाती है), तो यह त्रुटि कंपोनेंट ट्री में ऊपर की ओर प्रचारित होगी। इन त्रुटियों को शालीनता से संभालने और एक उपयुक्त UI प्रदर्शित करने के लिए, आपको एरर बाउंड्रीज़ का उपयोग करने की आवश्यकता है।

एक एरर बाउंड्री एक रिएक्ट कंपोनेंट है जो या तो componentDidCatch या static getDerivedStateFromError जीवनचक्र विधियों को लागू करता है। यह अपने चाइल्ड कंपोनेंट ट्री में कहीं भी जावास्क्रिप्ट त्रुटियों को पकड़ता है, जिसमें उन प्रॉमिस द्वारा फेंकी गई त्रुटियां भी शामिल हैं जिन्हें सस्पेंस सामान्य रूप से पकड़ लेता यदि वे लंबित होते।

import React, { Suspense, useState } from 'react';
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';

// --- एरर बाउंड्री कंपोनेंट --- //
class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    // स्टेट को अपडेट करें ताकि अगला रेंडर फॉलबैक UI दिखाए।
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    // आप त्रुटि को एक त्रुटि रिपोर्टिंग सेवा में भी लॉग कर सकते हैं
    console.error("Caught an error:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // आप कोई भी कस्टम फॉलबैक UI रेंडर कर सकते हैं
      return (
        <div style={{"border": "2px solid red", "padding": "20px", "margin": "20px 0", "background": "#ffe0e0"}}>
          <h2>Something went wrong!</h2>
          <p>{this.state.error && this.state.error.message}</p>
          <p>Please try refreshing the page or contact support.</p>
          <button onClick={() => this.setState({ hasError: false, error: null })}>Try Again</button>
        </div>
      );
    }
    return this.props.children;
  }
}

// --- डेटा फ़ेचिंग (त्रुटि की संभावना के साथ) --- //
const fetchItemById = async (id) => {
  console.log(`Attempting to fetch item ${id}...`);
  return new Promise((resolve, reject) => setTimeout(() => {
    if (id === 'error-item') {
      reject(new Error('Failed to load item: Network unreachable or item not found.'));
    } else if (id === 'slow-item') {
      resolve({ id: 'slow-item', name: 'Delivered Slowly', data: 'This item took a while but arrived!', status: 'success' });
    } else {
      resolve({ id, name: `Item ${id}`, data: `Data for item ${id}` });
    }
  }, id === 'slow-item' ? 3000 : 800));
};

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true,
      retry: false, // प्रदर्शन के लिए, पुनः प्रयास को अक्षम करें ताकि त्रुटि तत्काल हो
    },
  },
});

function DisplayItem({ itemId }) {
  const { data: item } = useQuery({
    queryKey: ['item', itemId],
    queryFn: () => fetchItemById(itemId),
  });

  return (
    <div>
      <h3>Item Details:</h3>
      <p>ID: {item.id}</p>
      <p>Name: {item.name}</p>
      <p>Data: {item.data}</p>
    </div>
  );
}

function App() {
  const [fetchType, setFetchType] = useState('normal-item');

  return (
    <QueryClientProvider client={queryClient}>
      <h1>Suspense and Error Boundaries</h1>

      <div>
        <button onClick={() => setFetchType('normal-item')}>Fetch Normal Item</button>
        <button onClick={() => setFetchType('slow-item')}>Fetch Slow Item</button>
        <button onClick={() => setFetchType('error-item')}>Fetch Error Item</button>
      </div>

      <MyErrorBoundary>
        <Suspense fallback={<p>Loading item via Suspense...</p>}>
          <DisplayItem itemId={fetchType} />
        </Suspense>
      </MyErrorBoundary>
    </QueryClientProvider>
  );
}

अपनी सस्पेंस बाउंड्री (या उन कंपोनेंट्स जो सस्पेंड हो सकते हैं) को एक एरर बाउंड्री के साथ लपेटकर, आप यह सुनिश्चित करते हैं कि डेटा फ़ेचिंग के दौरान नेटवर्क विफलताएं या सर्वर त्रुटियां पकड़ी जाती हैं और शालीनता से संभाली जाती हैं, जिससे पूरे एप्लिकेशन को क्रैश होने से बचाया जा सकता है। यह एक मजबूत और उपयोगकर्ता के अनुकूल अनुभव प्रदान करता है, जिससे उपयोगकर्ता समस्या को समझ सकते हैं और संभावित रूप से पुनः प्रयास कर सकते हैं।

सस्पेंस के साथ स्टेट मैनेजमेंट और डेटा इनवैलिडेशन

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

यहीं पर सस्पेंस-अवेयर डेटा फ़ेचिंग लाइब्रेरीज़ (React Query, SWR, Apollo Client, Relay) अपरिहार्य हो जाती हैं। वे सस्पेंस को पूरक बनाती हैं:

एक मजबूत डेटा फ़ेचिंग लाइब्रेरी के बिना, इन सुविधाओं को एक मैन्युअल सस्पेंस रिसोर्स मैनेजर के ऊपर लागू करना एक महत्वपूर्ण उपक्रम होगा, जिसके लिए अनिवार्य रूप से आपको अपना स्वयं का डेटा फ़ेचिंग फ्रेमवर्क बनाना होगा।

व्यावहारिक विचार और सर्वोत्तम अभ्यास

डेटा फ़ेचिंग के लिए सस्पेंस को अपनाना एक महत्वपूर्ण वास्तुशिल्प निर्णय है। एक वैश्विक एप्लिकेशन के लिए यहां कुछ व्यावहारिक विचार दिए गए हैं:

1. सभी डेटा को सस्पेंस की आवश्यकता नहीं होती

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

2. सस्पेंस बाउंड्रीज़ की ग्रैन्युलैरिटी

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

<div>
  <h1>Product Page</h1>
  <Suspense fallback={<p>Loading main product details...</p>}>
    <ProductDetails id="prod123" />
  </Suspense>

  <hr />

  <h2>Related Products</h2>
  <Suspense fallback={<p>Loading related products...</p>}>
    <RelatedProducts category="electronics" />
  </Suspense>
</div>

इस दृष्टिकोण का मतलब है कि उपयोगकर्ता मुख्य उत्पाद विवरण देख सकते हैं, भले ही संबंधित उत्पाद अभी भी लोड हो रहे हों।

3. सर्वर-साइड रेंडरिंग (SSR) और स्ट्रीमिंग HTML

रिएक्ट 18 के नए स्ट्रीमिंग SSR API (renderToPipeableStream) सस्पेंस के साथ पूरी तरह से एकीकृत हैं। यह आपके सर्वर को HTML भेजने की अनुमति देता है जैसे ही यह तैयार हो जाता है, भले ही पृष्ठ के कुछ हिस्से (जैसे डेटा-निर्भर कंपोनेंट) अभी भी लोड हो रहे हों। सर्वर एक प्लेसहोल्डर (सस्पेंस फॉलबैक से) स्ट्रीम कर सकता है और फिर जब डेटा हल हो जाता है तो वास्तविक सामग्री को स्ट्रीम कर सकता है, बिना पूर्ण क्लाइंट-साइड री-रेंडर की आवश्यकता के। यह विविध नेटवर्क स्थितियों पर वैश्विक उपयोगकर्ताओं के लिए कथित लोडिंग प्रदर्शन में काफी सुधार करता है।

4. वृद्धिशील अपनाना (Incremental Adoption)

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

5. टूलिंग और डीबगिंग

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

6. सस्पेंस फॉलबैक के लिए टाइमआउट

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

रिएक्ट में डेटा फ़ेचिंग का भविष्य: रिएक्ट सर्वर कंपोनेंट्स और उससे आगे

रिएक्ट में डेटा फ़ेचिंग की यात्रा क्लाइंट-साइड सस्पेंस पर समाप्त नहीं होती है। रिएक्ट सर्वर कंपोनेंट्स (RSC) एक महत्वपूर्ण विकास का प्रतिनिधित्व करते हैं, जो क्लाइंट और सर्वर के बीच की रेखाओं को धुंधला करने और डेटा फ़ेचिंग को और अधिक अनुकूलित करने का वादा करते हैं।

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

निष्कर्ष

रिएक्ट सस्पेंस, शुरू में कोड स्प्लिटिंग के लिए एक सुविधा, डेटा फ़ेचिंग के लिए एक परिवर्तनकारी उपकरण के रूप में विकसित हुई है। Fetch-As-You-Render पैटर्न को अपनाकर और सस्पेंस-अवेयर लाइब्रेरीज़ का लाभ उठाकर, डेवलपर्स अपने एप्लिकेशन के उपयोगकर्ता अनुभव में काफी सुधार कर सकते हैं, लोडिंग वॉटरफॉल को समाप्त कर सकते हैं, कंपोनेंट लॉजिक को सरल बना सकते हैं, और सहज, समन्वित लोडिंग स्टेट्स प्रदान कर सकते हैं। मजबूत त्रुटि प्रबंधन के लिए एरर बाउंड्रीज़ और रिएक्ट सर्वर कंपोनेंट्स के भविष्य के वादे के साथ मिलकर, सस्पेंस हमें ऐसे एप्लिकेशन बनाने का अधिकार देता है जो न केवल प्रदर्शनकारी और लचीले हैं, बल्कि दुनिया भर के उपयोगकर्ताओं के लिए स्वाभाविक रूप से अधिक आनंददायक भी हैं। सस्पेंस-संचालित डेटा फ़ेचिंग प्रतिमान में बदलाव के लिए एक वैचारिक समायोजन की आवश्यकता है, लेकिन कोड स्पष्टता, प्रदर्शन और उपयोगकर्ता संतुष्टि के संदर्भ में लाभ पर्याप्त हैं और निवेश के लायक हैं।