GolOps

Next.js - зрелый фреймворк с хорошо развитой экосистемой. Мы выбрали TanStack Start в первую очередь потому, что он лучше соответствует нашим требованиям к стратегиям рендеринга и типобезопасности.

Это не статья с критикой Next.js. У Next.js отличная обратная совместимость.

TanStack Start 2026: больше, чем SPA-фреймворк

Многие до сих пор воспринимают TanStack Start как "SPA-фреймворк с приоритетом клиента". Но в 2026 году TanStack Start уже поддерживает полноценный набор серверного рендеринга:

Full-document SSR: полный server-side rendering
Streaming: потоковый рендеринг
Static Prerendering: статическая предпрорисовка
ISR (Incremental Static Regeneration): статическая генерация для динамического контента
Selective SSR: выборочный SSR по требованию
SPA Mode: режим чисто клиентского рендеринга
Server Functions: типобезопасные вызовы серверных функций
LLM Optimization (LLMO): оптимизация для AI-краулеров

По сути TanStack Start поддерживает почти все стратегии рендеринга, которые умеет Next.js. Так почему мы всё же выбрали его?

Кривая обучения Next.js

Сначала поговорим о стоимости обучения Next.js. Новички чаще всего просто хотят выпустить продукт, но App Router добавляет довольно много концепций.

Сложность концепций

App Router в Next.js вводит следующие понятия:

Server Components против Client Components: по умолчанию компоненты являются серверными, для переключения нужен "use client"
Граница сериализации: нельзя передавать функции и экземпляры классов из Server Components в Client Components
Hydration Mismatch: очень трудно отлаживать, когда серверный и клиентский рендеринг расходятся
Директива "use server": строковая директива превращает код в серверный компонент или серверную функцию

Одного понимания того, "где выполняется этот код", новичку уже достаточно, чтобы запутаться.

Механизм кеширования

У Next.js сложная система кеширования:

// Этот fetch будет кешироваться?
const data = await fetch('/api/data');

// А если так?
const data = await fetch('/api/data', { cache: 'no-store' });

// Или нужно это?
export const dynamic = 'force-dynamic';

// А может revalidate?
export const revalidate = 60;

У Next.js несколько уровней кеша: Data Cache, Full Route Cache, Router Cache... Даже опытные разработчики часто путаются в том, как они взаимодействуют. В v14 кеширование было включено по умолчанию, в v15 оно по умолчанию отключено - такие изменения только увеличивают когнитивную нагрузку.

Две системы роутинга

В Next.js одновременно существуют Pages Router и App Router:

Онлайн-уроки смешаны, и новичку непонятно, что именно учить
У этих двух систем сильно отличаются концепции и API
Переход с Pages Router на App Router требует заметных изменений кода

Отладка

Неявное поведение Next.js усложняет отладку:

Страница не обновляется? Возможно, это кеш, но непонятно какой именно слой
Ошибка компонента? Возможно, проблема на границе server/client, а сообщение об ошибке недостаточно ясно
Проблема с производительностью? Неясно, это SSR, hydration или клиентский рендеринг

Особенности TanStack Start

У TanStack Start кривая обучения заметно мягче:

Нет Server Components: все компоненты - обычные знакомые React-компоненты
Явные стратегии рендеринга: поведение SSR/SPA/static для каждого маршрута описано в коде
Знакомая загрузка данных: паттерн useQuery из TanStack Query
Типовая система помогает проверять код: ошибки видны на этапе компиляции

У TanStack Start тоже есть порог входа, но его ментальная модель ближе к классической разработке на React.

Почему мы выбрали именно его

1. Вы сами выбираете стратегию рендеринга

Next.js задуман как "server-first" - по умолчанию все компоненты являются Server Components, а для перехода к клиенту нужно явно указать "use client".

TanStack Start устроен иначе: вы сами выбираете стратегию рендеринга для каждой страницы.

// Режим чистого SPA: идеально для дашбордов, AI-чата и других интерактивных приложений
export const Route = createFileRoute('/dashboard')({
  ssr: false,
  component: Dashboard,
});

// Режим SSR: подходит для страниц, которым нужен SEO
export const Route = createFileRoute('/blog/$slug')({
  loader: async ({ params }) => fetchPost(params.slug),
  component: BlogPost,
});

// Статическая предпрорисовка: подходит для страниц с редко меняющимся контентом
export const Route = createFileRoute('/about')({
  preload: 'intent',
  component: About,
});

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

2. Типобезопасная система маршрутизации

TanStack Router отлично справляется с типобезопасностью:

// Имя файла: $threadId.tsx
export const Route = createFileRoute('/chat/$threadId')({
  loader: async ({ params }) => {
    // params.threadId автоматически выводится как string
    return fetchThread(params.threadId);
  },
  component: () => {
    const { threadId } = Route.useParams();
    // На этапе компиляции уже известно, что threadId существует
  }
});

При переименовании файлов dev-server автоматически обновляет связанный код. Ошибки в ссылках или несоответствия типов ловятся на этапе компиляции.

3. Server Functions против Server Actions

Оба подхода позволяют вызывать серверный код с клиента, но устроены по-разному:

// TanStack Server Function: type-safe RPC
export const updateUser = createServerFn()
  .validator((data: { name: string; age: number }) => data)
  .handler(async ({ data }) => {
    // тип data выводится автоматически
    return db.users.update(data);
  });

// Вызов с клиента (полностью типобезопасно)
await updateUser({ name: 'Alice', age: 30 });

Server Functions больше похожи на типобезопасный RPC с встроенной валидацией и middleware. Вы вызываете их почти как обычные функции.

4. Сборка на Vite

TanStack Start построен на Vite, поэтому опыт разработки заметно приятнее, чем в эпоху Webpack:

Параметр	Next.js + Turbopack	TanStack Start + Vite
Время запуска	5-10 секунд на больших проектах	Миллисекунды
HMR	Иногда подтормаживает	Почти мгновенно
Экосистема плагинов	Нужна адаптация	Плагины Vite работают напрямую

Техническая основа

TanStack Start - новый фреймворк, но он построен на зрелых технологиях:

TanStack Router: типобезопасная маршрутизация
TanStack Query: библиотека для загрузки данных в React
Vite: быстрая сборка в разработке
Nitro: серверная инфраструктура от команды Nuxt

Сложности

Цена раннего фреймворка

TanStack Start - относительно новый фреймворк. API уже стабилен, но могут встречаться edge cases.

По сравнению с годами документации и ответов сообщества у Next.js, материалы по TanStack Start всё ещё развиваются. Если вы столкнетесь с проблемой, иногда придется смотреть в исходники или задавать вопрос в Discord.

Сильные стороны Next.js

Next.js по-прежнему отличный фреймворк:

Отличная обратная совместимость: приложение на Next 10 можно обновить до Next 16 с минимальными изменениями
Стабильность: годы непрерывной поддержки
Зрелая экосистема: деплой, мониторинг и edge-вычисления уже имеют зрелые решения

Итог

Мы выбрали TanStack Start не потому, что Next.js плох, а потому, что он лучше подходит под наши требования:

Гибкие стратегии рендеринга: можно сочетать SSR, SPA и статическую предпрорисовку в одном приложении
Сквозная типобезопасность
Явное поведение без скрытой магии

Выбор фреймворка зависит от ваших требований. Поймите свои задачи и выберите подходящий инструмент.

Почему TanStack Start