react · high priority
Next.js App Router & 캐싱 전략
React Server Components와 4가지 캐싱 레이어 완전 이해
advanced 난이도5시간카카오토스당근네이버
시작 전
이해도
매우 낮음
학습 개요
탄생 배경
쉬운 설명
복잡한 개념을 실생활 비유로 설명합니다.
“레스토랑 주방”
Server Component는 주방에서만 있는 재료와 도구. 손님(클라이언트)에게 완성된 요리만 보여줌. Client Component는 손님 테이블에 있는 버너와 재료. 손님이 직접 불 켜고 요리 가능. 캐싱은 미리 만들어 냉장고에 넣어둔 반조리 음식 - 주문 오면 빠르게 데워서 줌.
핵심 개념
Server Component vs Client Component
Server Component (기본값)
- 서버에서만 실행 (번들에 포함 안됨)
- DB, 파일시스템 직접 접근 가능
- useState, useEffect 사용 불가
- 이벤트 핸들러 사용 불가
- async/await 사용 가능
1// app/page.tsx - Server Component (기본)2async function Page() {3 const data = await db.query(); // DB 직접 쿼리4 return <div>{data}</div>;5}
Client Component ('use client')
- 서버 + 클라이언트 모두 실행
- 번들에 포함됨
- useState, useEffect 사용 가능
- 이벤트 핸들러 사용 가능
- DB 직접 접근 불가
1// 'use client' 선언 필수2"use client";3import { useState } from 'react';4function Counter() {5 const [count, setCount] = useState(0);6 return <button onClick={() => setCount(c => c+1)}>{count}</button>;7}
언제 Client Component를 써야 하나요?
useState/useReducer 등 상태 필요, onClick 등 이벤트 핸들러 필요, useEffect/커스텀 훅 사용, 브라우저 API (localStorage 등) 사용할 때만 use client를 선언하세요. 나머지는 Server Component를 기본으로 사용하면 번들 크기를 줄일 수 있습니다.
실무 적용
어떤 상황에서 사용하는가
기존 Pages Router 앱을 App Router로 마이그레이션하거나, 새 프로젝트에 App Router 도입
어떻게 적용하는가
Server Component를 기본으로 사용 → 상태/이벤트 필요한 최소 단위만 Client Component → fetch에 적절한 cache 옵션 설정 → revalidate로 데이터 신선도 관리
흔한 실수와 안티패턴
- "use client"를 상위 컴포넌트에 선언하면 모든 자식이 Client Component가 됨
- Server Component 내에서 Context를 직접 사용 불가 (Provider는 Client Component)
- Data Cache가 예상치 못하게 stale 데이터를 반환하는 경우 revalidate 전략 검토 필요
면접 질문
심화카카오토스당근
답변 방향 힌트
RSC는 Hydration이 필요 없고, 번들에 포함되지 않으며, 컴포넌트 단위로 선택 가능합니다.
반드시 언급할 키워드
- RSC는 번들 미포함
- SSR vs RSC의 Hydration 차이
- 컴포넌트 단위 서버/클라이언트 선택
- 스트리밍
예상 꼬리 질문
- Next.js의 4가지 캐싱 레이어를 설명해주세요
- Server Actions는 무엇인가요?