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!