cache(fn)은 서버 컴포넌트(Server Component)용 React API(Application Programming Interface)로, 함수 결과를 한 번의 서버 요청(렌더) 동안만 기억한다. 같은 요청 안에서 같은 인자로 여러 번 불러도 실제 실행은 한 번이다. React 19 정식 API이며 서버 컴포넌트에서만 쓴다.
import { cache } from 'react'
export const getUser = cache(async (id: string) => db.user.find(id))
// Layout, Header, Profile이 각자 getUser('1')을 불러도 DB 조회는 한 번요청 A ─ Layout·Header·Profile → getUser(1) 공유
요청 B ─ 캐시 비어 있음 → 다시 조회- 목적은 장기 캐시가 아니라 중복 제거(Deduplication)다. props로 데이터를 내려 보내지 않고 필요한 컴포넌트마다 부를 수 있게 해 준다
- Next.js의
fetch는 이미 같은 요청 안에서 중복이 제거된다. 그래서cache()는 DB(Database) 클라이언트나 SDK(Software Development Kit)처럼 fetch가 아닌 비동기 작업에 주로 쓴다(Next.js 캐시 계층) - 렌더 중 데이터 읽기가 여러 번 일어나도 결과가 같다는 가정을 실제로 받쳐 주는 장치다(부수 효과와 Effect)
- 인자는 참조로 비교된다. 렌더마다 새로 만든 객체를 인자로 넘기면 매번 다른 키가 된다
- 요청을 넘어 오래 저장하려면 Next.js의 'use cache'나 서버 캐시를 쓴다
| React.cache | lru-cache | TanStack Query | |
|---|---|---|---|
| 수명 | 요청 한 번 | TTL(Time to Live)·최대 개수 | staleTime·gcTime |
| 범위 | 한 렌더 트리 | 서버 프로세스 전체 | 브라우저 탭 |
| 용도 | 컴포넌트 간 중복 호출 제거 | 서버의 장기 캐시 | 클라이언트 서버 상태 |
나머지 두 캐시는 LRU 캐시와 캐시 계층 비교, TanStack Query.
출처: React - cache