Introdução ao TanStack Start

O que é o TanStack Start?

O TanStack Start é um framework full-stack para React construído em cima do TanStack Router. Ele oferece renderização no servidor (SSR), roteamento baseado em arquivos e suporte nativo a funções de servidor — tudo com TypeScript rigoroso.

Se você já usou o TanStack Router, vai se sentir em casa. O Start apenas adiciona as capacidades de servidor que faltavam.

Principais características

Roteamento baseado em arquivos

As rotas são definidas pela estrutura de arquivos dentro de src/routes/. Não há configuração manual de rotas — apenas crie o arquivo e ele vira uma página.

src/routes/
  index.tsx          → /
  posts.$slug.tsx    → /posts/:slug
  category.$cat.tsx  → /category/:cat

Funções de servidor

Com createServerFn, você pode escrever funções que rodam exclusivamente no servidor e chamá-las diretamente de componentes React — sem precisar criar uma API REST manualmente.

import { createServerFn } from '@tanstack/start'

const getPosts = createServerFn().handler(async () => {
  return await db.posts.findMany()
})

Loaders de rota

Cada rota pode ter um loader que busca dados antes de renderizar o componente. Isso garante que a página chegue ao cliente já com os dados necessários.

export const Route = createFileRoute('/posts/$slug')({
  loader: async ({ params }) => fetchPost(params.slug),
  component: PostPage,
})

Por que escolher o TanStack Start?

• TypeScript primeiro — inferência de tipos de ponta a ponta
• Sem "magic" — o comportamento é explícito e previsível
• Ecossistema TanStack — integração nativa com Query, Table e Form
• Deploy simples — funciona muito bem com a Netlify

Se você está começando um projeto React em 2026 e quer algo moderno, type-safe e com bom suporte a SSR, o TanStack Start é uma excelente opção.