Cache, revalidação e transmissão
Domine como o Roteador de Aplicativo armazena em cache os dados buscados, os revalida em intervalos ou sob demanda e transmite a interface com Suspense para acelerar o carregamento percebido.
Cache, revalidação e transmissão é uma aula grátis de Next.js 15 Fullstack Web Apps no CoddyKit. Esta é a aula 4 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 Next.js 15 Fullstack Web Apps, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Next.js 15 Fullstack Web Apps inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
Why Caching Matters
Refetching the same data on every request is slow and expensive. The App Router caches results so repeated requests are instant, while giving you control over how fresh that data stays.
The Default fetch Cache
In Server Components, the built-in fetch is extended. By default Next.js may cache responses so the same URL is not refetched within a render. You opt into freshness explicitly.
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();Forcing Fresh Data
For data that must always be current, disable caching with cache: no-store. Each request hits the source.
const res = await fetch(url, { cache: 'no-store' });Time-Based Revalidation (ISR)
Incremental Static Regeneration serves cached data but refreshes it after a set interval. Use the next.revalidate option, in seconds.
const res = await fetch(url, {
next: { revalidate: 60 }, // refresh at most once per minute
});Route Segment Config
You can also set revalidation for a whole route by exporting a segment config constant.
export const revalidate = 3600; // revalidate this route hourlyOn-Demand Revalidation
When data changes (e.g. after a publish), revalidate immediately instead of waiting. Call revalidatePath or revalidateTag from a Server Action or route handler.
import { revalidatePath } from 'next/cache';
revalidatePath('/blog');Cache Tags
Tag fetches so you can invalidate groups of them at once. Add a tag, then revalidate by that tag later.
await fetch(url, { next: { tags: ['posts'] } });
// later:
revalidateTag('posts');What Is Streaming?
Streaming sends HTML to the browser in chunks as it becomes ready. Instead of waiting for the slowest data, the page shell appears immediately and slow parts fill in.
Suspense Boundaries
Wrap a slow component in <Suspense> with a fallback. Next.js streams the fallback first, then swaps in the real content when its data resolves.
import { Suspense } from 'react';
<Suspense fallback={<p>Loading feed...</p>}>
<Feed />
</Suspense>The loading.js File
An automatic streaming boundary: add a loading.js in a route folder and Next.js shows it instantly while the page segment loads. No manual Suspense needed.
export default function Loading() {
return <p>Loading page...</p>;
}Choosing a Strategy
Quick guide:
- Rarely changes -> default cache
- Changes on a schedule ->
revalidate(ISR) - Changes on an event -> on-demand
revalidateTag - Always live ->
no-store
Quick Check
Test your caching knowledge.
Recap
You mastered data freshness and streaming:
- The App Router caches
fetchby default;no-storeopts out - revalidate enables time-based ISR
- revalidatePath/revalidateTag invalidate on demand
- Suspense and loading.js stream UI for fast perceived loads
Perguntas Frequentes
A aula “Cache, revalidação e transmissão” é grátis?
Sim — o texto completo de “Cache, revalidação e transmissão” é 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 Next.js 15 Fullstack Web Apps, atualize para CoddyKit PRO. O curso de Next.js 15 Fullstack Web Apps inclui 4 aulas no total.
O que vou aprender em “Cache, revalidação e transmissão”?
Domine como o Roteador de Aplicativo armazena em cache os dados buscados, os revalida em intervalos ou sob demanda e transmite a interface com Suspense para acelerar o carregamento percebido. Você pratica Next.js 15 Fullstack Web Apps 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 Next.js 15 Fullstack Web Apps?
Nenhuma experiência prévia é necessária. Next.js 15 Fullstack Web Apps 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 4 de 4.
Quanto tempo leva a aula “Cache, revalidação e transmissão”?
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 Next.js 15 Fullstack Web Apps?
Sim. Cada aula de Next.js 15 Fullstack Web Apps 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
- Uma Análise Profunda dos Componentes de Servidor
- Componentes de Cliente e Interatividade
- Padrões Avançados de Busca de Dados
- Cache, revalidação e transmissão