Чем отличаются CSR, SSR, SSG и ISR?
- Когда нужен серверный рендеринг?
- Зачем Next.js?
CSR — сервер отдаёт пустую страницу и JS, всё рисует браузер: просто, но медленный первый показ и слабое SEO; подходит для личных кабинетов. SSR — HTML собирается на сервере на каждый запрос: быстрый первый показ и SEO, свежие данные, но нужен сервер и время на рендер. SSG — HTML собирается при сборке: максимально быстро и дёшево (CDN), но данные обновляются при пересборке. ISR — статические страницы пересобираются в фоне по таймеру или событию. Мета-фреймворки (Next.js, Nuxt, SvelteKit, Astro) позволяют выбирать режим по странице.
- Публичные страницы, важные для поиска, — SSG или SSR
- Личный кабинет — CSR вполне подходит
- SSR требует гидратации — JS всё равно загружается
Подробно
Пример: блог и каталог — SSG/ISR, страница товара с ценой и остатком — SSR или ISR с коротким интервалом, корзина и настройки — CSR.
Что хотят услышать
- Где и когда собирается HTML в каждом режиме.
- Плюсы и минусы.
- Выбор по типу страницы.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗CSR собирает HTML на сервере на каждый запрос, SSR рисует в браузере, SSG и ISR — при каждой сборке
- ✓CSR рисует в браузере, SSR — HTML на каждый запрос, SSG — при сборке, ISR — фоновая пересборка
- ✗SSG обновляет данные на каждый запрос пользователя, а ISR — только при деплое
- ✗SSR полностью избавляет от загрузки JavaScript на клиенте
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.