Cad a sholáthraíonn Angular SSR (Universal)?

Question

Accepted Answer

Rendríonn **Angular SSR** (ar a dtugtar Angular Universal go stairiúil) HTML do app ar an **bhfreastalaí** don iarratas tosaigh, in ionad go síolraítear leathanach folamh a chaithfidh an brabhsálaí a líonadh le JavaScript. Feabhsaíonn sé seo an SEO, feidhmíochta mothaithe, agus an chéad phéint. ## Cén fáth a bhfuil sé tábhachtach ```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 ``` Le SSR, soláthraíonn an freastalaí HTML iomlán ionas go bhfaigheann úsáideoirí agus inneall cuardaigh fíorábhar ar an toirt; ceanglaíonn Angular ansin na heisteanóirí imeachta (hidritú) chun a dhéanamh idirghníomhach. ## Ag socrú ```bash ng add @angular/ssr # adds server rendering to an existing app ``` Ceapann sé seo freastalaí Node/Express a rendríonn Angular ar an bhfreastalaí agus a sheirbhíonn an HTML réamh-dhréachtaithe. ## Cad a sholáthraíonn 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 ``` ## Hidritú — a sheachaint athrender ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` Athúsáideann **hidritú neamh-dhestróitheach** Angular nua-aimseartha an DOM a rendíodh ag an bhfreastalaí in ionad go dteilgfí air agus athrender — a sheachaint soilsiú agus feidhmíochta a fheabhsú. ## Gaolmhar: SSG (réamhdhréachtú) ```text SSR → render per request (dynamic content, always fresh) SSG → prerender pages at BUILD time (static, fastest) — good for content that rarely changes ``` Tacaíonn Angular freisin le **réamhdhréachtú** (SSG) bealaí ar an am tógála don soláthair is tapa ar bith de ábhar statach. ## Caibidlí ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## Cén fáth a bhfuil sé tábhachtach Do shuíomhanna iomlán-ábhair, e-tráchtáil, nó aon app áit a bhfuil **SEO agus fast first paint tábhachtach**, níl SPA Angular client-only go leor — faigheann inneall cuardaigh agus úsáideoirí leathanach folamh go dtí go bhfhorghníomhítear JS. Réitíonn SSR (le hidritú) seo trí HTML fíor a sheachadadh ar an toirt, agus téann SSG níos faide do ábhar statach. A bheith ar an eolas cathain a bhíonn SSR fiú a chasta a thuigean — agus an chuibheasacht API brabhsálaí — an geal dhírithe ailtireachta.