DEV Community

Cover image for Entenda o Next.js 13! Pages Router vs App Router
Henrique Vital
Henrique Vital

Posted on • Updated on

Entenda o Next.js 13! Pages Router vs App Router

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!

Top comments (0)