Server Component

데이터는 서버에서 읽고, 경계 밖으로 결과만 보낸다

서버 컴포넌트의 fetch, Next 캐시, React.cache는 서로 다른 범위에서 중복 요청과 민감 정보 노출을 줄입니다.

fetch cache

동일 URL 요청을 줄임

같은 서버 렌더링 경로에서 같은 fetch가 반복되면 Next가 응답을 재사용해 워터폴과 중복 네트워크 비용을 줄입니다.

React.cache

함수 호출 단위로 묶음

ORM, SDK, axios처럼 fetch 밖의 데이터 함수도 같은 인자 기준으로 한 렌더링 안에서 한 번만 실행되게 만들 수 있습니다.

경계

클라이언트 번들에서 제외

서버 전용 코드는 브라우저 JS에 섞이지 않으므로 비밀 값, 내부 URL, 무거운 라이브러리를 더 안전하게 다룰 수 있습니다.

1. 페이지 요청 라우트가 서버 컴포넌트 렌더링을 시작합니다.
2. 데이터 함수 await로 API나 DB를 읽습니다.
3. 캐시 판정 fetch 옵션과 인자별 cache가 중복 실행을 줄입니다.
4. HTML 전달 브라우저는 완성된 마크업부터 빠르게 받습니다.