React Academy · 강의

unstable_cache와 React cache()

Next.js 캐시 유틸리티로 비용이 큰 함수 결과를 요청별 또는 요청 간에 캐시합니다.

unstable_cache와 React cache()은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

두 가지 캐시 유틸리티

Next.js는 서로 보완되는 두 가지 캐싱 유틸리티를 제공합니다. unstable_cache는 요청 간에 지속되는 캐싱에 사용하고, React의 cache()는 요청별 중복 제거에 사용합니다.

React cache() — 요청별 중복 제거

React의 cache(fn)은 하나의 서버 렌더링 과정이 진행되는 동안 함수 결과를 메모이제이션합니다. 두 서버 컴포넌트가 같은 캐시된 함수를 호출하면 두 번째 DB/API 호출 없이 동일한 결과를 얻습니다.

import { cache } from 'react';

export const getUser = cache(async (id: string) => {
  return db.user.findUnique({ where: { id } });
});

// Both components call getUser(id) — only one DB query fires per request
// component A: const user = await getUser('1');
// component B: const user = await getUser('1'); // uses cached result

unstable_cache — 영구 캐시

unstable_cache(fn, keyParts, options)는 명시적으로 재검증할 때까지 요청이 달라져도 결과를 유지합니다. 이를 모든 비동기 함수(데이터베이스 쿼리, Redis 호출 등)에 사용할 수 있는 fetch({ next: { revalidate } })라고 생각하시면 됩니다.

import { unstable_cache } from 'next/cache';

const getProducts = unstable_cache(
  async () => db.products.findMany(),
  ['products-list'],      // cache key parts
  { revalidate: 60, tags: ['products'] } // options
);

// In a Server Component:
const products = await getProducts();

캐시 키 구성 요소

unstable_cache의 두 번째 인수는 캐시 키를 구성하는 문자열 배열입니다. 출력에 영향을 주는 모든 변수를 포함해야 합니다.

const getUserPosts = unstable_cache(
  async (userId: string) => db.posts.findMany({ where: { userId } }),
  ['user-posts'],         // base key
  { tags: [`user-${userId}-posts`] } // per-user tag
);

// Call with userId — Next.js appends the argument to the key:
const posts = await getUserPosts(userId);

주문형 재검증을 위한 태그

캐시된 함수에 태그를 지정하고 데이터가 변경될 때 revalidateTag()로 무효화하시면 됩니다. 예를 들어 Server Action에서 변경 작업을 수행한 후 사용할 수 있습니다.

// Server Action
async function createProduct(data: FormData) {
  'use server';
  await db.products.create({ data: parseFormData(data) });
  revalidateTag('products'); // invalidates all cached functions tagged 'products'
  redirect('/products');
}

시간 기반 재검증

옵션에 revalidate: N을 설정하면 ISR이 fetch 호출에 적용되는 방식과 비슷하게 N초 후 캐시를 재검증합니다.

const getStats = unstable_cache(
  async () => computeHeavyStats(),
  ['dashboard-stats'],
  { revalidate: 300 } // recompute at most every 5 minutes
);

cache()와 unstable_cache 결합하기

한 번의 렌더링에서 여러 위치에서 호출되는 함수에는 unstable_cache 내부에서 cache()를 사용하시면 됩니다. 요청 내 중복 호출 제거와 요청 간 결과 유지가 모두 가능합니다.

// Deduplicate the DB call within a request:
export const getRawUser = cache(async (id: string) => db.user.findUnique({ where: { id } }));

// And cache the result persistently:
export const getUser = unstable_cache(getRawUser, ['user'], { revalidate: 60, tags: ['user'] });

unstable_cache의 제한 사항

안정화되기 전에 API가 변경될 수 있으므로 unstable_cache에는 아직 불안정하다는 표시가 붙어 있습니다. 캐시된 함수에서는 쿠키나 헤더처럼 요청별 데이터를 사용할 수 없습니다.

레이아웃 데이터를 위한 React cache()

레이아웃 수준의 데이터 가져오기를 cache()로 감싸시면, 레이아웃과 동일한 함수를 호출하는 중첩 페이지가 한 번의 렌더링 안에서 결과를 공유합니다.

// lib/data.ts
export const getCurrentUser = cache(async () => {
  const session = await getServerSession();
  return db.user.findUnique({ where: { id: session?.userId } });
});

// layout.tsx and page.tsx both call getCurrentUser() — one DB query

각 기능을 사용하는 경우

cache(): 한 번의 렌더링(동일한 요청) 안에서 동일한 호출의 중복을 제거합니다. unstable_cache: 재검증할 때까지 여러 요청에 걸쳐 결과를 유지합니다. 외부 HTTP API를 호출할 때는 fetch와 next.revalidate를 사용하시면 됩니다.

빠른 확인

React의 cache()와 Next.js의 unstable_cache는 어떤 점이 가장 다릅니까?

복습

cache(fn)은 한 번의 렌더링 과정에서 호출을 중복 제거하므로 공유 레이아웃 및 페이지 데이터에 적합합니다. unstable_cache(fn, keys, { revalidate, tags })는 시간 또는 태그를 기준으로 무효화할 수 있으며 요청 간 결과를 유지하므로 비용이 큰 데이터베이스 쿼리에 적합합니다.

자주 묻는 질문

“unstable_cache와 React cache()” 강의는 무료인가요?

네 — “unstable_cache와 React cache()” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Academy 강의 전체를 잠금 해제할 수 있습니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“unstable_cache와 React cache()”에서 뭘 배우나요?

Next.js 캐시 유틸리티로 비용이 큰 함수 결과를 요청별 또는 요청 간에 캐시합니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“unstable_cache와 React cache()” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← React Academy(으)로 돌아가기