😎 서버에서 fetch
Next.js 에선 Web API에서 제공되는 fetch API의 확정된 버전을 제공합니다. 덕분에 Next.js에선 fetch로 각각의 페치 요청에 대한 캐싱(Caching)과 재검증(Revalidating) 동작을 설정할 수 있다.
async function getData() {
const res = await fetch('https://api.example.com/...')
// 직렬화되지 않기 때문에 데이터 타입을 바로 사용할 수 있습니다.
if (!res.ok) {
// 에러를 던지면 가장 가까이 있는 error.tsx 파일에 걸립니다.
throw new Error('Failed to fetch data')
}
return res.json()
}
export default async function Page() {
const data = await getData()
return <main></main>
}➡️ 데이터 캐싱(caching)
캐싱이란? 파일 복사본을 캐시 또는 임시 저장 위치에 저장하여 보다 빠르게 액세스할 수 있도록 하는 프로세스입니다.
- 기본적으로 fetch에 의해 발생한 요청은 자동으로 캐싱된다.
// 'force-cache' 설정이 기본 값입니다.
fetch('https://...', { cache: 'force-cache' })- Next.js에서는 여러 단계에 걸쳐 캐싱 동작이 수행됩니다. 데이터 캐시뿐 아니라 렌더링 단계에 있는 메모화(Memoization), 라우트 전체 캐시(Full Route Cache), 라우터 캐시(Router Cache)가 존재하죠.
➡️ 데이터 재검증(Revalidating)
최신의 데이터를 원한다면 재검증을 통해 캐싱된 데이터를 무효화할 수 있습니다.
시간 기반 재검증(Time-based revalidtaion)
- 특정 시간이 지난 이후에
자동으로 재검증 되도록 설정할 수 있다.
- 시간이 지난 캐시 데이터는 신선하지 않은 데이터로 판별될 뿐 삭제되진 않는다.
- 재요청이 있을 때 신선한 데이터를 다시 불러온다. 이는 데이터가 자주 변경되지 않고 신선도가 중요하지 않는 경우에 유용하다.
// 3600초(60분) 동안 유효한 fetch
fetch('https://...', { next: { revalidate: 3600 } })
온디맨드 재검증(On-demand revalidtaion)
수동으로 재검증할 수 있다.
- 온디맨드 재검증은
태그(tag)혹은경로(path)를 기반으로 특정 데이터 그룹을 일괄 재검증할 수 있다.
- 이때 재검증된 캐시 데이터는 삭제된다.
- 즉각적으로 최신 데이터를 확보해야 하는 경우에 유용하다.
// 데이터에 태그를 달아둡니다.
fetch('https://...', { next: { tags: ['collection'] } })
// 태그된 데이터를 재검증합니다.
revalidateTag('collection')
