Когда вы создаёте страницу в Next.js, вы должны понять: где она будет рендериться — на сервере, на клиенте или заранее при сборке. От этого зависит скорость, SEO, поведение, нагрузка на сервер и многое другое.

В Next.js есть три способа рендеринга:

SSR (Server-Side Rendering) — рендеринг на сервере при каждом запросе

Когда пользователь открывает страницу, Next.js собирает HTML прямо на сервере, каждый раз заново. Это значит: все данные загружаются заново, компоненты отрисовываются, и только потом страница отправляется в браузер.

Пользователь сразу получает готовый HTML с данными. Это хорошо для SEO и для отображения актуального контента.

Когда использовать SSR

• Данные часто обновляются — например, лента новостей, погода, курсы валют.
• Страница зависит от пользователя — личный кабинет, корзина, авторизация.
• Нужен SEO — например, публичная страница с актуальной информацией.

Как включить SSR в App Router (папка app/)

SSR включается автоматически, если:

• Вы используете fetch() с опцией { cache: ‘no-store’ }
• Или добавляете export const dynamic = ‘force-dynamic’

Обычно достаточно одного из этих вариантов.

Пример с комментариями

// app/news/page.js

// Это говорит Next.js, что страница не должна кэшироваться и должна собираться каждый раз
export const dynamic = 'force-dynamic';

export default async function NewsPage() {
  // Запрашиваем новости с внешнего API
  // cache: 'no-store' — отключаем кэш, чтобы всегда получать свежие данные
  const res = await fetch('https://api.example.com/news', { cache: 'no-store' });

  // Обработка ошибки, если API не отвечает (лучше добавлять в продакшене)
  if (!res.ok) {
    throw new Error('Не удалось загрузить новости');
  }

  // Преобразуем ответ в JSON (массив новостей)
  const news = await res.json();

  // Возвращаем JSX — HTML, который отрисуется на сервере и сразу попадёт в браузер
  return (
    <div>
      <h1>Новости</h1>
      <ul>
        {news.map((item) => (
          <li key={item.id}>{item.title}</li> // Выводим заголовок каждой новости
        ))}
      </ul>
    </div>
  );
}

Что важно знать

• SEO: Страница сразу содержит весь текст — отлично индексируется поисковиками.
• Актуальность: Данные всегда свежие, потому что загружаются заново при каждом запросе.
• Скорость: Рендер занимает чуть больше времени, чем SSG — нужно подождать ответа сервера.
• Нагрузка: При большом трафике сервер будет работать под нагрузкой, ведь рендеринг происходит каждый раз.

SSG (Static Site Generation) — генерация страниц при сборке

При SSG (статической генерации) Next.js генерирует HTML заранее, ещё до того, как пользователь зайдёт на сайт.

Когда вы запускаете команду npm run build, Next:

• Загружает нужные данные (например, список постов из API).
• Создаёт готовые HTML-файлы на основе этих данных.
• Сохраняет эти HTML-файлы и использует их при обращении пользователя к странице.

Когда человек открывает такую страницу — сервер просто отдает заранее подготовленный HTML, без вычислений. Это очень быстро и практически не нагружает сервер.

Когда использовать SSG

Используйте, если:

• Данные редко меняются (например, 1 раз в час или в день).
• Страница не зависит от пользователя (нет логина, сессий, токенов).
• Важны SEO и скорость загрузки.
• Нужна высокая производительность даже при большом трафике.

Примеры: блог, маркетинговые страницы, страницы с расписанием, статьи, страницы продуктов.

Как включить SSG в App Router

SSG включается по умолчанию, если:

• Вы не отключаете кеш (fetch() по умолчанию кеширует данные навсегда).
• Нет динамического поведения (например, авторизации).
• Страница не зависит от параметров запроса.

Если хотите, чтобы страница автоматически обновлялась раз в какое-то время, можно включить ISR (Incremental Static Regeneration) — обновление с интервалом.

Для этого нужно указать:

export const revalidate = 60 // в секундах

Пример с комментариями

// app/blog/page.js

// Указываем, что Next.js может обновлять страницу раз в 60 секунд.
// Это включит ISR (инкрементальную регенерацию).
export const revalidate = 60;

export default async function BlogPage() {
  // Получаем список постов с внешнего API.
  // Так как мы НЕ указали { cache: 'no-store' }, Next закэширует результат.
  const res = await fetch('https://api.example.com/posts');

  // Проверяем, всё ли нормально с ответом
  if (!res.ok) {
    throw new Error('Не удалось загрузить посты');
  }

  // Преобразуем данные из JSON
  const posts = await res.json();

  // Рендерим список постов
  return (
    <div>
      <h1>Блог</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li> // Выводим заголовки постов
        ))}
      </ul>
    </div>
  );
}

Что происходит «под капотом»

1. При сборке (build) Next запускает эту функцию, загружает посты с API и генерирует HTML.
2. Этот HTML-файл сохраняется.
3. Когда пользователь заходит на /blog, сервер просто отдает готовый HTML.
4. Через 60 секунд (в нашем примере), Next может автоматически перегенерировать эту страницу в фоне при следующем запросе.

Особенности SSG

Плюсы:

• Очень высокая скорость. HTML уже готов.
• Отличная поддержка SEO — поисковик видит контент сразу.
• Сервер почти не нагружается — можно легко выдержать большой трафик.
• Можно обновлять страницу раз в N секунд с помощью revalidate.

Минусы:

• Данные не обновляются мгновенно. Между обновлениями может быть задержка (например, до 60 секунд).
• Не подходит для страниц, которые зависят от пользователя или авторизации.

CSR (Client-Side Rendering) — рендеринг на клиенте

При CSR страница сначала загружается без данных — только базовая HTML-структура и JavaScript. После этого браузер запускает JS, делает запросы к API и уже на клиенте собирает и отображает содержимое.

Это значит, что пользователь видит «пустую» страницу, пока не загрузится JS и не придут данные. Такой подход не подходит для SEO, но даёт максимум гибкости и интерактивности.

Когда использовать CSR

• Данные строго индивидуальны и часто обновляются — личные кабинеты, дашборды, формы.
• SEO не важен — например, интерфейсы только после входа в аккаунт.
• Контент зависит от действий пользователя в реальном времени — фильтры, сортировки, переключатели.

Как включить CSR в App Router

В App Router (папка app/) по умолчанию используется серверный рендеринг (SSR или SSG). Чтобы включить CSR, нужно вынести компонент в папку components/ и использовать его внутри use client компонента.

Пример:

// app/dashboard/page.js
import ClientDashboard from '../../components/ClientDashboard';

export default function Page() {
  return <ClientDashboard />;
}

// components/ClientDashboard.js
'use client';

import { useEffect, useState } from 'react';

export default function ClientDashboard() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/dashboard')
      .then((res) => res.json())
      .then(setData);
  }, []);

  if (!data) {
    return <p>Загрузка...</p>;
  }

  return (
    <div>
      <h1>Дашборд</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Особенности CSR

Плюсы:

• Гибкость — можно легко реализовать сложную логику на клиенте.
• Меньше нагрузки на сервер — вся работа с данными и рендеринг происходят в браузере.
• Подходит для динамических интерфейсов и интерактивных приложений.

Минусы:

• Нет SSR и SSG — плохо для SEO.
• Первичная загрузка может быть медленной — нужно дождаться загрузки JS и данных.
• Не отображается контент при отключённом JavaScript.