Next.js 15 Fullstack (App Router + Server Actions) · Leçon

Désactiver le cache : rendu dynamique et no-store

Forcez le comportement dynamique avec les cookies, les en-têtes et la directive no-store lorsque la mise en cache est inappropriée.

Désactiver le cache : rendu dynamique et no-store est une leçon Next.js 15 Fullstack (App Router + Server Actions) 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 (App Router + Server Actions), et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Next.js 15 Fullstack (App Router + Server Actions) comprend 4 leçons au total.

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

When Caching Is Wrong

By default, Next.js 15 tries to make your routes static at build time and cache data aggressively. That is great for marketing pages, but wrong for things that must reflect the current request.

A dashboard showing the logged-in user's data
A page that reads the request's cookies() or headers()
Prices, inventory, or notifications that change every second

This lesson is about opting out of caching: forcing dynamic rendering and disabling fetch caching with no-store.

Static vs Dynamic Rendering

A route is rendered in one of two modes:

Static: rendered once (at build, or in the background) and the HTML/data is reused for everyone.
Dynamic: rendered fresh on every request, so it can read per-request input.

Next.js decides automatically. The moment your code touches a Dynamic API (cookies(), headers(), searchParams) or an uncached fetch, the route switches to dynamic. You rarely flip it manually — you opt out of caching and the renderer follows.

cookies() Forces Dynamic

Reading cookies() inside a Server Component signals that the output depends on the incoming request. In Next.js 15 these APIs are async — you must await them.

Touching cookies() at all moves the route to dynamic rendering. There is no way to read a cookie statically, because a static page has no request to read from.

import { cookies } from 'next/headers';

export default async function DashboardPage() {
  const cookieStore = await cookies();
  const theme = cookieStore.get('theme')?.value ?? 'light';

  // Reading cookies() opts this page out of static rendering
  return <main data-theme={theme}>Welcome back</main>;
}

headers() Forces Dynamic Too

Like cookies, headers() is async in Next.js 15 and reading it forces dynamic rendering. Use it when output depends on request headers such as Authorization, User-Agent, or a geo header from your CDN.

Because the header value is per-request, the page can never be cached as a single static HTML for all users.

import { headers } from 'next/headers';

export default async function GreetingPage() {
  const headerList = await headers();
  const country = headerList.get('x-vercel-ip-country') ?? 'unknown';

  return <h1>Hello from {country}</h1>;
}

fetch with cache: 'no-store'

Next.js extends the native fetch with caching options. By default a fetch result may be cached, which is wrong for always-fresh data.

Pass cache: 'no-store' to bypass the cache entirely. Every render performs a real network request, and the route becomes dynamic.

cache: 'no-store' → never cache, always refetch
cache: 'force-cache' → cache indefinitely (the old default)

async function getLivePrice(symbol: string) {
  const res = await fetch(`https://api.example.com/price/${symbol}`, {
    cache: 'no-store',
  });
  return res.json() as Promise<{ price: number }>;
}

export default async function PricePage() {
  const { price } = await getLivePrice('BTC');
  return <p>Current price: {price}</p>;
}

next: { revalidate: 0 } Is the Same

There are two equivalent ways to disable caching on a single fetch:

{ cache: 'no-store' }
{ next: { revalidate: 0 } }

Both mean "do not serve this from cache." Prefer cache: 'no-store' for readability. Do not combine cache: 'force-cache' with revalidate: 0 — those conflict, and Next.js will warn.

// These two calls behave identically
await fetch(url, { cache: 'no-store' });
await fetch(url, { next: { revalidate: 0 } });

Route Segment: dynamic = 'force-dynamic'

Instead of opting out per fetch, you can opt out for an entire route segment using the route segment config. Exporting dynamic = 'force-dynamic' from a page.tsx or layout.tsx forces every render to be dynamic and disables the data cache for that segment.

Use this when most data on the page must be fresh, so you do not have to annotate each fetch individually.

// app/feed/page.tsx
export const dynamic = 'force-dynamic';

export default async function FeedPage() {
  // No need for cache: 'no-store' on each fetch —
  // the whole segment is dynamic
  const res = await fetch('https://api.example.com/feed');
  const items = await res.json();
  return <ul>{items.map((i: { id: string; text: string }) => <li key={i.id}>{i.text}</li>)}</ul>;
}

fetchCache: 'default-no-store'

A subtler knob is fetchCache. Setting fetchCache = 'default-no-store' changes the default for every fetch in the segment to no-store, while still letting an individual fetch opt back in with cache: 'force-cache'.

This is handy for an authenticated area where almost everything is per-user, but a few public lookups can still be cached.

// app/(app)/layout.tsx
export const fetchCache = 'default-no-store';

// Now any plain fetch() in this segment defaults to no-store.
// Opt back in explicitly when you want caching:
// await fetch(url, { cache: 'force-cache' });

Dynamic APIs in Route Handlers

Route Handlers (route.ts) follow the same rules. A GET handler can be cached unless it reads a Dynamic API or you opt out.

Reading request.url search params, or calling cookies()/headers(), makes the handler dynamic. You can also force it with export const dynamic = 'force-dynamic'.

// app/api/me/route.ts
import { cookies } from 'next/headers';
import { NextResponse } from 'next/server';

export const dynamic = 'force-dynamic';

export async function GET() {
  const session = (await cookies()).get('session')?.value;
  if (!session) {
    return NextResponse.json({ error: 'unauthorized' }, { status: 401 });
  }
  return NextResponse.json({ user: session });
}

Server Actions Are Always Dynamic

Server Actions run in response to a user interaction, so they are inherently dynamic — they are never statically cached. They read the cache and can invalidate it, but the action body itself always executes fresh.

After mutating data in an action, call revalidatePath or revalidateTag so cached pages refetch. The action does not need no-store itself.

'use server';
import { revalidatePath } from 'next/cache';

export async function addComment(postId: string, text: string) {
  await db.comment.create({ data: { postId, text } });
  // Force the post page to refetch its (otherwise cached) data
  revalidatePath(`/posts/${postId}`);
}

Don't Reach for no-store Too Early

Opting out of caching is a real performance cost: every request hits your origin and database. Before forcing dynamic everywhere, ask whether time-based revalidation would do.

Data fresh within a few seconds → next: { revalidate: 5 }
Data must reflect this exact request → no-store / dynamic
Data changes on a known event → cache + revalidateTag on mutation

Use no-store when correctness truly depends on per-request freshness — not as a reflex to "make it work."

Quick Check

Test your understanding of opting out of caching in Next.js 15.

Recap

You learned how to opt out of caching when it would be wrong:

Dynamic APIs — awaiting cookies() or headers() automatically forces dynamic rendering.
Per-fetch — cache: 'no-store' (or next: { revalidate: 0 }) skips the data cache.
Per-segment — export const dynamic = 'force-dynamic' makes the whole route dynamic; fetchCache = 'default-no-store' changes the default per fetch.
Route Handlers follow the same rules; Server Actions are always dynamic and invalidate caches with revalidatePath/revalidateTag.
Restraint — prefer time-based or tag-based revalidation; reach for no-store only when correctness needs per-request freshness.

Questions Fréquemment Posées

La leçon « Désactiver le cache : rendu dynamique et no-store » est-elle gratuite ?

Oui — le texte complet de « Désactiver le cache : rendu dynamique et no-store » 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 (App Router + Server Actions), passe à CoddyKit PRO. Le cours Next.js 15 Fullstack (App Router + Server Actions) comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Désactiver le cache : rendu dynamique et no-store » ?

Forcez le comportement dynamique avec les cookies, les en-têtes et la directive no-store lorsque la mise en cache est inappropriée. Tu pratiques Next.js 15 Fullstack (App Router + Server Actions) 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 (App Router + Server Actions) ?

Aucune expérience préalable n'est requise. Next.js 15 Fullstack (App Router + Server Actions) 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 « Désactiver le cache : rendu dynamique et no-store » ?

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 (App Router + Server Actions) ?

Oui. Chaque leçon Next.js 15 Fullstack (App Router + Server Actions) 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

Les quatre caches : requête, données, route complète et routeur
Stratégies de revalidation temporelle et à la demande
Invalidation par balises pour une purge précise du cache
Désactiver le cache : rendu dynamique et no-store

← Retour à Next.js 15 Fullstack (App Router + Server Actions)