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 id="post-title">{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，或者明确的无存储，则该路由将动态呈现。 中间件 不会针对按需用户请求执行，这意味着中间件 中的任何路径重写或逻辑都不会应用。确保您重新验证确切的路径。例如 /post/1 而不是重写的 /post-1。

---

如果你喜欢我的文章，可以请我一杯咖啡:)

以上是Next.js：增量静态再生（ISR）的详细内容。更多信息请关注PHP中文网其他相关文章！