Next.js

nextjs.org/docs 공식문서의 내용을 번역, 정리한 내용입니다.
사진 출처는 nextjs.org 공식문서입니다.

Revalidating Data

Next.js는 전체 사이트를 다시 빌드하지 않고도 특정한 정적 route들을 업데이트할 수 있게 해준다. 갱신(ISR이라고도 알려진)은 정적인 것의 장점을 수백만개의 페이지로 규모화하는 동안 유지할 수 있도록 한다.

Next.js에는 다음과 같은 2가지 형태의 갱신이 있다:

• Background: 특정 시간 간격으로 데이터 갱신
• On-demand: 업데이트와 같은 이벤트에 기반하여 데이터 갱신

Background Revalidation

특정 긴격으로 캐싱된 데이터를 갱신하기 위해서 fetch() 함수에서 next.revalidate 옵션을 사용하여 리소스의 캐시 생명주기(초 단위로)를 설정할 수 있다.

fetch('https://...', { next: { revalidate: 60 } })

fetch 를 사용하지 않는 데이터(e.g. 외부 패키지나 쿼리 builder를 사용)를 갱신하고 싶다면 route segment 설정을 사용할 수 있다.

// app/page.js
export const revalidate = 60
// 이 페이지를 60초마다 갱신한다.

fetch 이외에도 cache 를 사용하여 데이터를 갱신할 수도 있다.

How it works (동작방식)

1. 빌드 타임에 정적으로 렌더링 된 route에 대한 요청이 발생했을 때 처음에는 캐싱된 데이터를 보여준다.
2. 첫 요청 이후 ~ 60초가 경과하기 전에 발생한 모든 요청도 캐싱되고 즉각적이게 불러온다.
3. 60초 경과 후의 창에서 다음 요청은 캐싱된(최신 상태가 아닌) 데이터를 보여준다.
4. Next.js는 백그라운드에서 데이터 재생성을 작동시킨다.
5. route가 성공적으로 생성되면, Next.js는 캐시를 만료시키고 업데이트 된 route를 보여준다. 백그라운드에서의 재생성이 실패하면 예전 데이터는 변경되지 않는다.

아직 생성되지 않은 route segment에 요청이 발생하면 Next.js는 첫 번째 요청에서 동적으로 route를 렌더링한다. 이후의 요청은 캐시로부터 정적인 route segment를 제공한다.

On-demand Revalidation

만약 revalidate 옵션을 60초로 설정한다면 모든 방문자들은 1분 동안 동일한 버전의 사이트를 보게 된다. 캐시를 만료시키는 유일한 방법은 어떤 사람이 1분이 지난 후 페이지를 방문하는 것이다.

Next.js App Router는 route나 캐시 태그를 기반으로 요구 시 컨텐츠를 갱신하는 것을 도와준다. 이는 특정 fetch들에서 수동적으로 Next.js 캐시를 제거할 수 있도록 하여 다음과 같은 상황들에서 사이트 업데이트를 쉽게 해준다:

• headless CMS의 컨텐츠가 생성되거나 업데이트 되었을 때
• 이커머스 메타데이터의 변경이 있을 때(가격, 설명, 카테고리, 리뷰 등)

Using On-Demand Revalidation

데이터는 경로(revalidatePath)나 캐시 태그(revalidateTag)를 사용하여 요구 시 갱신될 수 있다.

예를 들어 다음 fetch 는 collection 이라는 캐시 태그를 추가한다:

// app/page.js
export default async function Page() {
  const res = await fetch('https://...', { next: { tags: ['collection'] } })
  const data = await res.json()
  // ...
}

캐싱된 데이터는 Route Handler에서 revalidateTag 를 호출하여 요구 시 갱신될 수 있다.

// app/api/revalidate/route.js
import { NextResponse } from 'next/server'
import { revalidateTag } from 'next/cache'
 
export async function GET(request) {
  const tag = request.nextUrl.searchParams.get('tag')
  revalidateTag(tag)
  return NextResponse.json({ revalidated: true, now: Date.now() })
}

Error Handling and Revalidation

데이터 갱신을 시도할 때 에러가 발생한다면, 가장 마지막에 성공적으로 생성된 데이터가 여전히 캐시에서 제공된다. 이어지는 다음 요청에서 Next.js는 데이터 갱신을 재시도 한다.