რას უზრუნველყოფს 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 — re-render-ის არიდება ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` 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 გაფრთხობა — ის გასაკეთებელი არქიტექტურული განკითხვა.