У попередній статті ми обговорювали рендеринг в react.js, сьогодні ж ми поговоримо про рендеринг у next.js
Рендеринг у next.js можна поділити на кілька підходів, залежно від того, наскільки динамічний інтерфейс користувача та SEO потрібні.
- Статичний рендеринг:
a. Статичне генерація сторінок (SSG): HTML генерується під час побудови проєкту. Підходить для сторінок, які можна попередньо рендерити і дані яких не змінюються часто. Це SEO-дружній підхід.
b. Інкрементальне статичне регенерування (ISR): Має параметр для перевірки через певний час в секундах і підходить для контенту, який потребує періодичних оновлень.
- Динамічний рендеринг:
a. Серверний рендеринг (SSR): HTML для сторінки генерується під час запиту. Ідеально підходить для сторінок, які потребують свіжих даних при кожному запиті. Цей спосіб також SEO-дружній.
b. Рендеринг на стороні клієнта (CSR): JavaScript виконується в браузері для завантаження і рендерингу даних після початкового завантаження сторінки. Підходить для інтерактивних інтерфейсів. Цей спосіб не є дуже SEO-дружнім.
-
Гібридний рендеринг: Як видно з назви, цей підхід використовує різні способи рендерингу для різних сторінок додатку. Наприклад, SSG для сторінок блогів, SSR для панелей користувачів, CSR для перегляду, доступного тільки клієнтам.
-
API маршрути: API маршрути використовуються для отримання даних для CSR.
Коли використовувати кожен тип рендерингу
SEO потрібне, дані не змінюються часто: SSG або ISR
SEO потрібне, дані змінюються часто: SSR
Персоналізація або контент, специфічний для користувача: CSR або SSR
Статичний контент з періодичними оновленнями: ISR
Перекладено з: [Day 12 of 100 Days of Something to learn in Frontend](https://medium.com/@priyasharma_49934/day-12-of-100-days-of-something-to-learn-in-frontend-68d698c7fbf2)