Almacenamiento en caché, revalidación y streaming
Domine cómo el App Router almacena en caché los datos obtenidos, los revalida según un horario o bajo demanda y transmite la interfaz con Suspense para acelerar la carga percibida.
Almacenamiento en caché, revalidación y streaming es una lección gratuita de Next.js 15 Fullstack Web Apps en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Next.js 15 Fullstack Web Apps, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Next.js 15 Fullstack Web Apps incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en 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
Aprende TypeScript con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 12
- Lecciones
- 48
Preguntas frecuentes
¿La lección «Almacenamiento en caché, revalidación y streaming» es gratis?
Sí — el texto completo de «Almacenamiento en caché, revalidación y streaming» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Next.js 15 Fullstack Web Apps, actualiza a CoddyKit PRO. El curso de Next.js 15 Fullstack Web Apps incluye 4 lecciones en total.
¿Qué aprenderé en «Almacenamiento en caché, revalidación y streaming»?
Domine cómo el App Router almacena en caché los datos obtenidos, los revalida según un horario o bajo demanda y transmite la interfaz con Suspense para acelerar la carga percibida. Practicas Next.js 15 Fullstack Web Apps con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Next.js 15 Fullstack Web Apps?
No se requiere experiencia previa. Next.js 15 Fullstack Web Apps en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Almacenamiento en caché, revalidación y streaming»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Next.js 15 Fullstack Web Apps?
Sí. Cada lección de Next.js 15 Fullstack Web Apps incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Profundización en los Server Components
- Client Components e interactividad
- Patrones avanzados de obtención de datos
- Almacenamiento en caché, revalidación y streaming