Suspense మరియు React.lazy కోడ్ విభజనకు ఎలా పనిచేస్తాయి?

Question

Accepted Answer

**`React.lazy`** ఒక సంఘટక యొక్క JavaScript బండిల్‌ను **on demand** (మొదటిసారిగా రెండర్ చేసినప్పుడు మాత్రమే) లోడ్ చేస్తుంది. **`Suspense`** ఏదైనా lazy (లేదా data-suspending) చైల్డ్ ఇంకా లోడ్ అవుతున్నప్పుడు ఫాల్‌బ్యాక్ UI చూపుతుంది. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## ఇది ఎందుకు ముఖ్యమైనది: చిన్న ప్రారంభ లోడ్ కోడ్ విభజన లేకుండా, బ్రౌజర్ ఏదైనా చూపించే ముందు మీ **మొత్తం** యాప్‌ను (భారీ చార్టింగ్ లైబ్రరీ సహా) డౌన్‌లోడ్ చేస్తుంది. `lazy` తో, `Chart` యొక్క కోడ్ దాని స్వంత ఫైల్‌లో విభజించబడింది మరియు వినియోగదారు వాస్తవానికి దానిని చేరుకున్నప్పుడు మాత్రమే సంగ్రహించబడుతుంది — ప్రారంభ లోడ్ సమయం మరియు Core Web Vitals ను మెరుగుపరుస్తుంది. ## Suspense ఎలా సమన్వయం చేస్తుంది `Chart` సస్పెండ్ చేయబడినప్పుడు (దాని బండిల్ సిద్ధంగా లేనప్పుడు), React ట్రీ యొక్క ఆ భాగాన్ని "పాజ్" చేయి మరియు సమీప `Suspense` ఫాల్‌బ్యాక్‌ను రెండర్ చేస్తుంది, ఆ తర్వాత లోడ్ చేయబడిన తర్వాత నిజమైన సంఘటనను భర్తీ చేస్తుంది. ఒకే సరిహద్దు అనేక lazy చిల్డ్రెన్‌ను చుట్టుముట్టవచ్చు మరియు ఒక ఫాల్‌బ్యాక్ చూపవచ్చు: ```jsx }>

``` ## కోడ్ విభజనకు అతీతంగా Suspense ఇంకా **డేటా లోడింగ్**ను సమన్వయం చేస్తుంది రూపకర్మలు/లైబ్రరీలతో "సస్పెండ్" ఒక పెండింగ ఫెచ్ కోసం, మరియు **స్ట్రీమింగ్ SSR** (Next.js App Router) తో జతచేస్తుంది వేగవంతమైన షెల్‌ను పంపడానికి మరియు నెమ్మదిగా ఉన్న భాగాలను స్ట్రీమ్ చేయడానికి. సరిహద్దులను జాగ్రత్తగా ఉంచండి దీర్ఘమైన, కంపించే లేఅవుట్ మార్పులను కోసం నివారించడానికి కంటెంట్ పాప్ చేసినప్పుడు.