Как реализовать SSR и SEO-оптимизацию в Next.js?

Question

В Next.js SSR делается через серверный рендеринг страницы: данные получаются на сервере, и клиент получает готовый HTML. Для SEO важно, чтобы ключевой контент и метаданные (title, description, canonical, OG) были отрендерены уже на сервере. В зависимости от задачи выбирают SSR, SSG или ISR, чтобы балансировать свежесть данных и скорость. Для динамических страниц часто используют SSR или ISR. Также важно настроить robots/sitemap, корректные canonical и структурированные данные при необходимости.

YeaHub · Accepted Answer

В Next.js SEO обычно достигается не «магией», а правильным выбором режима рендеринга и аккуратной работой с метаданными.ОпределениеОпределение: SSR (Server-Side Rendering) — это генерация HTML страницы на сервере на каждый запрос (или по стратегии), чтобы пользователь и поисковик сразу получили готовую разметку.Стратегии рендеринга в Next.js и когда что выбиратьSSRНужно: персонализация, часто меняющиеся данные, зависимость от запросаSSGНужно: статические страницы, максимальная скорость, редкие измененияISRНужно: «почти статично», но периодически обновлять без полного деплояРеализация SSR (концептуально)Данные грузятся на сервереСервер возвращает HTML с контентомНа клиенте происходит гидратация (React «оживляет» страницу)Пример (pages router): SSR через getServerSidePropsexport async function getServerSideProps() {
  const res = await fetch("https://api.example.com/products"); // пример
  const products = await res.json();
  return { props: { products } };
}
SEO-оптимизация: что сделать обязательноМетаданныеtitle, descriptioncanonicalOpen Graph / Twitter cards (для превью)Индексируемый контентВажные тексты и заголовки должны быть в HTML при ответе сервераСкоростьПравильный выбор SSR/SSG/ISRОптимизация изображений (next/image), минимизация блокирующих ресурсовТехнические файлыrobots.txt и sitemap.xmlСемантикаКорректные h1-h2, списки, ссылки, alt у изображенийМетаданные в Next.js (app router)export const metadata = {
  title: "Каталог товаров",
  description: "Выбор товаров с доставкой",
};
Типичные ошибки, которые ломают SEOКонтент появляется только после client-side fetch (пустой HTML на старте)Одинаковый title/description для всех страницНет canonical при дублях URL (параметры/фильтры)Рендер «всё в div» без семантики и заголовковВыводДля SEO в Next.js ключевое — отдавать поисковикам готовый HTML с контентом и корректными метаданными; SSR/SSG/ISR выбирают по свежести данных и требованиям к скорости.