0Pricing
Next.js 15 Fullstack Web Apps · Leçon

Mise en cache, revalidation et diffusion progressive

Maîtrisez la façon dont l’App Router met en cache les données récupérées, les revalide selon un calendrier ou à la demande et diffuse l’interface avec Suspense pour accélérer le chargement perçu.

Mise en cache, revalidation et diffusion progressive est une leçon Next.js 15 Fullstack Web Apps gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Next.js 15 Fullstack Web Apps, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Next.js 15 Fullstack Web Apps comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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 hourly

On-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 fetch by default; no-store opts out
  • revalidate enables time-based ISR
  • revalidatePath/revalidateTag invalidate on demand
  • Suspense and loading.js stream UI for fast perceived loads

Questions Fréquemment Posées

La leçon « Mise en cache, revalidation et diffusion progressive » est-elle gratuite ?

Oui — le texte complet de « Mise en cache, revalidation et diffusion progressive » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Next.js 15 Fullstack Web Apps, passe à CoddyKit PRO. Le cours Next.js 15 Fullstack Web Apps comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Mise en cache, revalidation et diffusion progressive » ?

Maîtrisez la façon dont l’App Router met en cache les données récupérées, les revalide selon un calendrier ou à la demande et diffuse l’interface avec Suspense pour accélérer le chargement perçu. Tu pratiques Next.js 15 Fullstack Web Apps avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Next.js 15 Fullstack Web Apps ?

Aucune expérience préalable n'est requise. Next.js 15 Fullstack Web Apps sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Mise en cache, revalidation et diffusion progressive » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Next.js 15 Fullstack Web Apps ?

Oui. Chaque leçon Next.js 15 Fullstack Web Apps inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Approfondissement des composants serveur
  2. Composants client et interactivité
  3. Méthodes avancées de récupération des données
  4. Mise en cache, revalidation et diffusion progressive
← Retour à Next.js 15 Fullstack Web Apps