Next.js에서 unstable_cache() + cookies() 사용 시 발생하는 에러 해결기(수파베이스)

문제 상황

Next.js 15 프로젝트에서 unstable_cache()를 사용해 서버에서 유저 정보를 캐싱하려고 했는데, 다음과 같은 에러가 발생했다.

Error: Route / used "cookies" inside a function cached with "unstable_cache(...)". 
Accessing Dynamic data sources inside a cache scope is not supported.

• 원래 의도: 수파베이스를 통해 소셜 로그인 유저 정보를 가져오고, 프리즈마로 추가 정보를 조회(팔로워 수) → 그 결과를 캐싱

---

문제 원인

unstable_cache(fn)은 정적 함수만 감쌀 수 있다.
그런데 문제의 핵심은 아래 코드처럼 동적 데이터 소스(cookies() 등)를 fn 안에서 호출한 것이다:

const getUser = unstable_cache(async () => {
  const supabase = await createClient(); // 내부에서 cookies() 호출됨
  const {
    data: { user },
  } = await supabase.auth.getUser();
  return user;
}, ['user']);

• cookies(), headers()는 요청(request)에 따라 바뀌는 값
• 캐시되는 함수 안에 있으면 보안/동작 오류 발생 위험이 있으므로 Next.js가 막음

createClient()가 궁금하다면 수파베이스의 Setting up Server-Side Auth for Next.js항목을 참고하자.

---

해결 방법: cookies()는 바깥에서 호출하고, 캐싱 대상은 순수 함수로 분리

🔧 해결 코드 구조

import { createClient } from '@/lib/supabase/server';
import { unstable_cache } from 'next/cache';
import { prisma } from '../../../prisma/prisma';

// 1. 요청 기반으로 유저 ID만 추출 (비캐시)
export async function fetchUserSupabase() {
  const supabase = await createClient();
  const {
    data: { user },
  } = await supabase.auth.getUser();

  return user?.id ?? null;
}

// 2. 정적인 DB 조회 함수 (캐시 가능)
async function fetchUser(userId: string) {
  const dbUser = await prisma.public_users.findUnique({
    where: {
      user_id: userId,
    },
  });
  return dbUser;
}

// 3. 캐시 적용 함수
export const cacheUser = unstable_cache(fetchUser, ['user', 'me'], {
  tags: ['user'],
  revalidate: 60, // 60초 뒤 재요청 시 최신화됨
});

// 4. 외부에서 유저 ID 추출 후 cacheUser 호출
/* 실제로 사용할 패칭함수 */
export async function getUser() {
  const userId = await fetchUserSupabase();
  if (!userId) return null;
  return cacheUser(userId); // 캐싱된 결과 반환
}

사용 예시 (서버 컴포넌트)

import { getUser } from '@/actions/auth/getUser';

export default async function Page() {
  const user = await getUser();

  return <div>{user ? `${user.nickname}님 환영합니다` : '로그인이 필요합니다'}</div>;
}

---

후기

Next.js의 unstable_cache() 안에서는 cookies() 같은 요청 기반 API를 절대 호출하지 말고, 바깥에서 호출해 필요한 값만 넘겨야 한다.