Как настроить SSR (Server-Side Rendering) в Next.js. Базовый пример

Next.js — один из самых популярных фреймворков на базе React. Его ключевая особенность — возможность рендерить страницы не только на клиенте (как в чистом React), но и на сервере. Такой подход называется Server-Side Rendering (SSR). Он ускоряет загрузку приложения, улучшает SEO и повышает общий пользовательский опыт.

В этой статье разберём, что такое SSR, чем он отличается от статической генерации и как реализовать базовый пример на Next.js.

Что такое SSR и чем он отличается от SSG?

В React-приложениях обычно используется Client-Side Rendering (CSR) — то есть весь HTML генерируется на стороне клиента. Недостаток в том, что поисковые роботы и пользователи видят "пустую страницу" до того, как загрузятся JavaScript-бандлы.

SSR (Server-Side Rendering) решает эту проблему: при запросе к серверу страница генерируется заранее и отправляется клиенту уже в виде готового HTML. Это улучшает:

• SEO — поисковые системы видят полный контент;
• скорость загрузки — пользователи быстрее получают первый meaningful paint;
• динамику данных — страница рендерится с актуальными данными при каждом запросе.

Для сравнения:

• SSG (Static Site Generation) — страница генерируется один раз на этапе сборки и отдаётся из кеша (например, блог или документация).
• SSR — страница собирается при каждом запросе (например, личный кабинет или динамический каталог товаров).

Гидрация (Hydration) — как SSR превращается в интерактивное приложение

Когда Next.js отдает страницу через SSR или SSG, браузер получает готовый HTML. Пользователь сразу видит контент, но он пока не интерактивный — кнопки, формы и динамические элементы ещё не работают.

Чтобы «оживить» страницу, браузер загружает JavaScript-бандл React и выполняет процесс гидрации (hydration):

• React «привязывается» к уже готовому HTML,
• восстанавливает состояние компонентов,
• и страница становится полноценным SPA-приложением.

Таким образом, гидрация — это мост между рендерингом на сервере и интерактивностью на клиенте.

Как работает SSR в Next.js

В Next.js SSR реализован через функцию getServerSideProps. Она выполняется на сервере при каждом запросе к странице и возвращает данные в виде props для компонента.

Простейший пример:

// pages/index.js
export default function Home({ time }) {
  return (
    <div style={{ padding: "20px", fontFamily: "sans-serif" }}>
      <h1>Пример SSR в Next.js</h1>
      <p>Серверное время: {time}</p>
    </div>
  );
}
 
export async function getServerSideProps() {
  return {
    props: {
      time: new Date().toLocaleString(),
    },
  };
}

Если обновить страницу в браузере, время будет меняться. Это значит, что данные приходят с сервера при каждом запросе, а не только на клиенте.

SSR с «моковыми» данными

Представим, что у нас есть база статей или список пользователей. В реальном проекте данные приходят из БД, но для примера можно использовать обычный массив.

// pages/users.js
const mockUsers = [
  { id: 1, name: "Алексей", role: "Администратор" },
  { id: 2, name: "Мария", role: "Редактор" },
  { id: 3, name: "Иван", role: "Пользователь" },
];
 
export default function Users({ users }) {
  return (
    <div style={{ padding: "20px", fontFamily: "sans-serif" }}>
      <h1>Список пользователей (SSR)</h1>
      <ul>
        {users.map((u) => (
          <li key={u.id}>
            {u.name} — <b>{u.role}</b>
          </li>
        ))}
      </ul>
    </div>
  );
}
 
export async function getServerSideProps() {
  // В реальном проекте здесь мог бы быть запрос к базе данных
  return { props: { users: mockUsers } };
}

Каждый раз при заходе на страницу список пользователей будет подгружаться с сервера, а не с клиента. Это базовый принцип SSR.

Что такое ISR

ISR (Incremental Static Regeneration) — это подход Next.js, который объединяет плюсы статической генерации (SSG) и динамического обновления.

• При первом билде страницы создаются статически.
• Когда пользователь делает запрос, Next.js проверяет, не устарела ли страница.
• Если прошло больше времени, чем указано в параметре revalidate, страница пересобирается в фоне, а пользователи продолжают видеть старую версию.
• Как только новая страница готова, последующие пользователи получают уже свежий вариант.

То есть ISR позволяет обновлять статические страницы без полного ребилда проекта, что удобно для каталогов товаров, новостных сайтов и блогов.

Сравнения подходов:

Итоги

• SSR в Next.js позволяет отдавать пользователю готовый HTML при каждом запросе.
• Это улучшает SEO и ускоряет первую загрузку страницы.
• Использовать getServerSideProps просто: данные подгружаются на сервере и передаются в компонент.
• В реальных проектах SSR стоит сочетать с другими подходами (SSG, ISR), чтобы балансировать между скоростью и нагрузкой.