Suspense ਅਤੇ React.lazy ਕੋਡ ਸਪਲਿਟਿੰਗ ਲਈ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ?

Question

Accepted Answer

**`React.lazy`** ਕਿਸੇ ਕੰਪੋਨੈਂਟ ਦੇ JavaScript ਬੰਡਲ ਨੂੰ **ਮੰਗ ਅਨੁਸਾਰ** ਲੋਡ ਕਰਦਾ ਹੈ (ਸਿਰਫ ਜਦੋਂ ਇਹ ਪਹਿਲਾਂ ਰੇਂਡਰ ਹੁੰਦਾ ਹੈ)। **`Suspense`** ਇੱਕ fallback UI ਦਿਖਾਉਂਦਾ ਹੈ ਜਦੋਂ ਕੋਈ lazy (ਜਾਂ data-suspending) ਬੱਚਾ ਅਜੇ ਲੋਡ ਹੋ ਰਿਹਾ ਹੁੰਦਾ ਹੈ। ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## ਇਹ ਕਿਉਂ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ: ਛੋਟਾ ਸ਼ੁਰੂਆਤੀ ਲੋਡ ਕੋਡ ਸਪਲਿਟਿੰਗ ਤੋਂ ਬਿਨਾ, ਬ੍ਰਾਊਜ਼ਰ ਆਪਣੇ **ਸਮੁੱਚੇ** ਐਪ ਨੂੰ ਡਾਉਨਲੋਡ ਕਰਦਾ ਹੈ (ਭਾਰੀ ਚਾਰਟਿੰਗ ਲਾਇਬ੍ਰੇਰੀ ਸਮੇਤ) ਕੁਝ ਵੀ ਦਿਖਾਉਣ ਤੋਂ ਪਹਿਲਾਂ। `lazy` ਨਾਲ, `Chart`'s ਕੋਡ ਆਪਣੀ ਖੁਦ ਦੀ ਫਾਈਲ ਵਿੱਚ ਵੰਡਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਸਿਰਫ ਉਦੋਂ ਲਿਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਯੂਜ਼ਰ ਅਸਲ ਵਿੱਚ ਇਸ ਤੱਕ ਪਹੁੰਚਦਾ ਹੈ — ਸ਼ੁਰੂਆਤੀ ਲੋਡ ਸਮੇਂ ਅਤੇ Core Web Vitals ਵਿੱਚ ਸੁਧਾਰ ਕਰਦਾ ਹੈ। ## Suspense ਇਸਨੂੰ ਕਿਵੇਂ ਕੋ-ਆਰਡੀਨੇਟ ਕਰਦਾ ਹੈ ਜਦੋਂ `Chart` suspend ਕਰਦਾ ਹੈ (ਇਸਦਾ bundle ਤਿਆਰ ਨਹੀਂ ਹੈ), React ਉਸ ਪਾਰਟ ਨੂੰ ਰੋਕਦਾ ਹੈ ਅਤੇ ਸਭ ਤੋਂ ਨਜ਼ਦੀਕੀ `Suspense` fallback ਨੂੰ ਬਦਲੇ ਵਿੱਚ ਰੇਂਡਰ ਕਰਦਾ ਹੈ, ਫਿਰ ਇਸ ਦੇ ਲੋਡ ਹੋਣ ਤੋਂ ਬਾਅਦ ਅਸਲ ਕੰਪੋਨੈਂਟ ਵਿੱਚ ਸਵੈਪ ਕਰਦਾ ਹੈ। ਇੱਕ ਸਿੰਗਲ ਬਾਊਂਡਰੀ ਕਈ lazy ਬੱਚੇ ਨੂੰ ਲਪੇਟ ਸਕਦੀ ਹੈ ਅਤੇ ਇੱਕ fallback ਦਿਖਾ ਸਕਦੀ ਹੈ: ```jsx }>

``` ## ਕੋਡ ਸਪਲਿਟਿੰਗ ਤੋਂ ਪਾਰ Suspense ਫ੍ਰੇਮਵਰਕਸ/ਲਾਇਬ੍ਰੇਰੀਜ ਨਾਲ **ਡਾਟਾ ਲੋਡਿੰਗ** ਨੂੰ ਵੀ ਕੋ-ਆਰਡੀਨੇਟ ਕਰਦਾ ਹੈ ਜੋ ਲੰਬਿਤ ਪ੍ਰਾਪਤੀ ਤੇ "suspend" ਕਰਦੀਆਂ ਹਨ, ਅਤੇ **streaming SSR** (Next.js App Router) ਨਾਲ ਜੋੜਾ ਜਾਂਦਾ ਹੈ ਤੇਜ਼ ਸ਼ੈੱਲ ਭੇਜਣ ਅਤੇ ਹੌਲੀ ਹਿੱਸੇ ਸਟ੍ਰੀਮ ਕਰਨ ਲਈ। ਬਾਊਂਡਰੀਜ ਨੂੰ ਸੋਚ-ਸਮਝ ਕੇ ਰੱਖੋ ਤਾਂਕਿ ਵੱਡੇ, ਝਾਰਵੀ ਲੇਆਉਟ ਸ਼ਿਫਟ ਤੋਂ ਬਚੀ ਰਹੇ ਜਦੋਂ ਸਮਗ੍ਰੀ ਪੋਪ ਹੁੰਦੀ ਹੈ।