ISR(Incremental Static Regeneration)是如何在Next.js的app目录下工作的?

5tmbdcev  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(88)

pages目录中,我们有ISR,我们可以使用它在构建时生成静态页面。我想在app目录中执行相同的操作。有可能吗?如果没有,我可以使用pages目录和app目录并在其中执行ISR吗?

t1qtbnec

t1qtbnec1#

正如您在迁移指南中所读到的,在app目录中,使用fetch()进行数据提取可以使用revalidate选项来创建ISR:

// app/page.js

export default async function Page() {
  const res = await fetch(`https://.../posts`, { next: { revalidate: 60 } })
  const posts = await res.json()
 
  return posts.map((post) => <div>{post.name}</div>)
}

字符串
如果你没有使用fetch(),而是像Axios这样的东西,或者像Prisma这样的ORM,文档建议使用路由段配置,例如:

// app/page.js

export const revalidate = 60 // revalidate this page every 60 seconds

export default async function Page {
  return "..."
}


此外,数据可以按需通过路径revalidatePath或缓存标记revalidateTag重新验证。例如使用Route Handler

// app/api/revalidate/route.js

import { NextResponse } from 'next/server'
import { revalidatePath } from 'next/cache'
 
export async function GET(request) {
  const path = request.nextUrl.searchParams.get('path') || '/'
  revalidatePath(path)
  return NextResponse.json({ revalidated: true, now: Date.now() })
}

相关问题