Режимы предрендеринга в Next.js

1️⃣ Как кратко ответить

Next.js поддерживает два режима предрендеринга: Static Generation (SG) и Server-Side Rendering (SSR). Static Generation генерирует HTML на этапе сборки, а Server-Side Rendering — на каждом запросе. Выбор режима зависит от требований к обновлению данных и производительности.

2️⃣ Подробное объяснение темы

Next.js — это фреймворк для React, который предоставляет мощные возможности для предрендеринга страниц. Предрендеринг — это процесс генерации HTML-кода страницы до того, как он будет отправлен клиенту. Это улучшает производительность и SEO, так как поисковые системы и пользователи получают готовый HTML.

Static Generation (SG)

Static Generation — это режим, при котором HTML-страницы генерируются на этапе сборки приложения. Это означает, что HTML создается один раз и сохраняется на сервере, откуда он будет раздаваться всем пользователям.

Преимущества Static Generation:

• Высокая производительность: Поскольку HTML уже сгенерирован, серверу не нужно выполнять дополнительные вычисления при каждом запросе.
• SEO: Поисковые системы получают готовый HTML, что улучшает индексацию.
• Кэширование: Статические файлы легко кэшируются, что дополнительно ускоряет доставку контента.

Пример использования Static Generation:

// pages/index.js
​
export async function getStaticProps() {
  // Получение данных на этапе сборки
  const data = await fetchDataFromAPI();
​
  return {
    props: {
      data, // Передача данных в компонент
    },
  };
}
​
function HomePage({ data }) {
  // Использование данных в компоненте
  return (
    <div>
      <h1>Статическая страница</h1>
      <p>{data.content}</p>
    </div>
  );
}
​
export default HomePage;

• getStaticProps: Функция, которая выполняется на этапе сборки и возвращает данные для страницы.
• props: Данные, передаваемые в компонент для рендеринга.

Server-Side Rendering (SSR)

Server-Side Rendering — это режим, при котором HTML генерируется на сервере при каждом запросе. Это позволяет всегда предоставлять актуальные данные.

Преимущества Server-Side Rendering:

• Актуальность данных: HTML генерируется на каждый запрос, что позволяет отображать самые свежие данные.
• Поддержка динамических данных: Подходит для страниц, где данные часто меняются.

Пример использования Server-Side Rendering:

// pages/index.js
​
export async function getServerSideProps() {
  // Получение данных на сервере при каждом запросе
  const data = await fetchDataFromAPI();
​
  return {
    props: {
      data, // Передача данных в компонент
    },
  };
}
​
function HomePage({ data }) {
  // Использование данных в компоненте
  return (
    <div>
      <h1>Динамическая страница</h1>
      <p>{data.content}</p>
    </div>
  );
}
​
export default HomePage;

• getServerSideProps: Функция, которая выполняется на сервере при каждом запросе и возвращает данные для страницы.
• props: Данные, передаваемые в компонент для рендеринга.

Выбор режима предрендеринга

Выбор между Static Generation и Server-Side Rendering зависит от требований вашего проекта:

• Используйте Static Generation для страниц, которые не требуют частого обновления данных и могут быть сгенерированы заранее.
• Используйте Server-Side Rendering для страниц, где данные должны быть актуальными на момент запроса, например, для страниц с пользовательскими данными или часто обновляемыми новостями.

Оба режима могут использоваться в одном приложении Next.js, что позволяет гибко подходить к разработке и оптимизации производительности.