Nuxt или Next.js: что выбрать для сайта с SEO

Nuxt и Next.js одинаково хорошо решают задачу SEO: оба отдают поисковику готовый HTML, умеют генерировать страницы заранее и управлять метатегами. Выбор между ними — это выбор между Vue и React: берите Nuxt, если команда пишет на Vue или бэкенд отдаёт API, а Next.js — если команда на React или продукт глубоко завязан на экосистему Vercel.

Ниже — чем фреймворки отличаются на практике и какие вопросы задать себе перед выбором.

Что Nuxt и Next.js дают сайту с SEO?

Nuxt и Next.js дают сайту серверный рендеринг, статическую генерацию страниц и удобное управление метаданными — всё, чтобы поисковик и AI-ассистенты получали готовый контент без выполнения JavaScript. Почему это важно для индексации, мы подробно разбирали в статье SSR в Nuxt и SEO.

Что оба фреймворка умеют из коробки:

• серверный рендеринг каждой страницы при запросе;
• генерацию статических страниц при сборке и их обновление по расписанию;
• смешанный режим: разные правила для разных разделов сайта;
• метатеги, Open Graph и canonical на уровне страницы;
• оптимизацию изображений и шрифтов;
• API-маршруты для небольшой серверной логики.

Разница в SEO-возможностях между ними сейчас минимальна. Решают экосистема, команда и то, как сайт будет жить дальше.

Чем Nuxt и Next.js отличаются на практике?

На практике Nuxt и Next.js отличаются фреймворком для интерфейса, подходом к серверным компонентам и тем, насколько сильно они привязаны к конкретной платформе хостинга. Next.js развивается вместе с React и активно использует серверные компоненты, Nuxt строится на Vue и серверном движке Nitro, который разворачивается почти где угодно.

Критерий	Nuxt	Next.js
Фреймворк интерфейса	Vue	React
Серверный движок	Nitro — адаптеры под Node, serverless и edge	Собственный сервер, лучшая поддержка — на Vercel
Серверные компоненты	Есть, но не основной подход	Основа архитектуры App Router
Правила рендеринга по разделам	routeRules в одном конфиге	Настройки на уровне маршрутов и сегментов
Автоимпорт компонентов и функций	Да	Нет, явные импорты
Кривая обучения	Ниже: меньше новых концепций	Выше: серверные и клиентские компоненты, кеширование
Рынок разработчиков	Меньше	Больше

Фото: Unsplash

Пример: правила рендеринга по разделам

В Nuxt режимы рендеринга задаются для разделов сайта в одном месте:

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/blog/**': { swr: 3600 },
    '/catalog/**': { isr: 600 },
    '/account/**': { ssr: false },
  },
})

В Next.js то же достигается настройками в файлах маршрутов, например временем повторной проверки страницы:

// app/blog/[slug]/page.tsx
export const revalidate = 3600

Когда выбирать Nuxt?

Nuxt стоит выбирать, когда команда пишет на Vue, бэкенд — отдельный сервис с API, а хостинг нужен гибкий: свой сервер, облако или serverless-платформа. Он хорошо подходит контентным сайтам, каталогам, корпоративным сайтам и блогам с сильной SEO-составляющей.

Ситуации, где мы выбираем Nuxt:

1. Бэкенд на Laravel или другом фреймворке отдаёт API, а фронтенд только отображает данные.
2. Команда небольшая, и важна скорость входа новых разработчиков.
3. Сайт разворачивается на собственном сервере или в Docker, без привязки к одной платформе.
4. Нужны быстрые контентные страницы с понятными правилами кеширования.

Так устроен и этот сайт: бэкенд на Laravel отдаёт статьи с готовым HTML, а Nuxt рендерит страницы на сервере.

Когда выбирать Next.js?

Next.js стоит выбирать, когда команда пишет на React, продукт совмещает контентные страницы со сложным интерактивным приложением или важна тесная интеграция с Vercel. Серверные компоненты React позволяют отправлять в браузер меньше JavaScript, но требуют от команды понимания новой модели.

Ситуации, где Next.js выгоднее:

• у компании уже есть React-разработчики или дизайн-система на React;
• сайт и веб-приложение — один продукт с общими компонентами;
• планируется мобильное приложение на React Native с переиспользованием логики;
• хостинг на Vercel устраивает по цене и условиям.

Общий выбор между Vue и React мы разбирали отдельно в статье Vue или React.

Какие ошибки делают при выборе метафреймворка?

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

Что ещё встречается:

• серверный рендеринг личного кабинета, который не индексируется и только нагружает сервер;
• отсутствие кеширования: каждая страница рендерится заново при каждом запросе;
• код, который обращается к window и document на сервере и ломает рендеринг;
• привязка к функциям конкретной платформы без понимания, сколько стоит переезд;
• дублирование бизнес-логики во фронтенде вместо единого API.

Коротко

• По SEO-возможностям Nuxt и Next.js равны: оба отдают готовый HTML и управляют метатегами.
• Выбор метафреймворка — это прежде всего выбор между Vue и React.
• Nuxt — для команд на Vue, отдельного API-бэкенда и гибкого хостинга.
• Next.js — для команд на React, продуктов с общими компонентами сайта и приложения и хостинга на Vercel.
• Не рендерьте на сервере то, что не индексируется, и настройте кеширование с первого дня.