[11장][효중] Next.js 13과 리액트 18(2)
Closed this issue · 2 comments
khj0426 commented
퀴즈
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 commented
정답
모르겠..
hayamaster commented
정답
저도 모르겠,,..