Next.js App Router: o que aprendi depois de 6 meses
O App Router mudou a forma como penso em componentes React. Aqui estão os pontos que mais me surpreenderam.
Next.jsReactServer Components
Migrei meu blog pessoal para o App Router do Next.js há 6 meses e tenho opiniões formadas.
O que é genuinamente melhor
Server Components por padrão é a mudança mais impactante. Buscar dados diretamente no componente, sem useEffect, sem estado de loading manual — é libertador.
tsx
// Pages Router (antes)
export async function getStaticProps() {
const posts = await fetchPosts()
return { props: { posts } }
}
// App Router (depois) — busca direto no componente
export default async function Page() {
const posts = await fetchPosts()
return <PostList posts={posts} />
}
O sistema de cache
O cache é poderoso mas confuso. Leva tempo para internalizar os modos.
| Estratégia | Quando usar | Gotcha principal |
|---|---|---|
cache: 'force-cache' | Dados estáticos | Precisa revalidar manualmente |
cache: 'no-store' | Dados sempre frescos | Sem cache, maior latência |
revalidate: 60 | Dados com TTL em segundos | Pode servir dado velho |
| tags de cache | Revalidação sob demanda | Mais complexo de implementar |
Roteiro de migração
- Criar diretório
app/paralelo aopages/ - Migrar layouts compartilhados primeiro
- Migrar páginas puramente estáticas
- Migrar páginas com busca de dados para Server Components
- Remover
pages/quando tudo estiver migrado
Conclusão
Vale a pena migrar se você está começando um projeto novo. Para projetos existentes, faça gradualmente — os dois roteadores coexistem sem problema.