Next.js 13~15에서 unstable_cache()를 사용해 데이터를 서버에서 불러오면,
Vercel Functions 로그에는 아무것도 찍히지 않는 경우가 있다.
처음엔 당황할 수 있는데, 원리를 이해하면 완전히 납득할 수 있다.
선요약
unstable_cache()는 서버에서만 실행되는 정적 캐싱 함수라서
브라우저가 요청한 API가 아니고,
Vercel은 Function으로 인식하지 않음. 그래서 로그에 안 찍힌다.
unstable_cache()란?
- Next.js 13+의 정적 캐시용 서버 함수
- 실행 위치: 서버 컴포넌트에서만 실행됨 (브라우저 아님)
- 동작 방식: 최초 한 번만 실행 → 이후엔 캐시 응답만 반환
- 로그: 브라우저 요청이 아니기 때문에 Vercel Functions 로그에는 안 찍힘
상황 비교
| 케이스 | 실행 위치 | Vercel Functions 로그에 찍힘? |
|---|---|---|
fetch('/api/logs') (클라이언트에서 fetch) | 브라우저 → 서버 | 찍힘 |
useQuery(() => fetch(...)) | 브라우저 → 서버 | 찍힘 |
서버 컴포넌트에서 await getLogs() | 서버 내부 | 안 찍힘 |
unstable_cache(() => fetchLogs()) 내부 Prisma 호출 | 서버 내부 | 안 찍힘 |
예시 코드 흐름
// 서버 컴포넌트 내부
const logs = await getLogs({ sort: 'popular' });
// getLogs는 이렇게 생김
export async function getLogs(params: LogsParams) {
return unstable_cache(
() => fetchLogs(params),
['logList', params.sort],
{ revalidate: 300 }
)();
}- 이렇게 해도 Vercel의 Functions 탭엔 로그가 안 보임.
증상
- 서버에서
prisma.log.findMany()호출 중 에러 발생 console.error(...)로 에러를 찍었지만- 로컬 개발 서버에서는 콘솔에 보이고
- Vercel 배포 환경에서는 아무 로그도 없음
이유
- Vercel Functions 로그는 브라우저가 호출한 API 요청만 추적함
unstable_cache는 Next.js가 빌드 시점 또는 서버 응답 시 캐시 처리- 따라서 서버 내부 연산이라 Vercel은 로그를 수집하지 않음
에러 디버깅하고 싶다면?
| 방법 | 설명 |
|---|---|
| 1. 로컬 dev 서버에서 실행 | console.error 로그 확인 가능 |
2. unstable_cache 잠시 제거 | 직접 fetch → Functions 로그에 찍힘 |
| 3. 브라우저에서 직접 API 요청 | 예: /api/logs?sort=popular 테스트 |
4. 필요 시 dynamic = 'force-dynamic' 설정 | Next.js가 강제로 서버 함수로 인식하게 유도 |
참고 링크
기록하자