07. Next.js & RSC: 서버 컴포넌트 문파

Next.js

RSC

SSR

브라우저의 짐을 서버로 옮기고, 7가지 핵심 패턴으로 풀스택 리액트의 정점을 정복하라.

서버 사이드 렌더링(SSR)과 RSC: 브라우저의 짐을 서버로 옮기기

무엇인가: 서버에서 컴포넌트를 미리 실행하여 HTML을 생성하거나 데이터를 직렬화해 전달하는 방식. RSC(React Server Components)는 번들에 포함되지 않아 클라이언트에 JS가 전송되지 않는다.

왜 쓰는가: 초기 로딩(LCP) 향상, SEO 최적화, 클라이언트 번들 크기 획기적 감축을 위해. 데이터베이스나 파일 시스템에 서버에서 직접 접근하여 waterfall 없이 데이터를 가져온다.

언제 쓰는가: 보안이 중요한 데이터 호출, 초기 로딩 속도가 핵심인 서비스, 대규모 동적 페이지. 'use client'는 상태·이벤트·브라우저 API가 필요한 최소 단위에만 선언하라.