CSR과 SSR 이란?

CSR(Client Side Rendering)과 SSR(Server Side Rendering)은 브라우저의 렌더링 방식으로 CSR과 SSR의 영어 풀이 그대로 렌더링을 클라이언트 측에서 하냐, 렌더링을 서버 측에서 하냐입니다. 즉, 브라우저 상에 그릴 콘텐츠를 어디서 만드는가가 기준입니다.

 

두 개념 다 궁극적인 목표는 같습니다. 결과적으로 웹에서 콘텐츠를 만들어 유저에게 보여주겠다는 목표는 같으며, 그 목표를 이루기 위한 방법으로 CSR은 클라이언트에서 HTML을 DOM을 이용해서 만들어 화면에 그리는 것이고 SSR은 서버에서 HTML을 만들어서 내려보내준다는 점의 차이가 있을 뿐입니다.

 

클라이언트 사이드 렌더링 (CSR)

출처:  The Benefits of Server Side Rendering Over Client Side Rendering

클라이언트 사이드 렌더링은 말 그대로 렌더링이 클라이언트 쪽에서 일어나는 것입니다. 즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내주고 클라이언트는 그것을 받아 렌더링을 시작하게됩니다.

보통 요즘 프론트로 사용하는 싱글 페이지 어플리케이션(SPA)은 렌더링 방식으로 Client Side Rendering, 클라이언트 사이드의 렌더링을 채택하고있습니다.

 

CSR의 등장이유

예전에는 페이지 A에서 B로 넘어가는 과정이 부자연스러웠습니다. 항상 넘어가는 과정에서 흰색 화면이 노출되며 화면이 깜빡이는 현상이 있었고, 데이터를 갱신할 때마다 새로고침을 해줘야 하는 것은 필수였습니다.

사이트 이동 사이에는 항상 약간의 로딩이 필요한데 예전의 사이트는 이동 중에 로딩 인디케이터를 보여줄 수 없었고, 새로고침을 해야지만 새로 데이터를 받아올 수 있었습니다. 

그래서 클라이언트 사이드 렌더링이 대두되게 된 것입니다. 그러나 기본적으로 HTML을 그리는 것 외에는 모든 것을 JavaScript의 언어로 해결을 하려다 보니 피치 못하게 JS 번들 사이즈가 정말 많이 커지게 됐습니다. 그럼에도 클라이언트 사이드 렌더링을 이용해 한 번 렌더링을 시키고 나면 그 다음에는 필요한 부분만 렌더링을 시키면 되기 때문에 렌더링 최적화를 잘 시켜준다면 유저 경험 측면에서는 분명히 긍정적인 영향을 줄 수 있기 때문에 클라이언트 사이드 렌더링은 아직까지도 선호되는 렌더링 방법 중 하나입니다.

 

CSR의 장점

• 후속 페이지 로드 시간이 더 빠릅니다. CSR을 위해 이미 모든 지원 스크립트가 사전에 로드되었기 때문에 CSR의 로드 시간이 줄어듭니다.
• 필요한 부분만 요청하고 응답하기 때문에 서버 부화를 감소시킵니다.
• 깜빡임이 없어 사용자 친화적입니다.

 

CSR의 단점

• CSR을 사용하면 브라우저는 브라우저에서 사용 가능한 컨텐츠로 HTML을 컴파일하기 전에 기본 HTML, CSS 및 모든 필수 스크립트를 로드하기 때문에 초기 로딩 속도가 느립니다.
• 자바스크립트를 사용하여 사용자와 상호작용 후 페이지 내용이 로드되기 때문에 SEO(검색엔진 최적화)에 불리합니다. (그 전엔 그내용이 빈페이지로 뜨게된다)

 

서버 사이드 렌더링 (SSR)

출처:  The Benefits of Server Side Rendering Over Client Side Rendering

서버 사이드 렌더링 또한 말 그대로 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식입니다. 이렇게 하면 브라우저에서 응답을 받기 전에 데이터 패칭 및 템플릿 작성이 처리되므로 클라이언트에서 위 행위에 대해 추가 왕복이 발생하지 않습니다.

 

서버 사이드 렌더링은 보통 웹 콘텐츠가 많을 때 많이 쓰이는 렌더링 방식으로, 서버에서 콘텐츠를 만들어서 웹으로 내려보내 렌더링을 하는 방식입니다. 여기서 서버에서 콘텐츠를 만들어서 웹으로 내려보낸다는 의미는, 서버에 존재하는 데이터베이스(DB)에서 마련된 API를 받아와 그 API에서 필요한 데이터를 받고, 그 데이터를 통해서 HTML을 만드는 것이 모두 서버에서 이뤄진다는 뜻입니다.

 

서버 사이드 렌더링은 클라이언트 사이드 렌더링보다 속도 면에서 훨씬 이점을 보입니다. 왜냐하면 서버가 가진 컴퓨팅 파워, 즉 자체적인 성능이 브라우저가 가진 성능보다 훨씬 우월하기 때문입니다.

 

또한 서버 사이드 렌더링으로 만든 웹사이트는 화면을 구성하는 각각의 페이지가 있기 때문에 SEO(검색엔진 최적화)에 유리해 검색 엔진에서 우선적으로 노출시킬 수 있습니다.

 

그러나 서버 사이드 렌더링은 그때마다 클라이언트가 서버를 통해서 데이터를 요청하고, 서버가 HTML을 그려서 내려보내주는 방식을 취합니다. 이 점에서는 최초 단 한 번만 HTML 파일을 다운로드하고 그 이후로는 하지 않는 CSR이 좀 더 속도 면에서 우위를 가져갈 수 있습니다.

 

SSR의 장점

• 화면을 구성하는 각각의 페이지가 있기 때문에 SEO(검색엔진 최적화)에 유리해 검색 엔진에서 우선적으로 노출시킬 수 있습니다.
• 서버로부터 화면을 렌더링 하기 위한 필수적은 요소를 먼저 가져오기 때문에 CSR보다 초기 로딩 속도가 빠릅니다.

 

SSR의 단점

• 새로운 요청이 생길때 마다 바뀌지 않아도 되는 부분도 렌더링이 되어 서버에 부화가 올 수 있습니다.
• 서버 사이드 렌더링 방식은 페이지 전환이 일어날 때마다 클라이언트가 데이터를 요청하고, 요청을 받은 서버는 HTML을 만들어 다시금 클라이언트로 만든 HTML을 보내는 시간이 필요하기 때문에 이 과정이 느려지면 느려질수록 UX는 저하가 될 수 있습니다.