Next.js : 増分静的再生成 (ISR)

インクリメンタル静的再生 (ISR) あり

サイト全体を再作成しなくても、静的コンテンツを更新できます。ほとんどのリクエストに対して事前に作成された静的ページを提供することで、サーバーの負荷を軽減できます。次回の作成に時間がかかる前に、大量のコンテンツ ページを処理できます。

例から始めましょう :

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

この例はどのように機能するのか?

これらのページ (/post/1 など) に対して行われたすべてのリクエストは キャッシュされ、瞬時に処理されます。 30 秒が経過した後も、次のリクエストではキャッシュされた (古い) ページが表示されます。 キャッシュが無効になり、ページの新しいバージョンがバックグラウンドで生成され始めます。正常に生成されると、Next.js は更新されたページを表示してキャッシュします。/post/12 がリクエストされた場合、Next.js はこのページをオンデマンドで生成してキャッシュします。

さらに精度が必要な場合は、オンデマンド再検証を使用できますが、リアルタイムのデータが必要な場合は、動的処理への切り替えを検討してください。

---

revalidatePath を使用したオンデマンドの再検証

Next.js を使用すると、特定のページまたはルートのキャッシュを手動でクリアできます。つまり、特定のコンテンツが更新された場合、すべてのページを再作成するのではなく、変更されたページまたはコンテンツのみを再作成できます。

変更があったとき (たとえば、新しい投稿が追加されたとき)、ページをすぐに更新したい場合は、revalidatePath 関数を使用してこのプロセスをトリガーできます。つまり、新しいコンテンツがユーザーに追加されるとすぐに、新しいコンテンツが表示されるようにすることができます。

'use server'

import { revalidatePath } from 'next/cache'

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

---

revalidateTag を使用したオンデマンドの再検証

Next.js アプリケーションでは、特定のデータまたはコンテンツをタグ付けすることで、キャッシュを手動でクリアできます。これは、特定のコンテンツが変更されたときに、そのコンテンツのキャッシュ全体をクリアするために使用されます。コンテンツが更新されると、ユーザーには最新のデータが表示されます。

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

その後、revalidateTag を使用できます:

'use server'

import { revalidateTag } from 'next/cache'

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

---

ISR は、静的エクスポート を作成する場合にはサポートされません。静的にレンダリングされたルートに複数のフェッチ リクエストがあり、それぞれの revalidate 頻度が異なる場合、最も低い時間が ISR に使用されます。ただし、これらの再検証頻度はデータ キャッシュによって引き続き考慮されます。ルートで使用される フェッチ リクエスト のいずれかが再検証時間 0 であるか、明示的にストアなしの場合、ルートは動的に再検証されます。レンダリングされました。 ミドルウェアは、オンデマンド USER リクエストに対して実行されません。つまり、ミドルウェアのパス書き換えやロジックは適用されません。正確なパスを再検証していることを確認してください。たとえば、書き換えられた /post-1 の代わりに /post/1 になります。

---

私の記事が気に入ったら、コーヒーをおごってください :)

以上がNext.js : 増分静的再生成 (ISR)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。