Зачем нужен Next.js для поиска SPA-приложения поисковым роботом?

1.3 Junior🔥 231 комментариев

#JavaScript Core

Комментарии (1)

🐱

claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Next.js и SEO: Решение проблемы индексации SPA

Проблема традиционных Single Page Applications (SPA) заключается в том, что поисковые роботы не могут полноценно индексировать такие приложения. Next.js решает эту проблему благодаря встроенной поддержке Server-Side Rendering (SSR) и Static Site Generation (SSG).

Проблема: Почему SPA плохо индексируются

Классическое SPA-приложение (React без Next.js) отправляет браузеру пустой HTML и JavaScript, который выполняется на клиенте:

<!-- Начальный HTML SPA -->
<html>
  <body>
    <div id="root"></div>
    <script src="app.js"></script>
  </body>
</html>

Поисковый робот получает пустую страницу без контента, потому что:

JavaScript не выполняется — большинство роботов не запускают JS (старые версии Googlebot)
Нет метаданных — отсутствуют title, description, Open Graph теги
Нет структурированных данных — Schema.org разметка недоступна
Динамические URL — маршруты создаются на клиенте, робот их не видит

Результат: страница либо вообще не индексируется, либо индексируется как пустая.

Решение: Next.js с SSR и SSG

Next.js использует несколько подходов для обеспечения SEO:

1. Server-Side Rendering (SSR)

Страница полностью рендерится на сервере и отправляется уже готовым HTML браузеру:

// pages/articles/[id].tsx
export const getServerSideProps: GetServerSideProps = async (context) => {
  const { id } = context.params;
  const response = await fetch(`https://api.example.com/articles/${id}`);
  const article = await response.json();

  return {
    props: { article },
    revalidate: 3600, // Кэш на 1 час
  };
};

export default function Article({ article }: { article: Article }) {
  return (
    <>
      <Head>
        <title>{article.title}</title>
        <meta name="description" content={article.excerpt} />
        <meta property="og:title" content={article.title} />
        <meta property="og:description" content={article.excerpt} />
        <meta property="og:image" content={article.imageUrl} />
      </Head>
      <h1>{article.title}</h1>
      <p>{article.content}</p>
    </>
  );
}

Робот получает полностью готовый HTML с контентом и метаданными.

2. Static Site Generation (SSG) с ISR

Для страниц, которые не меняются часто, Next.js может предварительно сгенерировать HTML на сервере и кэшировать его:

export const getStaticProps: GetStaticProps = async (context) => {
  const { id } = context.params;
  const response = await fetch(`https://api.example.com/articles/${id}`);
  const article = await response.json();

  return {
    props: { article },
    revalidate: 3600, // Incremental Static Regeneration (ISR): переген. каждый час
  };
};

export const getStaticPaths: GetStaticPaths = async () => {
  const response = await fetch("https://api.example.com/articles");
  const articles = await response.json();

  const paths = articles.map((article) => ({
    params: { id: article.id },
  }));

  return {
    paths,
    fallback: "blocking", // Неопределённые страницы генерируются на лету
  };
};

Преимущество: HTML уже готов, робот получит контент мгновенно.

3. Встроенная поддержка SEO мета-тегов

Next.js 13+ (App Router):

// app/articles/[id]/page.tsx
export const generateMetadata = async ({
  params,
}: {
  params: { id: string };
}): Promise<Metadata> => {
  const article = await fetchArticle(params.id);

  return {
    title: article.title,
    description: article.excerpt,
    openGraph: {
      title: article.title,
      description: article.excerpt,
      images: [{ url: article.imageUrl }],
      type: "article",
    },
    alternates: {
      canonical: `https://example.com/articles/${article.id}`,
    },
  };
};

export default function Article({ params }: { params: { id: string } }) {
  return <ArticleContent id={params.id} />;
}

Автоматически генерируемый HTML:

<head>
  <title>Заголовок статьи</title>
  <meta name="description" content="Описание статьи" />
  <meta property="og:title" content="Заголовок статьи" />
  <meta property="og:description" content="Описание статьи" />
  <meta property="og:image" content="https://example.com/image.jpg" />
  <link rel="canonical" href="https://example.com/articles/123" />
</head>

4. Карта сайта (Sitemap) и robots.txt

// app/sitemap.ts
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const articles = await fetchAllArticles();

  return articles.map((article) => ({
    url: `https://example.com/articles/${article.id}`,
    lastModified: article.updatedAt,
    changeFrequency: "weekly",
    priority: 0.8,
  }));
}

// app/robots.ts
export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: "/admin",
    },
    sitemap: "https://example.com/sitemap.xml",
  };
}

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

Аспект	SPA (без Next.js)	Next.js SSR	Next.js SSG
Индексация роботом	Плохая	Отличная	Отличная
Скорость загрузки	Средняя	Хорошая	Очень хорошая
Актуальность контента	Всегда свежий	Всегда свежий	Кэшируется (ISR)
Нагрузка на сервер	Низкая	Высокая	Низкая
SEO мета-теги	Только клиент	На сервере	На сервере

Практический пример: Блог

// Next.js: Статьи блога
export default function BlogPost({ post }: { post: BlogPost }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <time>{new Date(post.publishedAt).toLocaleDateString()}</time>
      <div>{post.content}</div>
    </article>
  );
}

export const generateMetadata = async ({ params }): Promise<Metadata> => {
  const post = await getPost(params.slug);
  return {
    title: `${post.title} | My Blog`,
    description: post.excerpt,
    openGraph: {
      type: "article",
      publishedTime: post.publishedAt,
      authors: [post.author],
    },
  };
};

export const generateStaticParams = async () => {
  const posts = await getAllPosts();
  return posts.map((post) => ({ slug: post.slug }));
};

Заключение

Next.js необходим для SEO, потому что:

Гарантирует готовый HTML — поисковые роботы сразу видят контент
Поддерживает мета-теги — правильная информация для социальных сетей
Обеспечивает структурированные данные — Schema.org, OpenGraph
Быстрые страницы — Google учитывает скорость загрузки при ранжировании
Карты сайта и robots.txt — помогают роботам индексировать сайт эффективнее

Без Next.js (или подобного фреймворка) SPA практически невозможно оптимизировать для поиска.