[next 14 공식문서 부시기] 3.1 fetch 를 활용한 데이터 요청과 캐싱 및 재검증 과정

1. fetch 를 사용하여 서버에서 데이터 가져오기

Next.js 는 기본 fetch 웹 API를 확장하여 서버의 각 요청에 대한 캐싱(cashing) 및 재검증(revalidating) 동작을 구성할 수 있도록 합니다.

또한 Server Components, Route Handlers, Server Actions 등 에서 async/await 와 함께 fetch 를 사용할 수 있습니다.

1.1 캐싱(cashing)

기본적으로 Next.js는 fetch 의 반환 값을 서버의 데이터 캐시에 자동으로 캐시합니다. 이는 빌드 시 또는 요청 시 데이터를 가져오고, 캐시하고, 각 데이터 요청에서 재사용할 수 있음을 의미합니다.

1.2 재검증(revalidating)

데이터 캐시를 제거하고 최신 데이터를 다시 가져오는 프로세스

종류

• 시간 기반 재검증(Time-based revalidation)
• 주문형 재검증(On-demand revalidation)

시간 기반 재검증(Time-based revalidation)

일정 시간이 지나면 데이터를 자동으로 재검증

정적으로 렌더링된 경로에 여러 개의 가져오기 요청이 있고 각각의 재검증 빈도가 다른 경우. 모든 요청에 가장 낮은 시간이 사용됩니다.

다른방법으로 route segment 의 모든 fetch 요청을 다시 검증하려면 Segment Config Options을 사용할 수 있습니다. 정적으로 렌더링된 경로에 여러 개의 가져오기 요청이 있고 각각의 재검증 빈도가 다른 경우 모든 요청에 가장 낮은 시간이 사용됩니다.

자세히

주문형 재검증(On-demand revalidation)

이벤트(예: form submission)를 기반으로 데이터를 수동으로 재검증합니다. 주문형 재검증에서는 tag-based 이나 path-based 접근 방식을 사용하여 데이터 그룹을 한 번에 재검증

1. fetch 를 사용할 때 하나 이상의 태그로 캐시 항목에 태그를 지정할 수 있는 옵션이 있습니다.
2. revalidateTag 를 호출하여 해당 태그와 연결된 모든 항목의 유효성을 다시 검사할 수 있습니다.

// app/page.tsx
const  res  =  await  fetch('https://...', { next: { tags: ['collection'] } })

// app/actions.ts
'use server'

import { revalidateTag } from 'next/cache'

export default async function action() {
  revalidateTag('collection')
}

자세히

Error handling

데이터 재검증을 시도하는 동안 오류가 발생하면 마지막으로 성공적으로 생성된 데이터가 캐시에서 계속 제공됩니다. 다음 후속 요청에서 Next.js는 데이터 재검증을 다시 시도합니다.

1.3 데이터 캐싱 해제 되는 경우

자세히

2. 다른 서버 라이브러리에서 데이터 요청

fetch 를 지원하지 않는 다른 라이브러리(예: 데이터베이스, CMS 또는 ORM 클라이언트)를 사용하는 경우 Route Segment Config Option 및 React의 cache 함수를 사용하여 해당 요청의 캐싱(cashing) 및 재검증(revalidating) 동작을 구성할 수 있습니다.

세그먼트가 정적(기본값)인 경우 요청 출력은 경로 세그먼트의 일부로 캐시되고 재검증 되고 동적인 경우 요청 출력은 캐시되지 않으며 세그먼트가 렌더링될 때 모든 요청에서 다시 가져옵니다.

※ React 의 cache 함수 활용 예

React 의 cache 함수는 데이터 요청을 메모하여 getItem 함수가 두 번 호출되더라도 데이터베이스에 대한 쿼리는 한 번만 수행됩니다.

import { cache } from 'react'

export const getItem = cache(async (id: string) => {
  const item = await db.item.findUnique({ id })
  return item
})

3. Route Handler 를 사용하여 클라이언트에서 데이터 가져오기

client component 에서 데이터를 가져와야 하는 경우 클라이언트에서 Route Handler를 호출할 수 있습니다. Route Handler 는 서버에서 실행되고 데이터를 클라이언트에 반환합니다. 이는 API 토큰과 같은 민감한 정보를 클라이언트에 노출하고 싶지 않을 때 유용합니다.

---

참고

https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating