[개발 공부 56일차] Data Fetching, Caching Data, Revalidating Data

 

< 목차 >
1. Data Fetching
2. Caching Data
3. Revalidating Data
4. 금일 소감

 

 

1. Data Fetching

1) async와 await를 fetch와 함께 사용하여 데이터를 가져올 수 있다.

async function getData() {
  const res = await fetch('https://api.example.com/...')
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
 
  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error('Failed to fetch data')
  }
 
  return res.json()
}
 
export default async function Page() {
  const data = await getData()
 
  return <main></main>
}

 

 

 

2. Caching Data

캐싱은 데이터를 저장하므로 요청이 있을 때마다 데이터 소스에서 다시 가져올 필요가 없다. 기본적으로 Next.js는 반환된 값을 서버의 데이터 캐시 fetch에 자동으로 캐시한다. 이는 빌드 시 또는 요청 시 데이터를 가져오고, 캐시하고, 각 데이터 요청에서 재사용이 가능함을 의미한다.

 

// 'force-cache' is the default, and can be omitted
fetch('https://...', { cache: 'force-cache' })

 

 

하지만 다음의 경우,  fetch 요청이 cache 되지 않는다.

1. Server Action 내에서 사용될 경우
2. POST method를 사용하여 Route Handler 내에서 사용된 경우

 

 

3. Revalidating Data

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

 

 

데이터가 변경되어 최신 정보를 표시하려는 경우에 유용하다. 캐시된 데이터는 다음 두 가지 방법으로 유효성을 다시 검사할 수 있다.

• 시간 기반 재검증 : 일정 시간이 지나면 데이터를 자동으로 재검증한다. 자주 변경되지 않고 최신성이 중요하지 않은 데이터에 유용하다.
• 주문형 재검증 : 이벤트(예: 양식 제출)를 기반으로 데이터를 수동으로 재검증한다. 주문형 재검증에서는 태그 기반 또는 경로 기반 접근 방식을 사용하여 데이터 그룹을 한 번에 재검증할 수 있다. 가능한 한 빨리 최신 데이터를 표시하려는 경우에 유용하다(ex. 헤드리스 CMS의 콘텐츠가 업데이트되는 경우)

 

시간 기반 재검증

(1) 일정 간격으로 데이터를 revalidate 하려면 resource의 캐시 수명(초)을 설정하는 next.revalidate 옵션을 사용할 수 있다.

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

 

 

(2) fetch 경로 세그먼트의 모든 요청을 재검증하기 위해 Segment Config Options(세그먼트 구성 옵션)을 사용할 수 있다.

export const revalidate = 3600 // revalidate at most every hour

 

 

 

주문형 재검증

데이터는 요청 시, 경로(revalidatePath) 또는 서버 작업 또는 경로 처리기 내부의 캐시 태그(revalidateTag)를 통해 재검증될 수 있다.

 

Next.js에는 Route 전반에 걸쳐 가져오기 요청을 무효화하기 위한 캐시 태깅 시스템이 있다.

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

 

 

예를 들어, 다음의 fetch 요청은 캐시 태그 컬렉션을 추가한다.

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

 

 

그런 다음, 서버 작업에서 revalidateTag를 호출하여 collection 태그가 지정된 이 가져오기 호출을 재검증할 수 있다.

'use server'
 
import { revalidateTag } from 'next/cache'
 
export default async function action() {
  revalidateTag('collection')
}

 

 

[Reference]

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

(2) https://samcurry.net/universal-xss-on-netlifys-next-js-library/

 

 

 

4. 금일 소감

오늘은 fetch에 대해 알아보았다. 주문형 revalidate는 처음 알게 된 개념이라 추후에 좀 더 자세하게 공부해봐야겠다. 낯선 개념이라 그런지 설명만 봐선 아직 이해가 다 되지 않아서 사용할 일이 다음 주 내로 있거나 아니면 혼자 더 알아보다가 잘 모르겠으면 튜터님들께도 여쭤봐야겠다. 오늘도 공부 파이팅!!!!