[11장][효중] Next.js 13과 리액트 18(2)

[khj0426]

퀴즈

Next에서 정적으로 생성된 페이지를 점진적으로 갱신하는 전략을 무엇이라 하고 어떻게 구현할 수 있나요?

답

정답

Next.js는 전체 사이트를 다시 빌드하지 않고도 특정한 정적 route들을 업데이트할 수 있게 해줍니다.
Next.js에는 다음과 같은 2가지 형태의 ISR방식이 있습니다:

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

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

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

Next.js App Router는 route나 캐시 태그를 기반으로 요구 시 컨텐츠를 갱신하는 것을 도와줍니다.
이는 다음과 같은 상황에서 유용할 수 있습니다.

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

예를 들어 다음 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() })
}

댓글 작성법

(다음과 같이 답을 작성해 댓글로 달아주세요)
<details>
<summary>정답</summary>
<div markdown="1">
정답 설명
</div>
</details>

[hyoribogo]

정답

모르겠..

[hayamaster]

정답

저도 모르겠,,..