Next.js : Régénération statique incrémentale (ISR)

Avec régénération statique incrémentale (ISR)

Nous pouvons mettre à jour le contenu statique sans recréer l'intégralité du site. Nous pouvons réduire la charge du serveur en fournissant des pages statiques pré-créées pour la plupart des requêtes. Nous pouvons traiter un grand nombre de pages de contenu avant que les prochains délais de création ne soient longs.

Commençons par un exemple :

export const revalidate = 30

export const dynamicParams = true // or false, to 404 on unknown paths

export async function generateStaticParams() {
  const posts = await fetch('https://jsonplaceholder.typicode.com/posts/').then((res) =>
    res.json()
  )
  return posts.map((post) => ({
    id: String(post.id),
  }))
}

export default async function Page({ params }) {
  const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`).then(
    (res) => res.json()
  )
  return (
    <main>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </main>
  )
}

Comment fonctionne cet exemple ?

Toutes les requêtes faites sur ces pages (par exemple /post/1) sont mises en cache et instantanées. Après 30 secondes, la requête suivante affichera toujours la page mise en cache (périmée). Le cache est invalidé et une nouvelle version de la page commence à se générer en arrière-plan. Une fois généré avec succès, Next.js affichera et mettra en cache la page mise à jour. Si /post/12 est demandé, Next.js générera et mettra en cache cette page à la demande.

Si vous avez besoin de plus de précision, la revalidation à la demande peut être utilisée, mais si vous avez besoin de données en temps réel, envisagez de passer au traitement dynamique.

---

Revalidation à la demande avec revalidatePath

Next.js vous permet de vider manuellement le cache d'une page ou d'un itinéraire spécifique. Autrement dit, lorsqu'un certain contenu est mis à jour, au lieu de recréer toutes les pages, vous pouvez uniquement recréer la page ou le contenu modifié.

Vous souhaitez que la page soit mise à jour immédiatement en cas de changement (par exemple, lorsqu'un nouveau message est ajouté), vous pouvez déclencher ce processus en utilisant la fonction revalidatePath. Autrement dit, vous pouvez faire apparaître le nouveau contenu dès qu'un nouveau contenu est ajouté à l'utilisateur.

'use server'

import { revalidatePath } from 'next/cache'

export async function createPost() {
  // Invalidate the /posts route in the cache
  revalidatePath('/posts')
}

---

Revalidation à la demande avec revalidateTag

Next.js applications, il permet de vider manuellement leur cache en taguant certaines données ou contenus. Ceci est utilisé pour vider tout le cache de ce contenu lorsqu'un certain contenu change. Lorsque le contenu est mis à jour, les utilisateurs voient les dernières données.

export default async function Page() {
  const data = await fetch('https://api.vercel.app/blog', {
    next: { tags: ['posts'] },
  })
  const posts = await data.json()
  // ...
}

Vous pouvez ensuite utiliser revalidateTag :

'use server'

import { revalidateTag } from 'next/cache'

export async function createPost() {
  // Invalidate all data tagged with 'posts' in the cache
  revalidateTag('posts')
}

---

ISR n'est pas pris en charge lors de la création d'une Exportation statique. Si vous avez plusieurs requêtes de récupération dans une route rendue statiquement et que chacune a une fréquence de revalidation différente, le temps le plus bas sera utilisé pour ISR. Cependant, ces fréquences de revalidation seront toujours respectées par le cache de données. Si l'une des demandes de récupération utilisées sur une route a un temps de revalidation de 0, ou un non-stockage explicite, la route sera dynamiquement rendu. Le Middleware ne sera pas exécuté pour les requêtes USER à la demande, ce qui signifie que les réécritures de chemin ou la logique dans le Middleware ne seront pas appliquées. Assurez-vous de revalider le chemin exact. Par exemple, /post/1 au lieu d'un /post-1 réécrit.

---

Si vous aimez mes articles, vous pouvez m'offrir un café :)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!