프론트엔드 개발 · 심화
Next.js의 Data Cache가 무효화(revalidate)될 때, 즉시 백그라운드에서 새 데이터를 가져오나요, 아니면 다음 요청이 올 때까지 기다렸다가 무효화 처리(On-demand)를 하나요?
힌트 · 기본적으로 다음 새로운 요청이 발생했을 때(Stale-while-revalidate 메커니즘) 새 데이터를 패치하여 캐시를 교체합니다.
Stale-While-Revalidate백그라운드 업데이트캐시 만료On-demand RevalidationIncremental Static Regeneration (ISR)
모범답안
Next.js의 Data Cache 무효화 방식은 크게 두 가지로 나눌 수 있습니다.
기본적으로는 Stale-while-revalidate 전략을 사용합니다. 즉, 캐시가 만료되면 다음 요청이 발생했을 때 백그라운드에서 새로운 데이터를 가져옵니다. 사용자는 즉시 기존 캐시 데이터를 보게 되고, 백그라운드 업데이트가 완료되면 다음 요청부터는 새로운 데이터를 보게 됩니다.
On-demand revalidation을 사용하는 경우, revalidatePath나 revalidateTag를 통해 특정 경로 또는 태그를 가진 데이터를 명시적으로 무효화할 수 있습니다. 이 경우에도 다음 요청이 발생했을 때 데이터가 갱신됩니다. 즉시 백그라운드에서 데이터를 가져오는 것은 아닙니다.
Incremental Static Regeneration (ISR)을 사용할 때도 마찬가지로, 지정된 revalidate 시간 간격 이후에 다음 요청이 발생했을 때 백그라운드에서 데이터가 업데이트됩니다.
읽었다면, 이제 직접 답해볼 차례예요
패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.
함께 보는 Next.js 면접 질문
- RSC Payload(React Server Component Payload) 내부 구조는 대략적으로 어떤 형태로 구성되어 있나요?
- React 렌더링 파이프라인에서 RSC(React Server Component)가 생성한 Payload를 클라이언트(브라우저)가 받아 기존 DOM과 병합하는 과정(Reconciliation)을 담당하는 React API는 무엇인가요?
- Next.js 14의 Partial Prerendering(PPR)을 사용할 때, 특정 컴포넌트가 동적(Dynamic) 렌더링되도록 트리거하는 가장 보편적인 React API는 무엇인가요?
- Edge Runtime 환경에서 작동하는 Middleware가 Vercel의 KV(Redis)나 데이터베이스에 접근할 때 지연 시간을 줄이기 위해 설계된 아키텍처적 위치의 특징은 무엇인가요?
- 대규모 Next.js 프로젝트를 Turborepo 모노레포로 분리할 때, 공통으로 사용하는 UI 컴포넌트 패키지(예: `@repo/ui`)를 Next.js 앱에서 트랜스파일(Transpile) 하려면 `next.config.js`에 어떤 속성을 추가해야 하나요?
- Node.js 기반의 Next.js 앱에서 메모리 누수(Memory Leak)가 의심될 때, 가장 먼저 모니터링해야 하는 V8 엔진의 메모리 영역은 무엇인가요?