Эти термины важны для понимания того, как веб-приложения доставляются до клиентов.
1. SSR (Server-Side Rendering)
Когда пользователь запрашивает страницу, сервер генерирует HTML и отправляет всю страницу браузеру. После этого браузер сразу же отображает страницу, а файлы JavaScript и CSS загружаются и выполняются. SSR известен своими SEO-преимуществами, поскольку поисковые системы могут легко просматривать и индексировать HTML-содержимое.
2. CSR (Client-Side Rendering)
Когда пользователь запрашивает страницу, сервер посылает минимальную HTML-страницу вместе с файлами JavaScript и CSS. Браузер загружает эти файлы и выполняет JavaScript, который в свою очередь получает данные и формирует содержимое. CSR обеспечивает более интерактивное взаимодействие с пользователем, но может привести к замедлению открытия страниц (особенно первоначального) и SEO-проблемам.
3. ISR (Incremental Static Regeneration)
Это гибридный подход, сочетающий в себе преимущества SSR и SSG. Он позволяет частично регенерировать статические страницы во время сборки и во время выполнения.
В процессе сборки некоторые страницы предварительно отображаются как статический HTML, а другие помечаются как "неактуальные". Когда пользователь запрашивает "неактуальную" страницу, сервер регенерирует ее «на лету» и кэширует результат для последующих запросов. ISR обеспечивает баланс между производительностью и интерактивностью, что позволяет использовать его для динамических, но часто посещаемых страниц.
4. SSG (Static Site Generation)
Это технология, при которой веб-страницы генерируются во время сборки и предоставляются в виде обычных HTML-файлов.
В процессе сборки все страницы предварительно компилируются в виде статических HTML-файлов, включая все данные, которые могут быть известны на момент сборки. Когда пользователь запрашивает страницу, сервер просто предоставляет ему предварительно созданный HTML-файл.
SSG обеспечивает отличную производительность, масштабируемость и безопасность, но может не подойти для высокодинамичного контента.
Когда следует использовать каждый из подходов
SSR
SSR используется в тех случаях, когда SEO имеет решающее значение и необходимо как можно быстрее предоставить контент пользователям. Это идеальный вариант для интернет-магазинов и контент-платформ.
CSR
Используйте CSR, если вам нужны высокоинтерактивные и динамичные веб-приложения. Он отлично подходит для одностраничных приложений или их частей, которые не должны индексироваться поисковыми системами: личные кабинеты и внутренние корпоративные порталы.
ISR
Выбирайте ISR, если вам нужен баланс между производительностью и обновлением данных в реальном времени.
SSG
Выбирайте SSG, если содержимое сайта меняется редко и важна производительность. Он идеально подходит для блогов, сайтов документации и маркетинговых страниц.
Как реализовать SSR, ISR, SSG
В разработке классических SPA с их CSR-подходом всё примерно устоялось и рынок заняли известные фреймворки и библиотеки: React, Vue.js, Angular, ванильный JavaScript и так далее.
Реализовать SSR, ISR и SSG можно тоже огромным количеством способов, зависит лишь от фантазии. Но и тут есть свои мейнстримные инструменты: Next.js, Nuxt.js, SvelteKit, Gatsby, Quasar.