Τι παρέχει το Angular SSR (Universal);

Question

Accepted Answer

**Angular SSR** (ιστορικά ονομάζεται Angular Universal) αποδίδει το HTML της εφαρμογής σας **στον server** για το αρχικό αίτημα, αντί να στέλνει μια κενή σελίδα που ο browser πρέπει να συμπληρώσει με JavaScript. Αυτό βελτιώνει το SEO, την αντιληπτή απόδοση και το πρώτο paint. ## Το πρόβλημα που λύνει το 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, ο server παράγει πλήρες HTML, έτσι ώστε οι χρήστες και οι μηχανές αναζήτησης να λαμβάνουν πραγματικό περιεχόμενο αμέσως. Το Angular στη συνέχεια προσαρτά τα event listeners (hydration) για να το κάνει διαδραστικό. ## Ρύθμιση ```bash ng add @angular/ssr # adds server rendering to an existing app ``` Αυτό δημιουργεί ένα Node/Express server που αποδίδει το Angular στον server και εξυπηρετεί το προ-αποδιδόμενο 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 ``` Το σύγχρονο Angular's **non-destructive hydration** επαναχρησιμοποιεί το server-rendered 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) ``` ## Γιατί έχει σημασία Για ιστότοπους με πολύ περιεχόμενο, e-commerce ή οποιαδήποτε εφαρμογή όπου το **SEO και το γρήγορο πρώτο paint έχουν σημασία**, ένα client-only Angular SPA είναι ανεπαρκές — οι μηχανές αναζήτησης και οι χρήστες λαμβάνουν μια κενή σελίδα έως ότου εκτελεστεί το JS. Το SSR (με hydration) το λύνει παρέχοντας πραγματικό HTML εκ των προτέρων, και το SSG πηγαίνει ακόμα πιο μακριά για στατικό περιεχόμενο. Το να γνωρίζετε πότε το SSR αξίζει την προστιθέμενη πολυπλοκότητά του — και τις προσοχές του browser API — είναι η κύρια αρχιτεκτονική κρίση.