Que fait next-cache-components ?
Next.js 16 Composants de Cache - PPR, directive use cache, cacheLife, cacheTag, updateTag
Ce skill fournit des informations et des exemples sur les nouvelles fonctionnalités de cache introduites dans Next.js 16, notamment :
- PPR (Partial Prerendering) : Rendu partiel pré-généré.
- Directive
use cache: Permet de marquer explicitement les parties d'une page ou d'un composant comme étant en cache. cacheLife: Définit la durée de vie d'un cache.cacheTag: Associe un tag à une entrée de cache.updateTag: Force la mise à jour d'un cache associé à un tag.
Pourquoi ce skill est utile
Avec Next.js 16, la gestion du cache devient plus granulaire et explicite. Ces outils permettent d'optimiser les performances en évitant les re-rendus inutiles et en contrôlant précisément quand et comment le cache doit être invalidé.
Exemples d'utilisation
Configuration de cacheLife
Dans next.config.ts :
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
cacheLife: {
default: {
stale: 60, // 1 minute
revalidate: 60 * 5, // 5 minutes
expire: 60 * 60 // 1 heure
}
}
}
export default nextConfig
Utilisation de use cache dans un composant serveur
import { use cache } from 'next/cache'
export default async function CachedPage() {
const data = await fetch('/api/data', { next: { tags: ['mon-tag'] } })
use cache('mon-tag')
return <div>{JSON.stringify(data)}</div>
}
Invalidation avec updateTag
import { revalidateTag } from 'next/cache'
export async function updateData() {
// Invalider tous les caches avec le tag 'mon-tag'
revalidateTag('mon-tag')
}
Plateformes supportées
- Claude Code
- Cursor
- Codex
- Tout agent IA compatible avec Next.js