SSR, SSG, ISR
Тема дорожной карты · Frontend разработчик
Стратегии рендеринга на frontend — SSR, SSG, ISR и CSR — определяют, когда и где генерируется HTML, напрямую влияя на производительность, SEO и Core Web Vitals. Server-Side Rendering (SSR) генерирует HTML на сервере при каждом запросе, отдавая браузеру полностью отрисованную разметку для быстрого First Contentful Paint и превосходного SEO; это режим по умолчанию в фреймворках Next.js (директория app/), Remix и Nuxt. Static Site Generation (SSG) пре-рендерит страницы во время сборки, создавая статический HTML для отдачи с CDN с минимальной задержкой — идеально для редко меняющегося контента, как в Astro и Next.js с getStaticProps. Incremental Static Regeneration (ISR), доступный в Next.js через revalidate, позволяет отдельным страницам перегенерироваться в фоне через заданный интервал без полной пересборки сайта, сочетая производительность SSG со свежестью SSR. Client-Side Rendering (CSR) гидрирует минимальную HTML-оболочку и рендерит интерфейс полностью в браузере через JavaScript — подходит для высокоинтерактивных приложений, но требует тщательного внимания к ленивой загрузке и разделению кода во избежание низких оценок Lighthouse.
Как это работает
SSR, SSG, ISR меряется Core Web Vitals: LCP (Largest Contentful Paint, цель < 2.5s), INP (Interaction to Next Paint, цель < 200ms), CLS (Cumulative Layout Shift, цель < 0.1). Инструменты: Chrome DevTools Performance + Lighthouse, WebPageTest, real-user monitoring (Sentry, web-vitals lib). Победы: минимизация JS-бандла (code split, tree shake), современные форматы (AVIF/WebP для картинок, woff2 для шрифтов), lazy-load below-the-fold, preconnect к API, CDN.
Когда применять
Оптимизируйте по реальным данным юзеров (RUM), не только lab-тестам на гигабитном wifi. Performance-бюджеты в CI (bundle-size-action); вальте PR при превышении. Performance — это фича: каждый квартал спринт на неё. Lighthouse < 80 на mobile = оставляете платящих юзеров за бортом.
Типичные ошибки
Ловушки SSR, SSG, ISR: оптимизация на "100 Lighthouse" без реальных юзеров (другие боттлнеки); preload всего ("preconnect/prefetch-шум" жрёт bandwidth); JS-тяжёлые "loading"-state маскируют реальный баг (большой бандл); анимация layout-затрагивающих свойств (используйте transform + opacity для дешёвого GPU compositing). Профилируйте на реальных mid-range mobile, не на M-series Mac.