Revalidação no Next.js: Mantenha Dados Atualizados sem Perda de Performance

Você já se perguntou como manter seu site rápido e com conteúdo sempre atualizado? A resposta pode estar no Incremental Static Regeneration (ISR) do Next.js. Essa ferramenta permite que páginas estáticas sejam atualizadas em segundo plano, sem comprometer a experiência do usuário. Imagine ter a velocidade das páginas estáticas com a atualização constante do conteúdo, sem precisar reconstruir o site inteiro a cada mudança.

Neste artigo, vamos explorar o que é o Incremental Static Regeneration, como ele funciona e quando utilizá-lo. Também vamos mostrar como implementar o revalidate no getStaticProps, além de discutir as melhores práticas para escolher o tempo de revalidação ideal. Prepare-se para dominar essa técnica e garantir que seu site esteja sempre rápido e atualizado.

O que é Incremental Static Regeneration (ISR)?

Entendendo o Incremental Static Regeneration

O Incremental Static Regeneration (ISR) é uma funcionalidade do Next.js que permite atualizar páginas estáticas sem precisar reconstruir todo o site. Tradicionalmente, a geração de sites estáticos (SSG) cria todas as páginas no momento da construção, o que as torna extremamente rápidas, mas também significa que elas permanecem inalteradas até a próxima implantação. O ISR resolve essa limitação, permitindo que o Next.js regenere páginas estáticas em segundo plano, mantendo o site operacional.

Com o ISR, você pode definir um período de revalidação que informa ao Next.js quando atualizar a página. Se uma solicitação chegar após esse período, a página será reconstruída em segundo plano, garantindo que os usuários sempre recebam conteúdo atualizado, mantendo os benefícios da geração estática. Essa abordagem é ideal para sites que precisam de atualizações frequentes, mas não exigem dados em tempo real a cada solicitação.

Como o ISR Funciona nos Bastidores

Quando uma página utiliza o ISR, o processo segue os seguintes passos:

Construção Inicial: A página é gerada como um arquivo estático no momento da construção e servida aos usuários.
Servindo a Página em Cache: Até que o tempo de revalidação expire, os usuários continuam vendo a versão em cache da página.
Acionando a Regeneração: Quando uma solicitação chega após o período de revalidação, o Next.js começa a regenerar a página em segundo plano, enquanto ainda serve a versão antiga.
Substituindo a Página Antiga: Assim que a regeneração é concluída, a página recém-gerada substitui a versão antiga, e todos os usuários subsequentes recebem o conteúdo atualizado.

Essa abordagem garante que as páginas estejam sempre disponíveis instantaneamente, mesmo enquanto estão sendo atualizadas em segundo plano, tornando o ISR uma excelente escolha para páginas que precisam de atualizações periódicas, mas não exigem dados em tempo real.

Quando Você Deve Usar o ISR?

O ISR é ideal em cenários onde o conteúdo é atualizado frequentemente, mas não exige atualizações em tempo real a cada solicitação. Alguns casos de uso comuns incluem:

Sites de notícias que publicam artigos e desejam atualizar o conteúdo periodicamente sem diminuir a velocidade de carregamento das páginas.
Páginas de produtos de e-commerce onde os detalhes do produto mudam, mas não precisam de atualizações instantâneas.
Posts de blog que precisam de atualizações ocasionais, mantendo o desempenho estático rápido.
Páginas de marketing com informações que mudam em um cronograma, como páginas de eventos ou promoções de vendas.

O ISR ajuda a manter as vantagens de velocidade das páginas estáticas, permitindo atualizações automáticas, eliminando a necessidade de implantações manuais frequentes. Essa flexibilidade é crucial para sites que precisam equilibrar desempenho e conteúdo atualizado.

Como o revalidate Funciona no getStaticProps

Agora que entendemos o que é o Incremental Static Regeneration e quando usá-lo, vamos nos aprofundar em como ele funciona na prática. A chave para implementar o ISR no Next.js é a propriedade revalidate dentro do getStaticProps.

Usando revalidate no getStaticProps

No Next.js, o getStaticProps é usado para buscar dados no momento da construção e gerar uma página estática. Ao adicionar um campo revalidate ao seu objeto de retorno, informamos ao Next.js para regenerar a página em um intervalo especificado após uma solicitação ser feita.

Aqui está um exemplo de como o revalidate funciona:


export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
    revalidate: 60, // Revalida a página a cada 60 segundos
  };
}

O Que Acontece Nos Bastidores?

A página é construída no momento da implantação com os dados iniciais.
Solicitações subsequentes dentro de 60 segundos recebem a mesma página em cache.
Após 60 segundos, a próxima solicitação aciona uma regeneração em segundo plano.
Durante a regeneração, a página antiga ainda é servida até que a nova esteja pronta.
Assim que a regeneração é concluída, a nova versão substitui a antiga.

Este processo garante que os usuários sempre recebam uma página de carregamento rápido, enquanto o conteúdo permanece razoavelmente atualizado sem exigir solicitações frequentes ao servidor.

Exemplo de Caso de Uso: Revalidando Posts de Blog a Cada 5 Minutos

Imagine que você está executando um blog onde novos artigos são publicados, mas as atualizações dos existentes acontecem periodicamente. Você deseja atualizar os dados a cada cinco minutos sem alternar para a renderização do lado do servidor. Veja como você implementaria isso:


export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
    revalidate: 300, // Revalida a cada 300 segundos (5 minutos)
  };
}

Como Isso Melhora o Desempenho?

Os usuários obtêm uma página estática pré-renderizada para uma experiência super-rápida.
O blog é atualizado sem exigir uma reconstrução ou implantação manual.
As solicitações de API são minimizadas porque os dados são buscados apenas quando necessário.

Quando Usar ISR vs. SSR vs. Static Generation: Diretrizes Práticas

O Incremental Static Regeneration (ISR) é poderoso, mas saber exatamente quando e como usá-lo em seu projeto pode fazer uma grande diferença no desempenho do seu site e na experiência do usuário. Nesta seção, vamos diferenciar claramente entre ISR, Server-Side Rendering (SSR) e páginas totalmente estáticas (SSG), analisando cenários específicos, ajudando você a tomar decisões informadas.

ISR (Incremental Static Regeneration)

Use ISR quando:

Seu conteúdo muda frequentemente, mas não constantemente.
Você precisa de páginas de carregamento rápido, mas também deseja que elas sejam atualizadas regularmente sem intervenção manual.
Dados ligeiramente desatualizados (minutos ou horas) são aceitáveis.

Exemplos de Cenários:

Sites de notícias ou blogs atualizando o conteúdo várias vezes ao dia.
Sites de e-commerce exibindo listagens de produtos atualizadas por hora.

Exemplo de Implementação:


export async function getStaticProps() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();

  return {
    props: { products },
    revalidate: 3600, // Atualiza uma vez por hora
  };
}

Quando Usar Server-Side Rendering (SSR)?

SSR (getServerSideProps) gera a página em cada solicitação, fornecendo dados sempre atualizados, à custa do desempenho.

Quando o SSR Faz Sentido:

Os dados devem ser atualizados a cada solicitação.
Painéis em tempo real, preços de ações, dados específicos do usuário.

Exemplo de SSR:


export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/user/${context.params.id}`);
  const userData = await res.json();

  return { props: { user: userData } };
}

Quando Aderir ao Estático (SSG)

Páginas estáticas construídas inteiramente no momento da construção oferecem o melhor desempenho porque nunca exigem regeneração após a implantação.

Casos de Uso Ideais para Páginas Estáticas:

Páginas de marketing ou landing pages com atualizações infrequentes.
Sites de documentação com conteúdo relativamente estático.

Exemplo de Geração Estática:


export async function getStaticProps() {
  const res = await fetch('https://api.example.com/static-info');
  const staticInfo = await res.json();

  return { props: { staticInfo: staticInfo } };
}

Tabela de Comparação Rápida

Característica	ISR	SSR	Estático (SSG)
Renderização	Na construção e revalidação periódica	Em cada solicitação	Apenas no momento da construção
Atualização de Dados	Frequente, mas ligeiramente atrasada	Sempre atualizado	Desatualizado após a implantação
Desempenho	Alto	Moderado	Muito Alto
Carga do Servidor	Baixo	Alto	Mínimo

Compreender essas distinções permitirá que você aplique o ISR precisamente onde ele é mais benéfico, melhorando tanto a experiência do usuário quanto a eficiência da sua infraestrutura. Se você busca mais informações sobre como otimizar seu site, confira este artigo sobre como usar o App Freeze no Android 15 para liberar espaço, que pode complementar suas estratégias de desempenho.

Técnicas Avançadas: Revalidação Manual e Condicional

Embora a revalidação automática com getStaticProps seja poderosa, às vezes você precisa de mais controle sobre exatamente quando e como as páginas são regeneradas. O Next.js oferece técnicas avançadas para acionar manualmente a regeneração ou revalidar condicionalmente apenas quando necessário.

Revalidação Manual com res.revalidate()

O Next.js permite que você acione manualmente a revalidação por meio de uma chamada de API simples. Isso é extremamente útil para cenários onde você deseja atualizações imediatas quando o conteúdo muda — como quando um administrador publica ou edita conteúdo em seu CMS.

Implementando a Revalidação Manual:

Crie uma rota de API dedicada para acionar manualmente a regeneração:


// pages/api/revalidate.js
export default async function handler(req, res) {
  if (req.query.secret !== process.env.REVALIDATION_SECRET) {
    return res.status(401).json({ message: 'Invalid token' });
  }

  try {
    await res.revalidate('/blog');
    return res.json({ message: 'Blog page revalidated successfully' });
  } catch (error) {
    return res.status(500).json({ message: 'Error revalidating page' });
  }
}

Quando Usar a Revalidação Manual?

Atualizar instantaneamente o conteúdo após uma atualização do CMS.
Refletir imediatamente mudanças importantes, como atualizações de preços ou notícias de última hora.
Reduzir a regeneração desnecessária acionando atualizações apenas quando o conteúdo realmente muda.

Revalidação Condicional

A revalidação condicional é útil quando você deseja regenerar uma página apenas se os dados tiverem mudado, minimizando assim a carga do servidor e as chamadas de API.

Exemplo de Revalidação Condicional:

Veja como você poderia revalidar condicionalmente uma página com base em se novos dados estão disponíveis:


export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  const dataHash = generateHash(data); // Sua função para hash de dados
  const previousHash = getCachedHash(); // Recupere do Redis ou banco de dados

  if (dataHash === previousHash) {
    // Pular regeneração, pois os dados não foram alterados
    return {
      props: { data },
      revalidate: 600, // Tente novamente mais tarde
    };
  }

  // Atualizar hash em cache, pois os dados foram alterados
  updateCachedHash(dataHash);

  return {
    props: { data },
    revalidate: 60,
  };
}

Como Isso Melhora Sua Aplicação:

Reduz regenerações desnecessárias, economizando recursos.
Garante que as páginas sejam regeneradas apenas quando novos dados relevantes aparecem.
Ajuda a dimensionar sua aplicação de forma eficiente, especialmente sob alto tráfego.

Melhores Práticas para Revalidação Avançada:

Proteja seu endpoint de revalidação manual com um token secreto para evitar revalidação não autorizada.
Monitore o desempenho e os logs para otimizar seus intervalos de revalidação.
Mantenha a lógica de revalidação condicional leve — verificações complexas podem desacelerar a regeneração e diminuir as vantagens de desempenho.

Com essas técnicas avançadas, você obterá maior controle, eficiência e otimização de desempenho além do básico fornecido pelo ISR automático.

Melhores Práticas para Otimizar o ISR no Next.js

O Incremental Static Regeneration é um recurso robusto, mas como qualquer ferramenta poderosa, requer uma consideração cuidadosa para realmente maximizar seu potencial. Nesta seção, exploraremos estratégias práticas e melhores práticas para ajustar o ISR de forma eficaz, atingindo o equilíbrio ideal entre dados atualizados e eficiência de desempenho.

1. Escolha o Tempo de Revalidação Ideal

Selecionar um intervalo de revalidate apropriado é crucial. Se o intervalo for muito curto, você corre o risco de regeneração excessiva, aumentando a carga da API e do servidor. Se for muito longo, seus usuários poderão ver conteúdo desatualizado. Procure encontrar um equilíbrio com base no caso de uso da sua aplicação.

Diretrizes de exemplo:

Alta frequência (1-10 minutos): Para blogs, notícias, atualizações meteorológicas.
Frequência moderada (30 minutos – 1 hora): Para listagens de produtos, avaliações ou páginas iniciais dinâmicas.
Baixa frequência (várias horas ou dias): Documentação estática, páginas de destino atualizadas com pouca frequência.

Limitar a Regeneração com Cabeçalhos Cache-Control

O Next.js permite que você especifique explicitamente os cabeçalhos de cache, controlando ainda mais o cache no nível da CDN ou do navegador. Isso complementa o ISR e ajuda a reduzir a carga desnecessária.

Exemplo de configuração de cabeçalhos Cache-Control:


// pages/api/products.js
export default async function handler(req, res) {
  const products = await fetchProductsFromDB();
  res.setHeader('Cache-Control', 'public, s-maxage=3600, stale-while-revalidate=59');
  res.status(200).json(products);
}

s-maxage: Define a duração do cache no nível da CDN.
stale-while-revalidate: Permite servir conteúdo desatualizado temporariamente enquanto os dados são atualizados em segundo plano.

2. Evitando Regenerações Excessivas com Verificações Condicionais

A regeneração condicional reduz reconstruções desnecessárias. Implemente uma verificação para verificar se os dados foram alterados antes de regenerar a página, conservando recursos do servidor e melhorando a escalabilidade.

Cenário de exemplo:


export async function getStaticProps() {
  const newData = await fetch('https://api.example.com/data').then(res => res.json());
  const cachedDataHash = getCachedHash(); // do Redis/cache
  const newDataHash = hashFunction(newData);

  if (cachedHash === newData.hash) {
    // Pular regeneração, pois os dados não foram alterados
    return {
      props: { data: newData },
      revalidate: false,
    };
  }

  // Os dados foram alterados
  return {
    props: { data: newData },
    revalidate: 60,
  };
}

Essa abordagem garante que a regeneração ocorra apenas quando necessário.

Aproveitando a Revalidação Manual Sabiamente

A revalidação manual oferece controle preciso, mas pode introduzir complexidade. Use-o estrategicamente:

Atualizar imediatamente páginas críticas após edições de conteúdo (integração com CMS).
Responder rapidamente a notícias de última hora ou atualizações urgentes de produtos.
Equilibrar gatilhos manuais com ISR agendado para garantir a consistência dos dados sem sobrecarregar os recursos.

Monitorando e Ajustando o ISR em Produção

Observar o desempenho do ISR após a implantação ajuda a ajustar suas estratégias de revalidação:

Rastrear a frequência e a duração da regeneração.
Monitorar os tempos de resposta da API e as taxas de acerto do cache.
Ajustar o período de revalidate com base no uso do mundo real.

Ferramentas de monitoramento populares:

Vercel Analytics: Fornece insights integrados sobre o desempenho da regeneração de páginas.
Datadog ou New Relic: Monitoramento e registro avançados de aplicações para configurações personalizadas.

Resumo das Melhores Práticas

Selecione cuidadosamente seu intervalo de revalidação para corresponder às necessidades de atualização do conteúdo.
Use a revalidação manual para atualizar imediatamente as atualizações de conteúdo crítico.
Implemente a revalidação condicional para evitar regenerações desnecessárias.
Monitore e refine continuamente sua estratégia de revalidação com base nas métricas de produção.

Seguir essas melhores práticas garante que suas aplicações Next.js se beneficiem totalmente do ISR, equilibrando velocidade e atualização sem sacrificar o desempenho.

Para complementar suas estratégias de otimização, considere também as novidades do Android 16 Beta 3, que podem trazer melhorias de desempenho para seus usuários mobile.

Em resumo, o Incremental Static Regeneration (ISR) permite alcançar dados atualizados sem comprometer o desempenho em aplicações Next.js, unindo o desempenho imbatível das páginas estáticas e a necessidade de atualização do conteúdo dinâmico. Dominar o ISR permite construir aplicações Next.js que entregam experiências de usuário rápidas sem comprometer a atualização do seu conteúdo.

No próximo artigo, vamos mergulhar no API caching no Next.js, aprendendo como aprimorar ainda mais o desempenho com middleware e cabeçalhos de caching personalizados.

Este conteúdo foi auxiliado por Inteligência Artificiado, mas escrito e revisado por um humano.

Via Dev.to

Como Implementar Revalidação no Next.js para Dados Atualizados