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
comrevalidate: false
, ou não é uma Dynamic Route.ISR: Página exporta
getStaticProps
comrevalidate
maior que 0 e/ou invocares.revalidate(‘/path-to-revalidate’)
e é uma Dynamic Route.SSR: Página exporta
getServerSideProps
ougetInitialProps
(Legado).CSR: Página não exporta
getServerSideProps
,getInitialProps
(Legado), ougetStaticProps
.
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 comoptions.next.revalidate: 0
ouoptions.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)