Next.js vs React в 2026: что выбрать для нового проекта?

Каждый год этот вопрос звучит снова. В 2026 году ландшафт изменился: React Server Components стабильны, App Router — стандарт, а Turbopack заменил Webpack. Давайте разберёмся, когда какой подход выбрать.

React без фреймворка: когда это всё ещё работает

Чистый React с Vite остаётся отличным выбором для SPA-приложений, где SEO не критичен: внутренние дашборды, админ-панели, инструменты для команд. Вы получаете минимальную конфигурацию, быструю сборку и полный контроль над архитектурой.

npm create vite@latest my-app -- --template react-ts

Если ваше приложение живёт за авторизацией и не нуждается в серверном рендеринге — фреймворк добавит сложность без пользы.

Next.js: когда без него не обойтись

Next.js становится очевидным выбором, когда появляются следующие требования:

• SEO и первая загрузка — SSR и SSG дают поисковикам готовый HTML
• API Routes — бэкенд и фронтенд в одном репозитории
• Server Components — уменьшают размер JS-бандла на клиенте
• ISR (Incremental Static Regeneration) — обновление статических страниц без полного ребилда
• Middleware — обработка запросов на edge-уровне

Server Components: главное изменение

RSC — это не просто оптимизация. Это новая ментальная модель: компоненты, которые никогда не попадают в клиентский бандл. Вы можете делать запросы к базе данных прямо в компоненте, без API-слоя.

// app/posts/page.tsx — Server Component
import { db } from '@/lib/db'

export default async function Posts() {
  const posts = await db.post.findMany()
  return (
    <ul>
      {posts.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  )
}

Правило: если компоненту не нужен useState, useEffect или обработчик событий — он должен быть серверным.

Производительность: реальные цифры

В моих проектах переход с клиентского рендеринга на App Router с Server Components дал:

• LCP: с 2.8s до 1.1s
• JS bundle: -42% на клиенте
• TTFB: 180ms (edge runtime)

Это не синтетические бенчмарки — реальные метрики продакшн-приложения с ~5k DAU.

Мой подход в 2026

Внутренний инструмент без SEO? React + Vite + TanStack Router. Быстро, просто, без магии.

Продукт для пользователей? Next.js с App Router. SEO, производительность, API routes — всё из коробки. Vercel упрощает деплой, но Next.js отлично работает и на Node.js-сервере.

Мобильное приложение + веб? Общая бизнес-логика на TypeScript, React Native для мобилок, Next.js для веба. Единый стек, единый язык.