12. ISR

오늘 정리한 내용은 공식 문서 학습 후 정리한 내용입니다.

🎈 소개

ISR은 점진적 정적 재생성 또는 증분적 정적 재생성이라고 부른다. 사실 이 단어만 보면 전혀 와닿지가 않는다.

ISR은 정적 사이트 생성과 서버사이드 렌더링을 결합한 기능이다. 빌드 시 일부 정적 페이지를 미리 생성 후 캐싱하여 사용자가 좀더 빠른게 접근할 수 있게 해준다.

 

이후 새롭게 업데이트 된 컨텐츠에 대한 요청이 발생하면 기존 정적 페이지를 보여주다가, 업데이트 완료되어 캐싱되면 이후 부터는 캐시에서 새로운 컨텐츠를 불러올 수 있게 된다.

 

export const revalidate = 60
export const dynamicParams = true
 
export async function generateStaticParams() {
  const posts = await fetch('http://localhost:3000/posts').then((res) =>
    res.json()
  );
  
  return posts.map((post) => ({
    id: String(post.id),
  }));
}
 
export default async function Page({ params }) {
  const { id } = await params
  const post = await fetch(`http://localhost:3000/posts/${id}`).then((res) =>
    res.json()
  )
  return (
    <main>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </main>
  )
}

1. 빌드 동안 generateStaticParams 내부에서 호출한 모든 게시글에 대해서 페이지가 생성된다.
2. 이 페이지로의 요청은 모두 캐싱된다.
3. 60초(revalidate에서 설정한)가 지난 후의, 다음 요청은 캐싱된 페이지를 보여주게 된다.
4. 이후 캐시는 무효화 되고 새로운 버전의 페이지가 생성을 시작한다.
5. 생성이 완료 되면 업데이트 된 페이지를 캐시하고 보여준다.
6. 새로운 페이지에 대한 요청이 오면 페이지를 서버렌더링한다. 이후의 요청은 캐시에서 정적파일을 제공한다. 

1 ~ 5번까지는 기존에 캐싱된 데이터가 존재하는 요청에 대한 설명이다.

6번은 캐싱된 데이터가 존재하지 않는 요청에 대한 설명이다.

 

✨ 데이터 재검증 시도동안 오류가 발생하면 마지막으로 성공한 캐시를 계속 제공한다. 다음 요청시 재검증을 시도한다.

 

 

예제

👓 시간 기반 무효화

아래와 같이 페이지에 설정한 시간이 지난 후 해당 페이지를 요청하면 캐시가 무효화되게 됩니다. 즉 시간이 지났다고 바로 무효화되는 것이 아닌 시간이 지난 후 다시 요청을 보내야 무효화되게 됩니다.(이 요청까지는 이전 캐싱된 페이지를 보여줌)

export const revalidate = 3600

export default async function Page() {
  //...
}

 

✨ Nextjs에서는 시간 단위와 같은 긴 시간으로 셋팅하는 것을 권장한다.

 

 

📯 온디맨드 무효화

reavalidatePath와 함께 사용해서 좀더 정밀하게 캐시를 무효화할 수 있다. 특정 경로에 대한 요청을 무효화한다.

예를들어 새로운 게시글이 생성이 되면 전체 게시글 경로에 대한 페이지를 무효화할 수 있다.

'use server'
 
import { revalidatePath } from 'next/cache'
 
export async function createPost() {
  revalidatePath('/posts')
}

 

 

revalidateTag를 사용해서 좀더 세분화된 제어가 필요할때 해당 함수를 사용할 수 있다.

아래와 같이 요청에 태그를 사용한후 이후 무효화해야할 때 revalidateTag 를 사용해볼 수 있다.

export default async function Page() {
  const data = await fetch('http://localhost:3000/posts', {
    next: { tags: ['posts'] },
  });
  
  const posts = await data.json()
  // ...
}

'use server'
 
import { revalidatePath } from 'next/cache'
 
export async function createPost() {
  revalidateTag('/posts')
}