Voltar para o blog

Começando com o TanStack Start

Um guia completo para criar aplicações React modernas com renderização no servidor usando o TanStack Start, o framework full-stack mais novo do ecossistema TanStack.

TanStackReactTypeScriptSSRDesenvolvimento Web
2 min de leitura

Começando com o TanStack Start

O TanStack Start é a adição mais recente ao ecossistema TanStack, oferecendo um framework full stack poderoso para criar aplicações React modernas com suporte de primeira para renderização no servidor.

Por que TanStack Start?

Se você já usou o TanStack Router, sabe os benefícios de um roteamento com tipagem forte. O TanStack Start leva isso adiante ao oferecer:

  • Capacidades full stack: crie aplicações completas com SSR, rotas de API e mais
  • Segurança de tipos: tipagem de ponta a ponta, do servidor ao cliente
  • Performance: otimizado para Core Web Vitals e SEO
  • Flexibilidade: use suas bibliotecas favoritas de estilo, estado e busca de dados

Pré-requisitos

Antes de começar, garanta que você tenha:

  • Node.js 18+ instalado
  • Noções básicas de React e TypeScript
  • Familiaridade com ferramentas modernas de JavaScript

Configurando o primeiro projeto

Vamos criar um novo projeto TanStack Start do zero.

Instalação

Primeiro, crie uma nova pasta e inicialize o projeto:

mkdir meu-tanstack-app
cd meu-tanstack-app
npm init -y

Instale as dependências necessárias:

npm install @tanstack/react-start @tanstack/react-router react react-dom
npm install -D typescript @types/react @types/react-dom vite

Estrutura do projeto

Sua estrutura deve ficar assim:

meu-tanstack-app/
├── src/
│   ├── routes/
│   │   ├── __root.tsx
│   │   └── index.tsx
│   ├── router.tsx
│   └── entry-client.tsx
├── package.json
├── tsconfig.json
└── vite.config.ts

Criando a primeira rota

O TanStack Start usa rotas baseadas em arquivos. Crie a rota raiz em src/routes/__root.tsx:

import { createRootRoute, Outlet } from '@tanstack/react-router';
 
export const Route = createRootRoute({
  component: () => (
    <div>
      <header>
        <h1>Meu App</h1>
      </header>
      <main>
        <Outlet />
      </main>
    </div>
  ),
});

Depois crie a home em src/routes/index.tsx:

import { createFileRoute } from '@tanstack/react-router';
 
export const Route = createFileRoute('/')({
  component: HomePage,
});
 
function HomePage() {
  return (
    <div>
      <h2>Bem-vindo ao TanStack Start!</h2>
      <p>Seu framework React full stack está pronto.</p>
    </div>
  );
}

Carregando dados no servidor

Uma das funcionalidades mais fortes do TanStack Start é o carregamento de dados no servidor usando createServerFn:

import { createFileRoute } from '@tanstack/react-router';
import { createServerFn } from '@tanstack/react-start';
 
const getServerData = createServerFn({ method: 'GET' }).handler(async () => {
  // Este código roda no servidor
  const data = await fetchDataFromDatabase();
  return { data };
});
 
export const Route = createFileRoute('/data')({
  component: DataPage,
  loader: () => getServerData(),
});
 
function DataPage() {
  const { data } = Route.useLoaderData();
  return <div>{/* Renderize seus dados */}</div>;
}

SEO e meta tags

O TanStack Start facilita a gestão de SEO com a função head:

export const Route = createFileRoute('/blog/$slug')({
  component: BlogPost,
  loader: ({ params }) => getBlogPost(params.slug),
  head: ({ loaderData }) => ({
    meta: [
      { title: loaderData.title },
      { name: 'description', content: loaderData.description },
      { property: 'og:title', content: loaderData.title },
    ],
  }),
});

Deploy

Aplicações TanStack Start podem ser publicadas em várias plataformas. Neste blog, uso Coolify com Nixpacks para um deploy simples.

Build para produção

npm run build

Executando em produção

npm start

Conclusão

O TanStack Start oferece uma excelente experiência para criar aplicações React full stack modernas. Com roteamento tipado, funções de servidor e arquitetura flexível, é uma ótima escolha para seu próximo projeto.

Próximos passos

Boas linhas de código! 🚀