SERVER COMPONENT FETCHING

서버 컴포넌트는 데이터를 서버에서 가져와 HTML로 보낸다

App Router의 페이지와 레이아웃은 기본적으로 서버에서 실행됩니다. 그래서 데이터 요청을 컴포넌트 안에 직접 두고, 클라이언트 번들 노출을 줄일 수 있습니다.

Serverasync page가 fetch를 실행한다.

DataDB, 내부 API, 외부 API에서 필요한 값을 가져온다.

Render데이터를 포함한 React 결과를 서버에서 준비한다.

Browser완성된 UI를 받고 필요한 클라이언트 JS만 실행한다.

async 컴포넌트

서버 컴포넌트는 async 함수로 작성할 수 있어 데이터를 기다린 뒤 UI를 반환합니다.

보안 이점

API 키와 DB 접근 로직이 브라우저 번들에 들어가지 않아 노출 위험을 줄입니다.

캐싱 전략

fetch 옵션으로 force-cache, no-store, revalidate 같은 데이터 신선도 기준을 정합니다.

클라이언트 분리

상호작용이 필요한 영역만 클라이언트 컴포넌트로 나누면 번들 크기를 줄일 수 있습니다.

선택 기준 사용자별 실시간 데이터는 no-store, 비교적 안정적인 목록 데이터는 캐시와 재검증을 함께 고려합니다.

실수 방지 서버 컴포넌트에서 브라우저 API나 상태 훅이 필요해지면 해당 부분만 클라이언트 컴포넌트로 분리합니다.