Что предоставляет 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 затем подключает прослушиватели событий (гидратация), чтобы сделать его интерактивным. ## Настройка ```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 ``` ## Гидратация — избежание повторной отрисовки ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` **Неразрушающая гидратация** современного Angular повторно использует 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 не достаточно — поисковые системы и пользователи получают пустую страницу, пока не выполнится JS. SSR (с гидратацией) решает это, предоставляя настоящий HTML сразу же, а SSG идет еще дальше для статического контента. Знание того, когда SSR стоит своей дополнительной сложности — и оговорок API браузера — это ключевое архитектурное решение.