CSR (Client-Side Rendering)

브라우저에서 JavaScript로 화면을 렌더링하는 방식

분야: 프론트엔드 시리즈: 렌더링 전략 frontendsparendering

CSR은 서버가 최소 HTML을 내려주고, 브라우저에서 JS가 데이터를 가져와 UI를 렌더링하는 방식입니다.

장단점(요약)

  • 장점: 인터랙션 중심 앱에 유리, 서버 부하가 상대적으로 낮을 수 있음
  • 단점: 초기 로딩/SEO가 어려울 수 있음(설계로 극복 가능)

같이 보면 좋은 문서

관련 문서

Code Splitting
코드를 여러 청크로 분리해 필요한 시점에만 로드하는 최적화
Hydration
SSR/SSG로 내려온 HTML에 JS 이벤트를 연결해 인터랙션을 활성화하는 과정
SSG (Static Site Generation)
빌드 시점에 HTML을 생성해 정적으로 배포하는 방식
SSR (Server-Side Rendering)
서버에서 HTML을 렌더링해 초기 응답을 만드는 방식
Tree Shaking
사용하지 않는 코드를 번들에서 제거해 용량을 줄이는 최적화