TanStack Start - Framework React Full-Stack | Notícias

O que é TanStack Start

TanStack Start é um framework React full-stack baseado no TanStack Router. Integra roteamento type-safe, funções de servidor e SSR/SSG, sendo uma alternativa notável ao Next.js.

Características

✓ Type-safety completo
✓ Roteamento baseado em arquivos
✓ Funções de servidor
✓ Streaming SSR
✓ Múltiplos alvos de deploy
✓ Integração com TanStack Query

Configuração do Projeto

npm create tanstack-start@latest my-app
cd my-app
npm install
npm run dev

Roteamento Baseado em Arquivos

app/
├── routes/
│   ├── __root.tsx      # Layout raiz
│   ├── index.tsx       # /
│   ├── about.tsx       # /about
│   ├── posts/
│   │   ├── index.tsx   # /posts
│   │   ├── $postId.tsx # /posts/:postId
│   │   └── new.tsx     # /posts/new
│   └── _auth/          # Grupo de layout
│       ├── login.tsx
│       └── register.tsx
└── routes.gen.ts       # Gerado automaticamente

Definição de Rotas

Rota Básica

// routes/index.tsx
import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/')({
  component: HomePage
});

function HomePage() {
  return <h1>Welcome to TanStack Start!</h1>;
}

Rota Dinâmica

// routes/posts/$postId.tsx
import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/posts/$postId')({
  loader: async ({ params }) => {
    // params.postId é type-safe
    const post = await fetchPost(params.postId);
    return { post };
  },
  component: PostPage
});

function PostPage() {
  const { post } = Route.useLoaderData();
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

Funções de Servidor

Definição e Uso

// app/serverFunctions/posts.ts
import { createServerFn } from '@tanstack/start';
import { z } from 'zod';

export const getPosts = createServerFn('GET', async () => {
  return db.posts.findMany();
});

export const createPost = createServerFn('POST', async (data) => {
  const validated = z.object({
    title: z.string(),
    content: z.string()
  }).parse(data);

  return db.posts.create({ data: validated });
});

Chamada do Cliente

// routes/posts/index.tsx
import { getPosts, createPost } from '../serverFunctions/posts';

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

function PostsPage() {
  const posts = Route.useLoaderData();

  const handleCreate = async () => {
    await createPost({ title: 'New Post', content: 'Content' });
  };

  return (
    <div>
      {posts.map(post => <PostCard key={post.id} post={post} />)}
      <button onClick={handleCreate}>Create Post</button>
    </div>
  );
}

Data Fetching

Padrão Loader

export const Route = createFileRoute('/dashboard')({
  // Buscar dados no servidor
  loader: async ({ context }) => {
    const [user, stats] = await Promise.all([
      getUser(context.userId),
      getStats(context.userId)
    ]);
    return { user, stats };
  },
  // Exibição do estado pendente
  pendingComponent: () => <div>Loading...</div>,
  // Exibição do estado de erro
  errorComponent: ({ error }) => <div>Error: {error.message}</div>,
  component: DashboardPage
});

Integração com TanStack Query

import { createFileRoute } from '@tanstack/react-router';
import { useSuspenseQuery } from '@tanstack/react-query';

export const Route = createFileRoute('/posts/')({
  component: PostsPage
});

function PostsPage() {
  const { data: posts } = useSuspenseQuery({
    queryKey: ['posts'],
    queryFn: () => fetch('/api/posts').then(r => r.json())
  });

  return <PostList posts={posts} />;
}

Layouts

// routes/__root.tsx
import { createRootRoute, Outlet } from '@tanstack/react-router';

export const Route = createRootRoute({
  component: RootLayout
});

function RootLayout() {
  return (
    <html>
      <head>
        <meta charSet="utf-8" />
        <title>My App</title>
      </head>
      <body>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/posts">Posts</Link>
        </nav>
        <main>
          <Outlet />
        </main>
      </body>
    </html>
  );
}

Links Type-Safe

import { Link } from '@tanstack/react-router';

// Erro de tipo: parâmetro faltando
<Link to="/posts/$postId">Post</Link>

// Uso correto
<Link to="/posts/$postId" params={{ postId: '123' }}>
  Post 123
</Link>

// Parâmetros de busca também são type-safe
<Link to="/search" search={{ q: 'react', page: 1 }}>
  Search
</Link>

Middleware

// app/middleware.ts
import { createMiddleware } from '@tanstack/start';

export const authMiddleware = createMiddleware({
  beforeLoad: async ({ context }) => {
    const session = await getSession();
    if (!session) {
      throw redirect({ to: '/login' });
    }
    return { ...context, session };
  }
});

// Uso na rota
export const Route = createFileRoute('/dashboard')({
  middleware: [authMiddleware],
  component: Dashboard
});

Deploy

# Node.js
npm run build
npm start

# Cloudflare Workers
npm run build --preset cloudflare-pages

# Vercel
npm run build --preset vercel

# Netlify
npm run build --preset netlify

Resumo

TanStack Start é um framework React full-stack com type-safety completo e funcionalidades modernas de servidor. Com o poderoso sistema de roteamento do TanStack Router e funções de servidor simples, o desenvolvimento full-stack eficiente é possível.

← Voltar para a lista