[Next.js 14] 2. Data Fetching - 1

1. Data Fetching, Caching, and Revalidating

• Data Fetching은 application에서 가장 중요한 부분이다.
• Data Fetching을 위한 4가지 방법.
  1. Server에서 fetch 사용
  2. Server에서 third-party libraries 사용 (ex. axios)
  3. Client에서 Route Handler 사용
  4. Client에서 third-party libraries 사용 (ex. swr, react-query)

1-1. Server에서 fetch 사용.

• Next.js에서는 Web API의 fetch를 확장해서, 각 요청마다 caching과 revalidating 설정을 할 수 있도록 제공.
• React Component tree가 렌더링 될 때, 동일한 API 요청에 대해선 memoize 수행. (Route Handler, Server Actions에서는 memoize 발생하지 않음.)
• Route Handler, Server Actions, Server Components 등 에서 async/await을 통해 사용.

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>
}

1. cookies, headers와 같은 함수를 이용해 request time에 따른 동적으로 Route하여 렌더링 가능.
2. Route Handler에서는 Component Tree가 아니므로 자동 Caching이 발생하지 않음.
3. Server Actions에서는 cache: no-store 옵션이 기본이므로 Caching이 발생하지 않음.

 

1. Caching Data

• Caching은 데이터를 저장하므로 매 fetch 요청마다 다시 가져올 필요가 없게 해줌.
• 기본적으로 Next.js는 Server의 Data Cache로부터 fetch된 값을 자동적으로 반환.
• 데이터는 빌드 시(build time) 또는 요청 시(request time) 가져올 수 있으며, 캐싱되어 이후 요청에서 재사용될 수 있다.

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

• fetch의 force-cache가 기본값이다.
• Server Action과 Route Handler에서 POST Method 사용 시 자동으로 캐싱되지 않는다.

2. Revalidating Data

• 재검증 (Revalidation)은 Data Cache에 최신화된 데이터를 다시 fetch하는 것.
• 데이터가 변경되거나, 최신 정보를 보장하고 싶을 때 유용하다.
• Cache data는 2가지 방법으로 재검증할 수 있다.
  1. 시간 기반 재검증(Time-based revalidation) : 일정 시간이 지나면 자동적으로 data를 재검증 한다. 이는, 주기적이지 않고 최신 데이터가 중요하지 않을 때 유용하다.
  2. 요구 기반 재검증(On-demand revalidation) : 폼 제출과 같은 이벤트를 기반으로 수동으로 data를 재검증 한다. tag 및 path를 기반으로 그룹화하여 한 번에 재검증이 가능하며, 가능한 최신화 데이터를 유지해야 하는 경우 유용하다.
• Time-based Revalidation
  

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

  • fetch option의 next.revalidate 값을 조정하여 시간을 조절할 수 있다.
  • Segment Config Options의 export const revalidate = 3600과 같이도 지정할 수 있다.
  • 정적 렌더링 Route에 여러 개의 revalidate가 적용된 fetch가 있다면, 가장 짧은 시간이 적용되며, 동적 렌더링 Route에서는 각 fetch에 지정된 시간이 사용된다.
• On-demang Revalidation
  • path는 revalidatePath, tag는 revalidateTag를 Server Action 또는 Route Handler에서 사용 가능.
  • Next.js는 Route 전반에 걸친 요청을 무시하기 위한 tagging system이 존재한다.
    • fetch를 사용할 때, 한 개 이상의 tag를 지정할 수 있다.
    • revalidateTag를 호출하면, 해당 태그의 fetch 요청이 재검증 된다.

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


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

• Error 처리 및 재검증
  • 재검증 과정에서 에러가 발생하면, 성공적으로 생성된 마지막 데이터가 Cache data로서 제공.
  • 이후 요청에서 다시 재검증을 시도한다.

3. Caching 옵트아웃

• fetch 요청은 다음과 같은 경우 cache 되지 않는다.
  • cache: 'no-store' 옵션 지정 시.
  • revalidate: 0 옵션 지정 시.
  • Route Handler 내에서 POST Method 요청 내부에서 사용 시.
  • headers, cookies 사용 다음에 사용 시.
  • const dynamic = 'force-dynamic' Segment Config Option 지정 시.
  • const fetchCache = ' ' Segment Config Option 중 Cache 무효 설정 시.
  • headers에 Authorization 또는 Cookie 정보가 있을 시.
• 각각의 fetch 요청에서 Cache를 지정하지 않는 법은 cache: 'no-store' 옵션 지정.
• 여러 fetch 요청에서 Cache를 지정하지 않는 법은 Segment Config Options 활용, 그러나 각각의 fetch에서 Cache를 제한하는 방법이 권고.

1-2. Server에서 third-party libraries 사용

• fetch를 지원하지 않는 라이브러리를 사용할 경우, Segment Config Options와 React의 cache 함수를 이용할 수 있다.
• 정적 Route는 fetch가 자동으로 cache되고 재검증되지만, 동적 Route는 적용되지 않는다.

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


import { getItem } from '@/utils/get-item'
 
export const revalidate = 3600 // revalidate the data at most every hour
 
export default async function Layout({
  params: { id },
}: {
  params: { id: string }
}) {
  const item = await getItem(id)
  // ...
}

• react의 cache 함수는 데이터 요청을 memoize 할 수 있다.
• 모든 페이지 및 레이아웃에서 revalidate 시간을 설정할 수 있다.

1-3. Client에서 Route Handler 사용

• Client Component에서 데이터를 fetch하기 위해서 Route Handler를 사용할 수 있다.
• Route Handler는 Server에서 실행되어 client에 데이터를 반환하기 때문에, 민감한 정보가 Client에 노출되는 것을 걱정할 필요가 없다.
  https://fbtmdwhd33.tistory.com/279

[Next.js 14] 1. Routing - 11

1-4. Client에서 third-parth libraries 사용

• SWR, React-Query 등과 같은 라이브러리를 Client에서 데이터 fetch 시 사용할 수 있다. 
• 이와 같은 라이브러리들은 자체적으로 caching, revalidating 등의 방법을 제공한다.

처음 뵙겠습니다.

Next.js 사용하면서 처음 본 개념이거나, 이해하기 어려운 부분(?)은 붉은색 볼드처리 해봤다.

 

Preference

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

Data Fetching: Fetching, Caching, and Revalidating | Next.js