Nextjs：增量静态再生（ISR）

具有增量静态再生 (isr)

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

结论

isr 是内容频繁更新但不需要完全动态渲染的项目的最佳解决方案。然而，在优先考虑实时数据的场景中，切换到动态处理可能更合适。

如果你喜欢我的文章，可以请我一杯咖啡:)
Nextjs：增量静态再生（ISR）

以上就是Nextjs：增量静态再生（ISR）的详细内容，更多请关注www.sxiaw.com其它相关文章！