Next 13 Data Fetching 기반으로 작성했습니다.

Fetching Data on the Server with fetch

Next.js는 Web API인 native fetch를 확장하여 caching과 revalidating 사용이 가능하다.
기본적으로 Next.js는 서버의 Data Cache안에 반환된 fetch 값을 자동으로 캐시한다.

Revalidating Data

Revalidation은 데이터가 변경되고 최신 정보를 보장하고 싶을 때 유용하다.

Time-based Revalidation

일정 시간 간격으로 데이터를 재검증하려면 fetch 옵션인 next.revalidate를 사용하여 설정할 수 있다.

// 각각의 fetch 요청에서 설정
fetch('https://...', { next: { revalidate: 3600 } })

// 모든 fetch 요청을 한번에 설정
export const revalidate = 3600

On-demand Revalidation

revalidatePath, revalidateTag에 의한 요청으로 재검증할 수 있다.

// app/api/revalidate/route.ts

import { NextRequest, NextResponse } from 'next/server'
import { revalidatePath } from 'next/cache'
 
export async function POST(request: NextRequest) {
  const path = request.nextUrl.searchParams.get('path')
 
  if (!path) {
    return NextResponse.json({ message: 'Missing path param' }, { status: 400 })
  }
 
  revalidatePath(path)
 
  return NextResponse.json({ revalidated: true, now: Date.now() })
}

Opting out of Data Caching

fetch 요청이 캐시되지 않는 경우

• fetch 요청에 cache : 'no-store'를 추가한 경우
• fetch 요청에 개별적으로 revalidate : 0 옵션을 추가한 경우
• Route Handler안에서 Post 메서드 방식을 사용하는 fetch 요청을 한 경우
• fetch 요청 후 헤더나 쿠키를 사용한 경우
• 라우트 세그먼트 옵션에 const dynamic = 'force-dynamic'을 사용한 경우
• fetch 요청은 Authorization이나 쿠키 헤더를 사용하고, 컴포넌트 트리에 캐시되지 않은 요청이 있을 경우
• fetchCache 라우트 세그먼트 옵션은 기본적으로 캐시되지 않도록 설정되어 있다.

Individual fetch Requests

개별 fetch 요청에 대해 캐싱을 해제하려면 fetch 옵션 안에 no-store를 설정하면 된다.
그러면 모든 요청에서 데이터를 동적으로 fetch한다.

// layout.js or page.js
fetch('https://...', { cache: 'no-store' })

Multiple fetch Requests

Route 세그먼트에 여러 fetch 요청이 있을 경우, 세그먼트 구성 옵션을 사용하여 세그먼트에 모든 데이터 요청의 캐싱 동작을 구성할 수 있다.

// layout.js / page.js
// 모든 데이터를 fetch할 수 있고, 동적으로 렌더링할 수 있다.
export const dynamic = 'force-dynamic'

Fetching Data on the Client with Route Handlers

클라이언트 컴포넌트에서 데이터를 fetch할 필요가 있을 경우 클라이언트에서 라우트 핸들러를 호출할 수 있다. 라우트 핸들러는 서버에서 실행되며 클라이언트에서 데이터를 반환한다.
=> API 토큰과 같은 중요한 정보를 클라이언트에 노출하지 않을 때 유용하다.

Server Components and Route Handlers
서버 컴포넌트는 서버에서 렌더링되므로 Route Handler에서 데이터 fetch를 안하고 서버 컴포넌트에서 직접 fetch하면 된다.