SSR(서버 사이드 렌더링) vs CSR(클라이언트 사이드 렌더링)

렌더링(Rendering)이란 컴퓨터 프로그램을 사용하여 모델 또는 이들을 모아놓은 장면인 씬 파일(scene file)로부터 영상을 만들어내는 과정을 말한다.

따라서 웹 상에서의 렌더링은 서버로부터 받은 정보(HTML)를 브라우저 화면에 표현하는 것을 의미한다.

 

브라우저 화면을 의미하는 페이지는 정적 페이지와 동적 페이지가 존재한다.

정적 페이지는 누구에게나 동일한 화면을 보여주지만 동적 페이지는 사용자에 따라 다른 페이지를 보여줘야 한다.

간단한 예시로 로그인을 성공하면 해당 유저의 로그인 정보가 페이지에 나타나야 할 것이다.

 

따라서 사용자의 요청에 해당하는 페이지를 보여주기 위해 서버로부터 필요한 데이터들을 받아서 최종 HTML를 구성해야 한다.

이때 서버 or 클라이언트 중 누가 최종 HTML를 구성하는지에 따라 SSR(서버 사이드 렌더링)과 CSR(클라이언트 사이드 렌더링)로 나뉜다.

두 방식에 대해서 간단하게 알아보도록 하자.

 

 

SSR(서버 사이드 렌더링)

 

• HTML 최종 결과를 서버 측에서 만들어서 웹 브라우저에게 전달하는 방식
• 화면을 이동할 때마다 서버에게 새로운 화면을 요청
• 주로 정적인 화면에 사용
• JSP, Thymeleaf 등을 활용하여 백엔드 개발자가 주로 맡는 영역

  

장점

• 검색엔진 최적화 (SEO, Serach Engine Optimization) 가능
• 검색엔진 최적화 : 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 페이지를 구성하여 검색 결과의 상위에 노출될 수 있도록 해주는 작업
• 초기 로딩 속도가 빠름 : 서버에서 처음 렌더링 된 화면을 구성하여 클라이언트에게 내려줌
• 또한, JavaScript 파일을 불러오고 렌더링 작업이 완료되지 않아도 사용자가 컨텐츠 이용 가능

단점

• 매번 화면을 변경할 때마다 서버에게 요청해야 하기 때문에 서버의 부담이 커짐
• 서버 개발자가 화면을 구성하는 부분도 개발해야 하기 때문에 프로젝트 구조(View)가 복잡해짐

 

 

 

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

 

• HTML 최종 결과를 클라이언트 측에서 만들어서 웹 브라우저에게 전달하는 방식
• 주로 동적인 화면에 사용
• 자바스크립트를 사용해서 웹 브라우저에서 동적으로 HTML를 변경
• 초기 페이지를 보여준 다음, 사용자의 요청에 따라 서버에게 데이터를 받아서 필요한 영역만 렌더링 하는 방식
• React, Vue.js 등을 활용하여 웹 프론트엔드 개발자가 주로 맡는 영역

장점

• 화면을 구성하는 책임을 나눠가지기 때문에 서버의 부담을 줄일 수 있음
• 첫 요청 시에만 서버에게 페이지를 불러옴
• 따라서 초기 로딩 속도는 느리지만 그다음부터는 서버에게 요청할 필요 없이 클라이언트 내에서 렌더링 작업이 이루어지기 때문에 빠름
• 즉, 웹 트래픽 감소와 빠른 인터랙션을 기대할 수 있음

단점

• 검색엔진 최적화 (SEO, Serach Engine Optimization) 어려움
• CSR 방식은 화면을 생성하기 위해서 반드시 JavaScript를 실행시켜야 하는데, 대부분의 웹 크롤러 봇들은 JavaScript 파일을 실행시키지 못하기 때문에 렌더링 되기 전의 HTML 화면만 봐서 데이터 수집이 어려움
• 초기 로딩 속도가 느림 : 서버에게 데이터를 받아서 클라이언트가 화면을 구성해야 하기 때문

 

 

두 방법 모두 장단점이 존재하기 때문에 어떤 방법이 좋다고 하기에는 애매하며, 두 방법을 적절하게 활용하는 것이 바람직하다.

참고로 React, Vue.js를 CSR + SSR 동시에 지원하는 웹 프레임워크도 존재하며, SSR을 사용하더라도, 자바스크립트를 사용해서 화면 일부를 동적으로 변경 가능하다.

 

 

 

[ Reference ]

· https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-1/dashboard

· https://ivorycode.tistory.com/entry/SSRSever-Side-Rendering%EA%B3%BC-CSRClient-Side-Rendering