[next.js 공식문서] 15. Caching

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의

Caching

요청별로 또는 전체 경로 세그먼트에 대해 데이터 캐싱을 지원함

요청당 캐싱

fetch()

기본적으로 모든 fetch() 요청은 자동으로 캐시되고 중복되거됨

요청이 캐시되지 않는 경우

• 동적 메서드(next/headers, export const POST 등)가 사용되며 POST 요청(또는 인증이나 cookie 사용)
• fetchCache
• revalidate: 0 또는 cache: 'no-store’으로 구성된 fetch

cache()

// utils/getUser.ts
import { cache } from 'react';
 
export const getUser = cache(async (id: string) => {
  const user = await db.user.findUnique({ id });
  return user;
});

데이터 가져오기 기능이 클라이언트에서 절대 사용되지 않도록 server-only 패키지를 사용할 것

npm install server-only

import 'server-only';
 
export async function getData() {
  const res = await fetch('https://external-service.com/data', {
    headers: {
      authorization: process.env.API_KEY,
    },
  });
 
  return res.json();
}

GraphQL 및 cache()

import { cache } from 'react';
 
export const getUser = cache(async (id: string) => {
  const res = await fetch('/graphql', { method: 'POST', body: '...' });
  // ...
});

cache() 패턴 preload

• API가 아니라 패턴임
• 병렬 데이터 가져오기에 대한 추가 최적화임.

// component/User.tsx
import { getUser } from '@utils/getUser';
 
export const preload = (id: string) => {
  void getUser(id);
};
export default async function User({ id }: { id: string }) {
  const result = await getUser(id);
  // ...
}
// app/user/[id]/page.tsx

cache, preload 및 server-only

import { cache } from 'react';
import 'server-only';
 
export const preload = (id: string) => {
  void getUser(id);
};
 
export const getUser = cache(async (id: string) => {
  // ...
});

이렇게 해서 데이터를 가져오고 응답을 캐시하고 서버에서만 동작하도록 보장할 수 있음

세그먼트 수준 캐싱

해당 경로 세그먼트에 사용된 데이터를 캐시하고 재검증할 수 있음

// app/page.tsx
export const revalidate = 60;

• page, layout등에서 중첩된 경우 가장 낮은 값이 사용됨
• 모든 가져오기 요청이 캐싱을 선택하도록 하되 개별 가져오기 요청에 따라 재검증 빈도를 낮출 수 있도록 fetchCache를 ‘only-cache’ 또는 'force-cache’로 설정할 수 있음.