React.lazy एक कम्पोनेन्टको JavaScript बन्डल अनुरोधमा लोड गर्छ (केवल जब यो पहिले रेन्डर हुन्छ)। Suspense कुनै पनि lazy (वा डेटा-सस्पेन्डिङ) चाइल्ड अझै लोड हुँदैको बेला फलब्याक UI देखाउँछ।
jsx
= .( ());
() {
(
);
}
React.lazy एक कम्पोनेन्टको JavaScript बन्डल अनुरोधमा लोड गर्छ (केवल जब यो पहिले रेन्डर हुन्छ)। Suspense कुनै पनि lazy (वा डेटा-सस्पेन्डिङ) चाइल्ड अझै लोड हुँदैको बेला फलब्याक UI देखाउँछ।
= .( ());
() {
(
);
}
कोड स्प्लिटिङ बिना, ब्राउजरले कुनै पनि कुरा देखाउनु अघि आपको सम्पूर्ण अ्याप (भारी चार्टिङ लाइब्रेरी सहित) डाउनलोड गर्छ। lazy को साथ, Chartको कोड यसको आफ्नै फाइलमा विभाजित हुन्छ र केवल तब फेच गरिन्छ जब उपयोगकर्ता वास्तवमा यसमा पुग्छन् — प्रारम्भिक लोड समय र Core Web Vitals सुधार गर्दै।
जब Chart suspend हुन्छ (यसको बन्डल तयार छैन), React त्यो पेडको भाग "रोक्छ" र सबैभन्दा नजिकको Suspense फलब्याक बदलमा रेन्डर गर्छ, त्यसपछि यो लोड भएपछि वास्तविक कम्पोनेन्टमा स्वैप गर्छ। एकल सीमा धेरै lazy बच्चाहरूलाई बेर्छ र एक फलब्याक देखाउँछ:
<Suspense fallback={<PageSkeleton />}>
<Header />
<LazyFeed />
<LazySidebar />
</Suspense>
Suspense ले डेटा लोडिङ को पनि सहअधिकार गर्छ फ्रेमवर्क/लाइब्रेरीहरूसँग जो लेन्डिङ फेचमा "suspend" गर्छन्, र स्ट्रिमिङ SSR सँग जोडीहरू (Next.js App Router) द्रुत शेल पठाउन र ढिलो भागहरू स्ट्रिम गर्न। सीमाहरू सोच्समझेर राख्नुहोस् ठूलो, झटकेको लेआउट शिफ्ट अनुसार सामग्री पप्प गर्न बचाउन।