Angular SSR (Universal) ਕੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ?

Question

Accepted Answer

**Angular SSR** (ਐਤਿਹਾਸਕ ਤੌਰ ਤੇ Angular Universal ਕਿਹਾ ਜਾਂਦਾ ਹੈ) ਆਪਣੀ ਐਪ ਦੀ HTML ਨੂੰ **ਸਰਵਰ ਤੇ** ਸ਼ੁਰੂਆਤੀ ਬੇਨਤੀ ਲਈ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ, ਇੱਕ ਖਾਲੀ ਪੰਨਾ ਭੇਜਣ ਦੀ ਜਗ੍ਹਾ ਜਿਸ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ JavaScript ਨਾਲ ਭਰਨਾ ਪੈਂਦਾ ਹੈ। ਇਹ SEO, ਮਾਨੀ ਕਾਰਕਸ਼ਮਤਾ ਅਤੇ ਪਹਿਲੀ ਪੇਅਿੰਟ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦਾ ਹੈ। ## SSR ਜੋ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਦਾ ਹੈ ```text Client-side rendering (default SPA): Server sends empty + JS bundle → browser downloads & runs Angular → THEN content appears → slow first paint; crawlers/social bots may see a blank page Server-side rendering: Server runs Angular, sends fully-rendered HTML → content visible immediately → Angular "hydrates" it for interactivity ``` SSR ਨਾਲ, ਸਰਵਰ ਪੂਰੀ HTML ਪੈਦਾ ਕਰਦਾ ਹੈ ਤਾਂ ਕਿ ਯੂਜ਼ਰ ਅਤੇ ਖੋਜ ਇੰਜਨ ਤੁਰੰਤ ਅਸਲ ਸਮੱਗਰੀ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ; Angular ਫਿਰ ਇਸਨੂੰ ਇੰਟਰਐਕਟਿਵ ਬਣਾਉਣ ਲਈ ਇਵੈਂਟ ਲਿਸਨਰ (hydration) ਜੋੜਦਾ ਹੈ। ## ਇਸਨੂੰ ਸੈੱਟ ਅਪ ਕਰਨਾ ```bash ng add @angular/ssr # adds server rendering to an existing app ``` ਇਹ ਇੱਕ Node/Express ਸਰਵਰ ਨੂੰ ਸਕੈਫੋਲਡ ਕਰਦਾ ਹੈ ਜੋ ਸਰਵਰ ਤੇ Angular ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ ਅਤੇ ਪੂਰਵ-ਪ੍ਰਦਰਸ਼ਿਤ HTML ਦੀ ਸੇਵਾ ਕਰਦਾ ਹੈ। ## SSR ਕੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ```text ✓ Better SEO — crawlers get full content (critical for content/marketing sites) ✓ Faster First Contentful Paint — visible content before JS loads ✓ Better social sharing — link previews see real meta tags/content ✓ Improved performance on slow devices/networks ``` ## Hydration — ਮੁੜ-ਪ੍ਰਦਰਸ਼ਨ ਤੋਂ ਬਚਣਾ ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` Modern Angular ਦੀ **non-destructive hydration** ਸਰਵਰ-ਪ੍ਰਦਰਸ਼ਿਤ DOM ਨੂੰ ਇਸਨੂੰ ਸੁੱਟਣ ਅਤੇ ਮੁੜ-ਪ੍ਰਦਰਸ਼ਨ ਕਰਨ ਦੀ ਬਜਾਏ ਮੁੜ ਵਰਤੋਂ ਕਰਦੀ ਹੈ — ਝਲਕਾਰਾ ਅਤੇ ਕਾਰਕਸ਼ਮਤਾ ਵਿੱਚ ਸੁਧਾਰ ਤੋਂ ਬਚਦੀ ਹੈ। ## ਸਬੰਧਤ: SSG (prerendering) ```text SSR → render per request (dynamic content, always fresh) SSG → prerender pages at BUILD time (static, fastest) — good for content that rarely changes ``` Angular ਸਥਿਤ ਸਮੱਗਰੀ ਦੀ ਸਭ ਤੋਂ ਤੇਜ਼ ਸੰਭਾਲ ਲਈ ਬਿਲਡ ਸਮੇਂ **prerendering** (SSG) ਮਾਰਗਾਂ ਦਾ ਵੀ ਸਮਰਥਨ ਕਰਦਾ ਹੈ। ## ਸਾਵਧਾਨੀਆਂ ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## ਇਹ ਕਿਉਂ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ ਸਮੱਗਰੀ-ਭਰੀ ਸਾਈਟਾਂ, ਈ-ਕਾਮਰਸ, ਜਾਂ ਕਿਸੇ ਵੀ ਐਪ ਲਈ ਜਿੱਥੇ **SEO ਅਤੇ ਤੇਜ਼ ਪਹਿਲੀ ਪੇਂਟ ਮਾਹਿਰ ਹਨ**, ਸਿਰਫ਼-ਕਲਾਇੰਟ Angular SPA ਨਾਕਾਫ਼ੀ ਆਉਂਦਾ ਹੈ — ਖੋਜ ਇੰਜਨ ਅਤੇ ਯੂਜ਼ਰ ਇੱਕ ਖਾਲੀ ਪੰਨਾ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ ਜਦ ਤੱਕ JS ਚੱਲਦਾ ਨਹੀਂ ਹੈ। SSR (hydration ਨਾਲ) ਇਸਨੂੰ ਤੁਰੰਤ ਅਸਲ HTML ਸੰਭਾਲ ਕੇ ਹੱਲ ਕਰਦਾ ਹੈ, ਅਤੇ SSG ਸਥਿਰ ਸਮੱਗਰੀ ਲਈ ਹੋਰ ਜਾਂਦਾ ਹੈ। ਜਾਣਨਾ ਕਿ SSR ਕਦੋਂ ਇਸਦੀ ਵਾਧੂ ਜਟਿਲਤਾ ਦੇ ਯੋਗ ਹੈ — ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ-API ਸਾਵਧਾਨੀਆਂ — ਮੁੱਖ ਆਰਕੀਟੈਕਚਰ ਨਿਰਣਾ ਹੈ।