data fetching के लिए Suspense कैसे काम करता है, और React 19 में आप उसे कैसे इस्तेमाल कर रहे हैं?

कोई component तब suspend होता है जब वह ऐसा promise पढ़ता है जो अभी पूरा नहीं हुआ। React सबसे नजदीकी Suspense boundary तक ऊपर जाता है, promise पूरा होने तक उसका fallback दिखाता है, फिर असली सामग्री render करता है। React 19 में promise को use hook से पढ़ा जाता है, जो आम तौर पर किसी Server Component या cache में बनकर नीचे भेजा जाता है। Suspense loading की हालत का तालमेल बिठाता है; वह खुद कुछ fetch नहीं करता।

Suspense तालमेल बिठाने की मशीन है, कोई data की परत नहीं। जब कोई component ऐसा promise पढ़ता है जो पूरा नहीं हुआ, तो वह suspend हो जाता है, React उसके ऊपर सबसे नजदीकी boundary ढूंढता है, उसका fallback render करता है, और promise पूरा होने पर subtree दोबारा चलाता है। React 19 में उसे पढ़ने का तरीका use hook है, और अहम नियम यह है कि promise उसी component के render के दौरान नहीं बनना चाहिए जो use बुला रहा है, वरना आप हर कोशिश में नया promise बना देते हैं और वह कभी पूरा ही नहीं होता। तो व्यवहार में promise किसी Server Component में शुरू होता है या किसी cache से निकलकर नीचे भेजा जाता है। server की तरफ यह streaming के साथ जुड़ता है: shell तुरंत बाहर चला जाता है, और धीमे हिस्से अपना data आते ही stream होकर आते हैं। boundary कहां रखनी है इसके लिए मैं सबसे छोटी वह चीज लपेटने की कोशिश करता हूं जिसके लिए user skeleton देखना बर्दाश्त कर लेगा, ताकि कोई धीमा recommendations वाला हिस्सा product के ब्योरे को न रोके। जाल है एक के बाद एक await करके waterfall बना देना, तो मैं आजाद fetches को await करने से पहले साथ में शुरू कर देता हूं।