CSR과 SSR은 사용자 경험과 운영 비용에 어떤 차이를 만드나요?

이렇게 답해 보세요 (핵심 답변)

CSR(Client-Side Rendering)은 브라우저가 빈 HTML과 JavaScript 번들을 내려받아 클라이언트에서 화면을 그리는 방식이고, SSR(Server-Side Rendering)은 요청 시 서버가 데이터가 채워진 HTML을 먼저 만들어 보내고 브라우저에서 Hydration으로 이벤트와 상태를 연결하는 방식입니다. SSR은 첫 콘텐츠 표시(FCP/LCP)와 검색 엔진·소셜 미리보기 대응에 유리하지만, 서버 연산 비용과 TTFB 지연, Hydration 전까지 상호작용이 지연될 수 있는 부담이 있습니다. 반면 CSR은 정적 호스팅만으로 배포가 단순하고 화면 진입 후 전환이 빠르지만 초기 번들 크기와 API 요청 폭포(Waterfall)를 잘 관리해야 합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 화면에 글자가 먼저 보이는 시점(Paint)과 실제로 버튼 클릭이 동작하는 시점(Interactive)이 다를 수 있음을 구분해야 합니다.
2. 모든 페이지를 한 가지 방식으로 통일하기보다, 검색 노출이 중요한 공개 상품 페이지는 SSR/SSG로, 로그인 후 대시보드는 CSR로 나누는 등 화면 성격에 맞춰 선택합니다.

면접에서 자주 하는 실수

SSR을 도입하기만 하면 별도의 번들 최적화나 캐시 전략 없이도 모든 성능 지표와 SEO 순위가 자동으로 해결된다고 생각하면 안 됩니다.