Как работает механизм генерации HTML страницы из Next.js в React

Next.js использует два основных метода генерации HTML: Static Generation (SSG) и Server-Side Rendering (SSR).

1. Static Generation (SSG) – HTML генерируется на этапе сборки (next build). Подходит для страниц, контент которых не меняется часто.
   Пример:
   jsx

   Копировать

   export async function getStaticProps() {
     const res = await fetch('https://api.example.com/data');
     const data = await res.json();
     return { props: { data } };
   }

2. Server-Side Rendering (SSR) – HTML генерируется при каждом запросе (getServerSideProps). Используется для динамических данных.
   Пример:
   jsx

   Копировать

   export async function getServerSideProps() {
     const res = await fetch('https://api.example.com/dynamic-data');
     const data = await res.json();
     return { props: { data } };
   }

Также есть Incremental Static Regeneration (ISR), позволяющий обновлять статический контент без пересборки.

После генерации HTML React гидратирует страницу на клиенте, добавляя интерактивность.