Next.js SSR для SEO: полное руководство

Почему SSR важен для SEO

Server-Side Rendering (SSR) решает главную проблему SPA-приложений — индексацию поисковыми системами:

Поисковики видят контент — HTML приходит готовым
Быстрая первая отрисовка — пользователь видит контент сразу
Лучшие метрики — улучшаются LCP, FID, CLS

Настройка SSR в Next.js

App Router (рекомендуется)

TSX

// Все компоненты рендерятся на сервере по умолчанию
export default async function Page() {
  const data = await fetchData() // Серверный запрос
  return <Article content={data} />
}

Динамические метаданные

TSX

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug)
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      images: [{ url: post.image }],
    },
  }
}

Оптимизация Core Web Vitals

Largest Contentful Paint (LCP)

Оптимизируйте изображения через next/image
Используйте priority для hero-изображений
Минимизируйте render-blocking ресурсы

TSX

import Image from 'next/image'

<Image
  src="/hero.jpg"
  alt="Hero"
  priority // Загружается первым
  fill
  className="object-cover"
/>

Cumulative Layout Shift (CLS)

Указывайте размеры изображений
Резервируйте место для динамического контента
Избегайте вставки контента поверх существующего

Типичные ошибки

1. Client-only fetching

Ошибка:

TSX

'use client'
useEffect(() => fetchData(), []) // Поисковик не увидит

Правильно:

TSX

// Серверный компонент
const data = await fetchData()

2. Медленные серверные запросы

Решение:

Кэшируйте данные через React.cache
Используйте Suspense для streaming
Рассмотрите ISR для статических страниц

Проверка SEO

Используйте инструменты:

Google Search Console — мониторинг индексации
Lighthouse — аудит производительности
Rich Results Test — проверка structured data
PageSpeed Insights — реальные метрики

Заключение

Next.js с SSR — мощный инструмент для SEO-оптимизации. Правильная настройка дает:

95+ баллов в Lighthouse
Индексацию всех страниц
Отличные метрики Core Web Vitals
Высокие позиции в поиске