SSR(Server Side Rendering)과 CSR(Client Side Rendering)이란?

웹 애플리케이션은 화면을 사용자에게 보여주는 방식에 따라 SSR(Server Side Rendering) 과 CSR(Client Side Rendering) 으로 나눌 수 있습니다. 두 방식의 가장 큰 차이는 “HTML을 어디에서 생성하느냐” 입니다.

SSR(Server Side Rendering)

SSR은 서버에서 HTML을 완성한 뒤 브라우저에 전달하는 방식입니다.

사용자가 페이지를 요청하면 서버는 필요한 데이터를 조회하고 HTML을 생성하여 브라우저에 응답합니다. 브라우저는 전달받은 HTML을 그대로 화면에 표시합니다.

이 방식은 초기 화면이 빠르게 표시되고 검색 엔진이 페이지 내용을 쉽게 수집할 수 있어 SEO에 유리합니다. 반면, 페이지를 이동할 때마다 서버에 새로운 요청을 보내야 하므로 화면이 새로고침되는 느낌이 발생할 수 있습니다.

CSR(Client Side Rendering)

CSR은 브라우저가 JavaScript를 실행하여 화면을 구성하는 방식입니다.

처음에는 기본적인 HTML과 JavaScript 파일만 내려받고, 이후 필요한 데이터는 API를 통해 가져와 화면을 동적으로 렌더링합니다.

초기 로딩은 SSR보다 다소 느릴 수 있지만, 이후 페이지 이동이 빠르고 부드러워 사용자 경험이 뛰어납니다. React, Vue, Angular와 같은 프론트엔드 프레임워크가 대표적으로 CSR 방식을 사용합니다.

SSR과 CSR 비교

SSR	CSR
서버에서 HTML 생성	브라우저에서 HTML 생성
초기 화면 표시가 빠름	초기 로딩은 상대적으로 느림
SEO에 유리	SEO 대응이 추가로 필요할 수 있음
페이지 이동 시 서버 요청 발생	화면 전환이 빠르고 자연스러움

정리

SSR과 CSR은 어느 한쪽이 더 좋은 방식이라기보다 서비스의 특성에 따라 선택하는 렌더링 방식입니다.

블로그나 쇼핑몰처럼 검색 노출이 중요한 서비스는 SSR이 적합하고, 관리자 페이지나 웹 애플리케이션처럼 사용자와의 상호작용이 많은 서비스는 CSR이 적합합니다. 최근에는 두 방식의 장점을 함께 활용하는 하이브리드 방식도 많이 사용되고 있습니다.