Regeneração estática incremental (ISR)
Regere páginas estáticas conforme uma programação ou sob demanda, sem uma nova implantação completa.
Regeneração estática incremental (ISR) é uma aula grátis de React Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.
O que é ISR
A regeneração estática incremental permite que o Next.js disponibilize uma página estática pré-construída enquanto a regenera em segundo plano após um intervalo especificado — combinando a velocidade do HTML estático com a atualidade da renderização no servidor.
Como o ISR funciona
Na primeira solicitação, o Next.js disponibiliza o HTML estático armazenado em cache. Depois que a janela de revalidação expira, a solicitação seguinte inicia a regeneração em segundo plano. As solicitações subsequentes disponibilizam a nova página quando a regeneração é concluída.
Ativando ISR com revalidate
Exporte uma constante revalidate ou defina next: { revalidate: N } em uma chamada fetch dentro de uma página de um Componente de servidor.
// app/blog/page.tsx
export const revalidate = 60; // regenerate at most every 60 seconds
export default async function BlogPage() {
const posts = await getPosts();
return <PostList posts={posts} />;
}ISR com rotas dinâmicas
Combine generateStaticParams com revalidate para pré-construir páginas dinâmicas populares e revalidá-las de acordo com uma programação.
// app/blog/[slug]/page.tsx
export const revalidate = 3600; // hourly
export async function generateStaticParams() {
const posts = await getTopPosts(100);
return posts.map(p => ({ slug: p.slug }));
}
export default async function PostPage({ params }) {
const post = await getPost(params.slug);
return <Article post={post} />;
}Revalidação sob demanda
Chame revalidatePath() ou revalidateTag() de uma ação do servidor, rota de API ou manipulador de webhook para regenerar páginas específicas imediatamente — sem esperar pelo intervalo.
// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';
export async function POST(req: Request) {
const { secret, path } = await req.json();
if (secret !== process.env.REVALIDATION_SECRET) {
return Response.json({ error: 'Invalid secret' }, { status: 401 });
}
revalidatePath(path);
return Response.json({ revalidated: true, path });
}Comportamento alternativo para caminhos desconhecidos
Para rotas dinâmicas que não estão em generateStaticParams, defina dynamicParams = true (padrão) para renderizar sob demanda e armazenar em cache, ou false para retornar 404.
// app/blog/[slug]/page.tsx
export const dynamicParams = true; // default: render and cache unknown slugs
// export const dynamicParams = false; // return 404 for paths not in generateStaticParamsConteúdo obsoleto durante a revalidação
Durante a regeneração, o Next.js disponibiliza a página obsoleta até que a nova versão esteja pronta. Os usuários sempre recebem uma resposta — sem esperar por dados atualizados.
ISR vs SSR vs estático
Estático: construído uma vez e nunca muda. ISR: pré-construído e regenerado de acordo com uma programação. SSR: renderizado novamente em cada solicitação. Escolha ISR para conteúdo que muda ocasionalmente, mas se beneficia da velocidade de disponibilização do conteúdo estático.
Ressalvas do ISR
O ISR não é adequado para conteúdo personalizado (dados específicos do usuário) nem para dados que precisam ser atualizados em tempo real. Nesses casos, use chamadas fetch com no-store e SSR.
ISR no roteador de páginas (getStaticProps)
No roteador de páginas, o ISR usa getStaticProps com um valor de retorno revalidate — o mesmo conceito, mas com uma API diferente.
// pages/blog.tsx (Pages Router)
export async function getStaticProps() {
const posts = await getPosts();
return { props: { posts }, revalidate: 60 };
}Verificando o ISR
Verifique o cabeçalho de resposta x-nextjs-cache: HIT significa que o conteúdo foi disponibilizado do cache, MISS significa que foi renderizado recentemente e STALE significa que o conteúdo obsoleto está sendo disponibilizado enquanto é revalidado.
Verificação rápida
O que acontece quando um usuário solicita uma página ISR cuja janela de revalidação acabou de expirar?
Recapitulação
O ISR pré-constrói páginas e as revalida a cada N segundos por meio de export const revalidate = N. Use generateStaticParams para rotas dinâmicas populares e a revalidação sob demanda por meio de revalidatePath/Tag para obter atualizações imediatas após mutações.
Perguntas Frequentes
A aula “Regeneração estática incremental (ISR)” é grátis?
Sim — o texto completo de “Regeneração estática incremental (ISR)” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.
O que vou aprender em “Regeneração estática incremental (ISR)”?
Regere páginas estáticas conforme uma programação ou sob demanda, sem uma nova implantação completa. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar React Academy?
Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Regeneração estática incremental (ISR)”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de React Academy?
Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- fetch() com opções de cache no Next.js
- unstable_cache e React cache()
- Regeneração estática incremental (ISR)
- Ações de servidor para mutações de dados