Como migrar para o React Router v7 e usar seus novos recursos (SSR, Type Safety)

Bora codar e impulsionar seus apps para o próximo nível?

De biblioteca a framework full-stack

O que é e como funciona o "framework mode"?

• Server-Side Rendering (SSR) nativo: melhore o SEO e a percepção de velocidade renderizando suas páginas no servidor.

• Pré-renderização estática: gere HTML estático em tempo de build para páginas como landing pages ou posts de blog.

• Code splitting automático: a biblioteca otimiza seu bundle de forma inteligente, dividindo o código por rota para um carregamento mais rápido.

• Streaming com Suspense: aproveite o poder do React 18+ para criar interfaces mais fluidas e responsivas.

// react-router.config.ts
import type { Config } from "@react-router/dev/config";

export default {
  ssr: true, // Habilita Server-Side Rendering
  appDirectory: "src",
  async prerender() {
    // Rotas que serão pré-renderizadas como HTML estático
    return ["/", "/about", "/contact"]; 
  },
} satisfies Config;

As mudanças de arquitetura que você precisa dominar

Um pacote para todos: react-router-dom agora é react-router

npm install react-router-dom

npm install react-router

Loaders e actions aprimorados

• loader: roda apenas no servidor. Perfeito para buscar dados de um banco ou usar chaves de API secretas.

• clientLoader: roda apenas no navegador, recebe os dados do server loader e pode enriquecê-los com chamadas de API no lado do cliente.

// Server loader (roda apenas no servidor)
export async function loader({ params }: Route.LoaderArgs) {
  return await getProductFromDatabase(params.id);
}

// Client loader (roda apenas no browser, tem prioridade)
export async function clientLoader({ serverLoader, params }: Route.ClientLoaderArgs) {
  const serverData = await serverLoader();
  const additionalData = await fetchClientData(params.id);
  return { ...serverData, ...additionalData };
}

Recursos que vão fazer a diferença no seu código

Adeus, any! Type safety automática com TypeScript

// tsconfig.json
{
  "include": [".react-router/types/**/*"],
  "compilerOptions": {
    "rootDirs": [".", "./.react-router/types"]
  }
}

import type { Route } from "./+types/product";

export async function loader({ params }: Route.LoaderArgs) {
  // params.id é automaticamente tipado como string!
  return { productName: await fetchProduct(params.id) };
}

export default function Component({ loaderData }: Route.ComponentProps) {
  // loaderData.productName tem o tipo inferido corretamente!
  return <h1>{loaderData.productName}</h1>;
}

CSR, SSR e pré-renderização estática na prática

1. Client-Side Rendering (CSR): o modelo clássico de SPA, ótimo para dashboards e áreas logadas.

2. Server-Side Rendering (SSR): renderização no servidor a cada requisição, ideal para conteúdo dinâmico que precisa de SEO.

3. Pré-renderização estática: gera HTML puro no build, perfeito para páginas de marketing e blogs, garantindo performance máxima.

code splitting automático por rota

Roteamento nativo baseado em arquivos

Migração do v6 para o v7 sem dor de cabeça

Habilitando as future flags para uma transição segura

<BrowserRouter
  future={{
    v7_relativeSplatPath: true,
    v7_startTransition: true,
    v7_fetcherPersist: true,
    v7_normalizeFormMethod: true,
    v7_partialHydration: true,
    v7_skipActionErrorRevalidation: true,
  }}
/>

Atualizando as dependências do projeto

# Remover o pacote antigo
npm uninstall react-router-dom

# Instalar o React Router v7
npm install react-router@latest

Ajustando os imports e as APIs removidas (json, defer)

1. Atualize os imports: troque todas as importações de "react-router-dom" para "react-router".

2. Refatore as APIs removidas: substitua as chamadas a json() e defer() pelo retorno direto de objetos e promises. O v7 simplificou a API para se alinhar melhor aos padrões da web.

Recursos avançados

Error Boundaries por rota para um código mais robusto

const routes = [
  {
    path: "/products/:id",
    element: <Product />,
    errorElement: <ProductError />, // UI de erro para esta rota
    loader: productLoader,
  }
];

Melhorando a UX com Streaming e Suspense

E agora? Quando vale a pena migrar?

• Seu projeto precisa de SSR ou performance e você não quer adicionar a complexidade de outro framework.

• Seu time valoriza type safety e quer reduzir o boilerplate no TypeScript.

• Você está começando um projeto novo e quer usar a tecnologia mais moderna do ecossistema React.

• Sua aplicação em v6 está estável e não teria grandes ganhos com os novos recursos.

• Seu time tem dependências críticas em APIs que foram removidas e a refatoração seria muito custosa.

• Você não tem tempo para testar adequadamente os impactos da migração no momento.

Seu próximo nível no roteamento React