Entenda o Next.js 13! Pages Router vs App Router
Tags: nextjs
Published: 2024-05-03 11:34:49

# Nivelando o conhecimento

Se você está chegando agora ao mundo do Next.js - ou ainda não entendeu o App Router - é muito importante entender o funcionamento e as diferenças entre o App Router e o Pages Router. Para isso, é crucial compreender as estratégias de renderização e como elas são “representadas” em cada Router.

## Conceitos Fundamentais

Antes de prosseguir, vamos relembrar alguns conceitos essenciais para um entendimento pleno das estratégias de renderização. Quando falamos de React e Next.js, deparamo-nos frequentemente com os termos:

- **Renderização (Rendering)**: É o processo pelo qual o React converte o código em HTML, permitindo que o navegador "desenhe a interface" na tela.
  
- **Pré-renderização (Pre-rendering)**: É o processo pelo qual o Next.js converte o código em HTML no lado do servidor.

- **Hidratação (Hydration)**: É o processo pelo qual o React "injeta" os valores do JSON e as instruções JavaScript no HTML renderizado, tornando a página interativa.

### Estratégias de Renderização no Next.js

- **SSG (Static Site Generation)**: O HTML é pré-renderizado no lado do servidor durante o processo de build e salvo em uma CDN. A página é enviada e hidratada no lado do cliente.

- **ISR (Incremental Static Regeneration)**: O HTML é pré-renderizado no lado do servidor de acordo com as regras de revalidação de cache. A página é salva em uma CDN, enviada e hidratada no lado do cliente.

- **SSR (Server-side Rendering)**: O HTML é pré-renderizado no lado do servidor a cada requisição e enviado para o lado do cliente.

- **CSR (Client-side Rendering)**: O HTML é pré-renderizado no lado do servidor a cada requisição e enviado para o lado do cliente. A página busca os dados necessários e atualiza a tela no lado do cliente.

## Estratégias de Renderização Disponíveis em Cada Router

### Pages Router

- **SSG**: Página sem função exportada, ou exporta `getStaticProps` com `revalidate: false`, ou não é uma Dynamic Route.
  
- **ISR**: Página exporta `getStaticProps` com `revalidate` maior que 0 e/ou invoca `res.revalidate(‘/path-to-revalidate’)` e é uma Dynamic Route.
  
- **SSR**: Página exporta `getServerSideProps` ou `getInitialProps` (Legado).
  
- **CSR**: Página não exporta `getServerSideProps`, `getInitialProps` (Legado), ou `getStaticProps`.

### App Router

- **Static Rendering**: Componente é pré-renderizado no lado do servidor como Server Component durante o build.
  
- **Static Data Fetching**: Componente é pré-renderizado no lado do servidor como Server Component de acordo com as regras de revalidação de cache.
  
- **Dynamic Rendering e Dynamic Data Fetching**: Componente é pré-renderizado no lado do servidor como Server Component a cada requisição.

### Pontos Importantes

- Diferente do Pages Router, no App Router, apenas Client Components são reativos.
  
- Todas as funções e variáveis citadas no App Router são exclusivas dos Server Components.
  
- Exportar a variável `dynamic: 'force-dynamic'` é equivalente a invocar todas as funções fetch de um componente com `options.next.revalidate: 0` ou `options.cache: 'no-store'` no App Router.

- A variável `fetchCache` não está sendo considerada aqui, pois é recomendado evitar utilizá-la.

### Observações Finais

Críticas e sugestões são muito bem-vindas! Obrigado!