Работаю с NextJS? Когда использовать SSG, а когда SSR?

Question

[vovashaplin]

Делаю интернет магазин на NextJS с rest api через python. Есть:
- главная страница ( просто информативная);
- страница с товарами, пагинацией, сортировкой и поиском
- корзина
- страница с заполнением заказа
- страница смены данных пользователя
- регистрация и вход
- админ панель для изменения и добавления товаров
В каких случая использовать SSR (getServerSideProps) и SSG (getStaticProps и getStaticPaths)?

Answer 1

[vovashaplin]

Static - автоматическая генерация статики без данных ( просто html без данных из сервера )
SSG - автоматическая генерация статики и JSON с данными ( html с json, в который во время билда внеслись данные)
SSR - рендеринг на стороне сервера на момент перед показом страницы ( запрос на сервер -> приход данных -> показ страницы пользователю )

SSG ( getStaticProps и getStaticPaths ) нужен для показа страниц или страниц товаров лишь в том случае, если данные на этх страницах меняются не так часто, потому что нужно делать build каждый раз после смены данных на БД. Но данный способ очень быстрый.
Но если ваши данные меняются часто, вы или заказчик часто обновляете контент страниц и товаров, то на помощь придет SSR ( getServerSideProps ). Данный способ медленнее чем SSG, но быстрее чем дефолтный запрос на стороне клиента (SPA).

- главная страница ( просто информативная) Static или SSG
- страница с товарами, пагинацией, сортировкой и поиском SSR или SSG
- корзина SSR
- страница с заполнением заказа SSR
- страница смены данных пользователя SSR
- регистрация и вход SSR
- админ панель для изменения и добавления товаров SSR

Если есть поправки или думаете что я где-то не прав, пишите.

Comments

[andrewslywalker]

А почему корзина SSR? Я просто использую на проекте localStorage и делать корзину через SSR немного проблемно и как по мне не нужно.

[beDenz]

andrewslywalker, хорошая практика хранить карзину на беке

[vovashaplin]

Как юзать нехтЖс по кейсам, практический гайд:
1. Дашборды и админки - SSG + swr
2. Маркетинговые страницы - SSG
3. Блоги - SSG + getStaticPaths + deploy hooks
4. Некритичная динамика - SSG + fallback: blocking + deploy hooks
5. Критичная динамика / high page volume - SSR