Next.js: Inkrementelle statische Regeneration (ISR)

Mit inkrementeller statischer Regeneration (ISR)

Wir können statische Inhalte aktualisieren, ohne die gesamte Website neu erstellen zu müssen. Wir können die Serverlast reduzieren, indem wir für die meisten Anfragen vorab erstellte statische Seiten bereitstellen. Wir können eine große Anzahl von Inhaltsseiten verarbeiten, bevor die nächste Erstellung lange dauert.

Beginnen wir mit einem Beispiel :

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>
  )
}

Wie funktioniert dieses Beispiel?

Alle an diese Seiten gestellten Anfragen (z. B. /post/1) werden zwischengespeichert und sind sofort verfügbar. Nach Ablauf von 30 Sekunden wird bei der nächsten Anfrage immer noch die zwischengespeicherte (veraltete) Seite angezeigt. Der Cache wird ungültig und im Hintergrund wird eine neue Version der Seite generiert. Nach erfolgreicher Generierung zeigt Next.js die aktualisierte Seite an und speichert sie zwischen. Wenn /post/12 angefordert wird, generiert Next.js diese Seite bei Bedarf und speichert sie zwischen.

Wenn Sie mehr Präzision benötigen, kann eine On-Demand-Revalidierung verwendet werden. Wenn Sie jedoch Echtzeitdaten benötigen, sollten Sie einen Wechsel zur dynamischen Verarbeitung in Betracht ziehen.

---

On-Demand-Revalidierung mit revalidatePath

Mit Next.js können Sie den Cache einer bestimmten Seite oder Route manuell leeren. Das heißt, wenn ein bestimmter Inhalt aktualisiert wird, können Sie nicht alle Seiten neu erstellen, sondern nur die geänderte Seite oder den geänderten Inhalt neu erstellen.

Wenn Sie möchten, dass die Seite sofort aktualisiert wird, wenn es eine Änderung gibt (z. B. wenn ein neuer Beitrag hinzugefügt wird), können Sie diesen Vorgang mit der Funktion revalidatePath auslösen. Mit anderen Worten: Sie können dafür sorgen, dass der neue Inhalt angezeigt wird, sobald dem Benutzer ein neuer Inhalt hinzugefügt wird.

'use server'

import { revalidatePath } from 'next/cache'

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

---

On-Demand-Revalidierung mit revalidateTag

Next.js-Anwendungen ermöglicht es Ihnen, ihren Cache manuell zu leeren, indem Sie bestimmte Daten oder Inhalte markieren. Dies wird verwendet, um den gesamten Cache dieses Inhalts zu löschen, wenn sich ein bestimmter Inhalt ändert. Wenn der Inhalt aktualisiert wird, sehen Benutzer die neuesten Daten.

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

Sie können dann revalidateTag verwenden:

'use server'

import { revalidateTag } from 'next/cache'

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

---

ISR wird beim Erstellen eines Statischen Exports nicht unterstützt. Wenn Sie mehrere Abrufanforderungen in einer statisch gerenderten Route haben und jede eine andere Revalidierungsfrequenz hat, wird die niedrigste Zeit für ISR verwendet. Diese Neuvalidierungshäufigkeiten werden jedoch weiterhin vom Datencache berücksichtigt. Wenn eine der auf einer Route verwendeten Abrufanforderungen eine Neuvalidierungszeit von 0 oder eine explizite Nichtspeicherung aufweist, wird die Route dynamisch sein gerendert. Middleware wird nicht für On-Demand-BENUTZER-Anfragen ausgeführt, was bedeutet, dass Pfadumschreibungen oder Logik in Middleware nicht angewendet werden. Stellen Sie sicher, dass Sie den genauen Pfad erneut validieren. Zum Beispiel /post/1 anstelle eines umgeschriebenen /post-1.

---

Wenn Ihnen meine Artikel gefallen, können Sie mir einen Kaffee spendieren :)

Das obige ist der detaillierte Inhalt vonNext.js: Inkrementelle statische Regeneration (ISR). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!