DEV Community

Giovane de Loredo
Giovane de Loredo

Posted on

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

Nivelando o conhecimento

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

Antes de prosseguir precisamos relembrar alguns conceitos para um entendimento pleno das estratégias de renderização. Quando falamos de React e Next.js diversas vezes nos deparamos com os termos renderização (rendering), pré-renderização (pre-rendering) e hidratação (hydration):

  • Renderização: É o processo que o React realiza para converter o código em HTML, tornando assim possível que o navegador consiga "desenhar a interface" na tela.

  • Pré-renderização: É o processo que o Next.js realiza para converter o código em HTML, porém, executa este processo no lado do servidor.

  • Hidratação: É o processo que o React realiza para "injetar" os valores do JSON e as instruções JavaScript no HTML renderizado, tornando assim a página interativa.

Você pode entender renderização e pré-renderização como o mesmo processo, sendo "pré-renderização" uma nomenclatura adotada pelo Next.js. Em resumo, enquanto o React só tem a capacidade de executar a renderização no lado do cliente, o Next.js executa este mesmo processo no lado do servidor, deixando a cargo do lado do cliente apenas a hidratação.

Ao adotar essa estratégia o Next.js oferece duas grandes vantagens em relação a um projeto "React puro" criado utilizando o Create React App:

  1. Melhor performance, pois uma parte do processamento para "criar a página" é realizado no lado do servidor.
  2. Melhor experiência para o usuário, pois ao invés de exibir uma "tela branca" enquanto a página é renderizada no lado do cliente, é imediatamente exibido o HTML pré-renderizado no lado servidor, fazendo com que o lado do cliente tenha apenas que aguardar o processo de hidratação para que a página se torne interativa. É interessante ressaltar que ao desativar o JavaScript do navegador o HTML continua sendo exibido, fazendo com que apenas a parte interativa não funcione.

Importante saber

Uma página gerada estaticamente e salva em uma CDN significa que quando requisitada já possui seu HTML pré-renderizado salvo em um storage e apenas precisa enviá-lo para o cliente, não necessitando nenhum processamento no lado do servidor para pré-renderizar a página.

Entendidos esses conceitos, vamos falar sobre as estratégias de renderização disponíveis em cada Router do Next.js!

Pages Router

Pontos importantes

  • Independente da estratégia utilizada todas as páginas são reativas, já que o processo de hidratação sempre acontece no lado do cliente, isto quer dizer que você pode utilizar States, Events, Effects e APIs do navegador.
  • Quando uma página gerada estaticamente é requisitada mas ainda não foi gerada, não necessariamente retornará uma página de Not Found, sendo possível gerá-la pela primeira vez definindo a propriedade fallback da função getStaticPaths para true ou 'blocking'.

App Router

A primeira grande mudança em relação ao Pages Router é que agora não temos mais o conceito de páginas. Enquanto no Pages Router páginas são “componentes especiais” que podem exportar funções como getServerSideProps, getStaticProps , etc. e componentes são as partes que compõem essas páginas, essas funções deixam de existir e no App Router tudo são componentes. Dito isto, precisamos ter em mente que existem dois tipos de componentes:

  • Client Components: O componente é pré-renderizado no lado do servidor e enviado para ser hidratado no lado do cliente.
  • Server Components: O componente é pré-renderizado e hidratado no lado do servidor, enviando um componente totalmente renderizado que não requer nenhum processamento no lado do cliente.

É importante que você entenda que Client Components funcionam essencialmente como páginas funcionam no Pages Router, isto quer dizer que independente da estratégia de renderização que uma página usa ela sempre vai ser pré-renderizada no lado do servidor e hidratada no lado do cliente, e é justamente aqui que ocorre a grande mudança implicada pelos Server Components.

Importante saber

O Server Components não é uma tecnologia desenvolvida ou exclusiva do Next.js, e sim uma tecnologia desenvolvida pelo time do React que foi integrada ao Next.js através da criação do App Router.

Antes de traçar um paralelo entre as estratégias de renderização é necessário entender o novo sistema de Data Fetching do App Router. Enquanto no Pages Router podemos definir as regras de revalidação de cache de uma página gerada estaticamente através da propriedade revalidate da função getStaticProps ou invocando a função res.revalidate('/path-to-revalidate'), no App Router podemos simplesmente invocar a função fetch(url, options) dentro de um Server Component e definir as regras de revalidação de cache através das propriedades options.cache e options.next.revalidate. A grande mudança aqui é que agora o mesmo componente pode possuir diversas requisições com regras de revalidação de cache diferentes, proporcionando muito mais granularidade em relação as páginas geradas estaticamente no Pages Router.

Outra mudança considerável foi a adição das Dynamic Functions. Como Server Components são pré-renderizados e hidratados no lado do servidor eles não tem acesso a informações do lado do cliente como cookies, headers e parâmetros de url. Para isso foram adicionadas "funções especiais" chamadas de Dynamic Functions que conseguem acessar essas informações.

Tendo tudo isso em mente, vamos agora traçar um paralelo entre as estratégias de renderização do Pages Router e do App Router:

Pontos importantes

Críticas e sugestões são muito bem vindas, vlw!

Top comments (3)

Collapse
 
igordsgoncalves profile image
Igor Gonçalves

Artigo incrível e muito esclarecedor.

Collapse
 
angelod1as profile image
Angelo Dias

Procurando recursos pro meu trampo achei esse texto, e to triste pq eles são gringos e não tem uma versão em inglês disso! É o melhor artigo até agora sobre o assunto, parabéns.

Collapse
 
rmeireles04 profile image
Rui Meireles

Eu tenho um problema num project meu, sera que me podes ajudar a perceber o pk dele nao fazer build