Next.js vs TanStack Start: arquitetura, SSR e escolha de framework full-stack

A escolha de um framework full-stack para React deixou de ser óbvia. Next.js consolidou-se como padrão de mercado, mas TanStack Start surge com propostas distintas de roteamento, carregamento de dados e server functions. Este artigo compara os dois em arquitetura, SSR, cache e experiência do desenvolvedor, com exemplos de código e cenários reais de uso.

O que é cada framework, resumido

Next.js, mantido pela Vercel, é um meta-framework React que oferece SSR, SSG, ISR, API Routes e, desde a versão 13, o App Router com React Server Components (RSC). Ele abstrai o build, o servidor de desenvolvimento e a entrega de produção em uma única CLI.

TanStack Start, do ecossistema TanStack (criado por Tanner Linsley), é um framework full-stack sobre o TanStack Router. Ele foca em type-safe routing, data loading com TanStack Query e server functions via createServerFn, rodando sobre Vite com SSR opcional.

Comparação arquitetural

Server Components versus server functions

Next.js adota React Server Components como peça central. Componentes marcados como async rodam no servidor, acessam bancos de dados e retornam JSX serializável. A hidratação do cliente é reduzida, mas o modelo exige entender boundaries de servidor e cliente.

// Next.js App Router — Server Component
import { db } from "@/lib/db";

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

TanStack Start não usa Server Components. Em vez disso, loaders rodam no servidor durante o SSR e o resultado é hidratado no cliente via TanStack Query. As server functions (createServerFn) são chamadas do cliente como RPCs tipadas.

// TanStack Start — loader + server function
import { createFileRoute } from "@tanstack/react-router";
import { createServerFn } from "@tanstack/react-start";

const getPosts = createServerFn({ method: "GET" })
  .handler(async () => {
    const { data } = await supabase.from("posts").select("*").limit(10);
    return data;
  });

export const Route = createFileRoute("/posts")({
  loader: async () => getPosts(),
  component: PostsPage,
});

Streaming e experiência do usuário

Next.js App Router implementa streaming de HTML com Suspense. Partes da página são enviadas assim que prontas, melhorando o Time to First Byte (TTFB) percebido. TanStack Start também suporta streaming, mas o modelo é mais explícito: o desenvolvedor controla o que é pré-carregado e o que é buscado no cliente.

Type safety e DX

TanStack Start é notável pelo type safety de ponta a ponta. Rotas, parâmetros de URL, loaders e server functions são inferidos pelo TypeScript sem configuração adicional. Em Next.js, o type safety existe, mas depende mais de convenções de pastas e pode exigir tipos manuais em API Routes.

• TanStack Router gera tipos automaticamente a partir dos arquivos de rota.
• createServerFn valida input e output com Zod ou validadores customizados.
• Next.js requer cuidado ao tipar search params e segmentos dinâmicos manualmente.

Cenários de adoção

A escolha entre os frameworks depende de restrições de negócio e perfil do time.

• Prefira Next.js se você precisa de deploy rápido na Vercel, otimizações de imagem automáticas e um ecossistema vasto de exemplos e plugins.
• Prefira TanStack Start se você quer controle total sobre o bundler (Vite), já usa TanStack Query em projetos anteriores e valoriza rotas 100% type-safe.
• Times com forte cultura de backend-for-frontend podem achar Server Components mais naturais; times com APIs já consolidadas podem preferir loaders e server functions.

Conclusão

Next.js e TanStack Start não são substitutos diretos: são respostas a perguntas arquiteturais diferentes. Next.js aposta na visão da Vercel de edge computing e Server Components. TanStack Start aposta em controle, type safety e composição de bibliotecas já maduras. Avalie restrições de deploy, SEO e maturidade do time antes de decidir.

Perguntas frequentes

Fontes consultadas

• Next.js Docs — App Router
• TanStack Start Docs
• React Server Components RFC