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은 지원되지 않습니다. 정적으로 렌더링된 경로에 여러 개의 가져오기 요청이 있고 각 요청의 재검증 빈도가 다른 경우 ISR에 가장 짧은 시간이 사용됩니다. 그러나 해당 재검증 빈도는 여전히 데이터 캐시에 의해 존중됩니다. 경로에 사용된 가져오기 요청 중 재검증 시간이 0이거나 명시적인 저장 없음이 있는 경우 경로는 동적으로 렌더링되었습니다. 미들웨어는 주문형 USER 요청에 대해 실행되지 않습니다. 즉, 미들웨어의 모든 경로 재작성 또는 논리가 적용되지 않습니다. 정확한 경로를 재검증하고 있는지 확인하세요. 예를 들어 다시 작성된 /post-1 대신 /post/1입니다.

---

제 글이 마음에 드셨다면 커피 한잔 사주시면 됩니다 :)

위 내용은 Next.js: 증분 정적 재생성(ISR)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!