[Next.js] 데이터 캐싱하기

데이터 캐싱이란 데이터를 임시 저장해두고 같은 요청이 있을 때 재사용하여 응답 속도를 높이는 방법이이다.

DB에 반복적으로 접근하는 것은 효율적이지 못하기 때문에 캐싱 기술을 사용한다.

---

▪ unstable_cache

서버 컴포넌트에서 데이터 fetching 결과를 캐싱한다.

이름 그대로 현재 'unstable'한 상태로, 이름이나 사용 방식은 언제든 변할 수 있다.
(이래서 공식 문서를 잘 봐야한다..)

import { unstable_cache } from 'next/cache';
 
const data = unstable_cache(fetchData, keyParts, options)()

공식 문서에 나와 있는 코드이다.

데이터를 캐싱하기 위해서는 fetchData, keyParts, options를 매개변수로 넘겨준다.

• fetchData : DB에서 데이터를 가져오는 함수(Promise를 return)
• keyParts : 캐싱된 데이터를 구분할 수 있는 식별자
• options: tags, revalidate 등의 옵션

데이터 캐싱을 실행하면, 먼저 keyParts를 가지고 이미 캐싱된 데이터가 있는지 확인한다.

만약 없다면 fetchData 함수를 실행하고 데이터를 캐싱한다.

이미 존재한다면 fetchData 함수를 실행하지 않고 캐싱된 데이터륾 가져온다.

---

import { unstable_cache as nextCache } from 'next/cache';


const getCachedProducts = nextCache(getProducts, ['products-list']);

async function getProducts() {
  return db.product.findMany({
    select: {
      title: true,
      price: true,
      created_at: true,
      photo: true,
      id: true,
    },
    orderBy: {
      created_at: 'desc',
    },
  });
}

export const metadata = {
  title: 'List',
};

async function Products() {
  const initialProducts: ListProductProps[] = await getCachedProducts();
  return <> ... </>
}

---

▪ fetch

만약 fetch()를 통해 데이터를 가져올 경우에는 자동으로 캐싱된다.

대신 parameter나 header 같은 것들이 없는 요청만 가능하다.

---

▪ 캐시 초기화 

데이터가 다른 곳에서 추가되거나 삭제될 수도 있기 때문에, 항상 처음 캐싱한 데이터로 사용할 수는 없다.

이를 위해 캐시를 특정 조건에 따라 초기화해줄 필요가 있다.

1. 특정 시간이 지나면 초기화

import { unstable_cache } from 'next/cache';
 
const data = unstable_cache(fetchData, keyParts, {revalidate: 초})()

위에 사용한 예시를 다시 가져왔다.

options 부분에 revalidate와 시간을 적어준다.

만약 데이터를 요청할 때 revalidate의 시간이 지난 후라면 새로 데이터를 fetching하고, 지나지 않았다면 캐시된 데이터를 반환한다.

2. 특정 요청이 있을 때 초기화

▫ revalidatePath

'use server'
revalidatePath('/경로');

특정 페이지와 관련된 모든 데이터를 초기화할 수 있다.

이때 revalidatePath를 서버 액션으로 실행해야 한다.

관련된 데이터가 여러 개일 때, 원하는 것만 골라서 초기화할 수 없다.

▫ revalidateTag

import { unstable_cache } from 'next/cache';
 
const data = unstable_cache(fetchData, keyParts, {tags: 태그})()

// ...

revalidateTag(태그);

원하는 데이터만 골라서 초기화할 수 있는 방법이다.

revalidateTag의 parameter로 넘기는 태그의 값과 unstable_cache의 tags의 값이 일치할 경우 해당 데이터가 초기화 된다.

tags는 유일하지 않아도 되며 여러 개 적을 수도 있다.

---

// Route Segment Config

production 모드(build)에서는 static 페이지의 데이터가 자동으로 캐싱된다.

대신 revalidate 설정은 되어 있지 않기 때문에 필요에 따라 설정해주어야 한다.

1. dynamic 설정

만약 항상 새로운 데이터를 받아오길 원한다면 dynamic 페이지로 build 하면 된다.

export const dynamic = 'force-dynamic';

2. revalidate 설정

static 페이지로 사용하되, 특정 시간마다 캐시를 초기화해준다.

export const revalidate = 60;

---

// 동적 param 캐싱

URL에 param이 들어가는(동적 param) 경우에는 static 페이지로 생성하기 어려운데, 이럴 때도 사전 레더링을 하는 방법이  존재한다.

▪ generateStaticParams()

동적 params를 사용하는 페이지에서 generateStaticParams() 함수를 사용하여 param이 될 수 있는 것들을 모두 캐싱하여 렌더링 한다.

generateStaticParams는 예약어기때문에 정확하게 사용해야 한다.. 

export async function generateStaticParams() {
  return [];
}

만약 캐싱된 params 외의 param이 추가되어 접근하게 되면, 데이터베이스에 요청을 보내고 그 응답을 캐싱한다. 

이 방식을 가능하게 하는 것이 dynamicParams이다.

export const dynamicParams = true;

기본값이 true이기 때문에 따로 설정하지 않아도 된다.

false로 설정하고 싶을 때만 사용해주면 된다.