CSR의 개념과 한계점은 무엇인가요?

CSR(Client-Side Rendering) 은 서버가 거의 빈 HTML과 자바스크립트 번들을 내려주고, 브라우저에서 자바스크립트가 실행되며 화면을 그리는 방식입니다. 일반적인 리액트 SPA(Single Page Application)가 이 방식입니다.

동작 과정

1. 브라우저가 거의 빈 HTML을 받는다 (예: <div id="root"></div>)
2. 자바스크립트 번들을 내려받는다
3. JS가 실행되며 리액트가 DOM을 그린다 (이때 화면이 보임)
4. 이후 페이지 이동은 새로고침 없이 JS가 처리

한 번 로드된 뒤에는 페이지 전환이 새로고침 없이 빠르고, 앱처럼 매끄러운 상호작용을 제공합니다. 서버 부하도 상대적으로 적습니다.

한계점

1. 느린 초기 로딩 (FCP/TTI 지연)

JS 번들을 받아 실행하기 전까지는 빈 화면이 보입니다. 번들이 크거나 네트워크가 느릴수록 첫 화면이 늦게 뜹니다.

2. SEO 불리

검색 엔진 크롤러가 초기 HTML을 볼 때 내용이 비어 있을 수 있습니다. 자바스크립트를 실행하는 크롤러도 있지만, 모든 크롤러·SNS 미리보기 봇이 그렇지는 않아 색인과 공유 미리보기에 불리할 수 있습니다.

3. 번들 크기 부담

기능이 늘수록 JS가 커져 다운로드·파싱 비용이 증가합니다.

보완: SSR / SSG

이런 한계는 서버에서 미리 HTML을 만들어 주는 방식으로 보완합니다.

• SSR(Server-Side Rendering) — 요청마다 서버가 HTML을 생성해 내려줍니다.
• SSG(Static Site Generation) — 빌드 시점에 HTML을 미리 만들어 둡니다.

Next.js처럼 SSR·SSG를 지원하는 프레임워크를 쓰면 초기 HTML에 내용이 담겨 첫 화면과 SEO가 개선되고, 이후 자바스크립트가 붙어(hydration) 상호작용이 가능해집니다.