Incremental Static Regeneration (ISR) com Nextjs
Static-Site Generation
A ideia principal deste conceito é a geração de páginas estáticas durante o tempo de build. Essas páginas podem ser enviadas para uma CDN e disponibilizadas globalmente em poucos segundos. Como nem tudo são flores, temos um probleminha. Vamos imaginar um e-commerce com 10000 produtos e para cada produtos temos que gerar uma página estática. Se essas páginas são geradas no build da aplicação, vamos ter um atraso considerável até que todas as páginas estejam prontas. Sendo assim, quanto mais páginas eu tenho que gerar de forma estática maior será o tempo de build.
O problema com a geração de sites estáticos: como o tempo de construção aumentam linearmente com o número de páginas, você pode ficar preso por horas até que seu site seja construído.
Mesmo que cada página fosse gerada estaticamente em torno de 1 ms, ainda levaria horas para reconstruir todo o site. Para grandes aplicações da web, escolher a geração completa de sites estáticos não é o primeiro passo. As equipes em grande escala precisam de uma solução híbrida mais flexível e personalizada.
Content Management Systems (CMS)
Atualmente, estamos encontrando cada vez mais o conteúdo do site separado do código. O uso de um CMS Headless permite que os criadores de conteúdo publiquem alterações sem envolver um desenvolvedor. No entanto, com sites estáticos tradicionais, esse processo pode ser lento. Vamos imaginar no seguinte exemplo, parecido com o primeiro. Considere e-commerce com 100.000 produtos. Os preços dos produtos mudam com frequência. Quando um criador de conteúdo alterar o preço de um determinado produto de R$ 100,00 para R$ 75,00 como parte de uma promoção, seu CMS usa um webhook para reconstruir todo o site. Não é viável esperar horas para que o novo preço seja refletido. Quando o tempo de build se torna longo podem ocorrer despesas adicionais. Idealmente, sua aplicação deve ser inteligente o suficiente para entender quais produtos foram alterados e atualizar essas páginas de forma incremental sem a necessidade de uma reconstrução completa. Aí que entra o Incremental Static Regeneration (ISR).
Incremental Static Regeneration (ISR)
O Nextjs permite você criar ou atualizar as página estáticas após o build da aplicação. Incremental Static Regeneration permite que os desenvolvedores e criadores de conteúdo usem a geração estática por página, sem a necessidade de reconstruir todo o site. Com o ISR, você pode manter os benefícios do estático enquanto aumenta a escala para milhões de páginas. Podemos dizer que as novas páginas serão geradas de forma incremental pelo Nextjs.
Considerando o exemplo anterior com e-commerce de 100.000 produtos. Sem o ISR, o tempo de build poderia levar várias horas. Mas com o ISR podemos escolher entre:
- Minimizar o tempo de build
Gerando os 1.000 produtos mais comprados no momento do build e as próximas páginas serão geradas sob demanda. Conforme o acesso do usuário. - Maior taxa de acerto de cache
Gerando 10.000 produtos no momento do build, garantindo que mais produtos sejam armazenados em cache antes da solicitação do usuário. O restante das páginas serão geradas sob demanda.
Exemplo
Para realizar essa geração de estáticos, o Next espera que seja exportado da página um função chamada getStaticProps.
1// pages/products/[slug].js
2
3export async function getStaticProps({ params }) {
4 return {
5 props: {
6 product: await getProductFromDatabase(params.slug)
7 },
8 revalidate: 60
9 }
10}
11Ao especificar revalidate: 60, informamos para o Next.js para usar ISR para está página. Sendo assim, a cade 60 segundos está página terá seu conteúdo atualizado e uma nova versão estática será gerada.
Com o Next.js podemos definir quais produtos serão gerados no momento do build e quais sob demanda.Vamos gerar apenas os 1.000 produtos mais comprados no momento do build, fornecendo ao getStaticPaths uma lista dos 1.000 principais IDs de produto. Precisamos configurar como Next.js fará um "fallback" ao solicitar qualquer um dos outros produtos após a construção inicial. Existem três opções para escolher: blocking, true e false.
- fallback: "blocking" (Recomendado)
Quando uma solicitação é feita para uma página que não foi gerada, Next.js irá renderizar a página no servidor na primeira solicitação. As próximas solicitações para está página, a versão entregue será do cache. As páginas são entregues sob demanda. - fallback: "true"
Quando uma solicitação é feita para uma página que não foi gerada, Next.js irá servir imediatamente uma página estática com um estado de carregamento na primeira solicitação. Quando o carregamento dos dados for concluído, a página será renderizada novamente com os novos dados e armazenada em cache. Solicitações futuras servirão ao arquivo estático do cache. - fallback: "false"
Se nenhum ID foi passado no "paths", será retornado um 404.
1// pages/products/[slug].js
2
3export async function getStaticPaths() {
4 const products = await getTop1000Products()
5 const paths = products.map((product) => ({
6 params: { slug: product.id }
7 }))
8
9 return { paths, fallback: ‘blocking’ }Conclusão
O Next.js se concentra em primeiro lugar no usuário final. A “melhor solução” é relativa e varia de acordo com a natureza da aplicação. Ao permitir que os desenvolvedores alternem entre as soluções sem sair dos limites da estrutura, o Next.js permite que você escolha a ferramenta certa para o projeto dando uma maior flexibilização no desenvolvimento.