CSR과 SSR

CSR (Client Side Rendering)
SSR(Server Side Rendering)

CSR이란?

CSR이란 Client Side Rendering의 약자이다. 직역 하면 클라이언트 측에서 렌더링을 한다는 의미가 된다.

CSR이라는 용어가 낯설지만, 생각보다 간단한 개념이다. CSR은 특별한 것이 아니라 나처럼 웹 개발, 프론트엔드 개발을 시작한지 얼마 안된 사람이라면 웹의 기본적인 동작으로 알고 있는 방식이다. 그 방식은 바로 서버에서는 데이터를 보내 주는 역할을 하고, 클라이언트에서는 해당 데이터를 통해 화면을 보여주고, 유저 인터렉션을 통해 데이터를 요청하는 방식이다.

CSR 동작 방식을 순서대로 표현하면 다음과 같다.

1. 클라이언트에서 서버로 Javascript 요청
2. 서버에서 클라이언트로 Javascript 로직 내려줌
3. 클라이언트에서 Rest API 등으로 데이터 요청
4. 서버에서 클라이언트로 데이터 내려줌
5. 클라이언트는 응답 데이터와 Javascript 로직을 통해 HTML 생성
6. 클라이언트에서 생성한 HTML을 사용자에게 보여줌

위 플로우는 현 시대 웹 개발에서 기초적인 부분이고, 해당 방식을 가장 처음 배우는 방식이라 모두에게 익숙한 방식이다. 그렇다면 대세로 자리잡기 시작하여 CSR 방식을 배우고 나면 당연히 배워야 하는 것처럼 코스가 만들어지고 있는 SSR에 대해서도 알아보자.

SSR이란?

SSR이란 Server Side Rendering의 약자이다. CSR과는 반대로 렌더링을 서버 측에서 한다는 의미이다.서버사이드 렌더링은 HTML 자체를 서버에서 만들고 해당 HTML을 브라우저가 표현해주는 방식이다.

SSR 동작 방식을 순서대로 표현하면 다음과 같다.

1. 클라이언트에서 서버로 HTML 요청
2. 서버에서 클라이언트에 HTML 내려줌
3. 클라이언트는 서버에서 받은 HTML을 유저에게 보여줌

CSR과 SSR의 차이 및 장단점

그렇다면 CSR과 SSR의 차이는 무엇이 있고, 이 차이점으로 인해 나타나는 장단점은 무엇인지 알아보자.

웹 페이지 로딩

• 첫 페이지 로딩
  웹페이지 로딩은 첫페이지 로딩과, 각 페이지 로딩 시간이 있다. CSR의 경우 HTML, CSS, JS 등의 파일을 한 번에 불러온다. 반면 SSR은 필요한 부분의 HTML과 스크립트만 불러오게 된다. 따라서 첫 페이지 로딩은 SSR이 빠른 경향이 있다.
• 나머지 로딩 시간
  첫 페이지 로딩 이후, 다른 페이지로 이동 하는 경우, CSR은 이미 첫 페이지 로딩 시 다운로드를 받아 두어 빠르게 다른 페이지로 이동할 수 있다. 반면 SSR은 각 페이지를 이동 할 때마다 다운로드를 진행하기에 느린 경향이 있다.

서버 자원 사용

• SSR이 서버 자원을 많이 사용한다. 매번 서버에 요청을 하기 때문이다.

CSR, SSR 비교 요약

• SSR

  • 첫 페이지 로딩이 대체적으로 빠른 경향이 있다.
  • 페이지 이동 시 새로 HTML 파일을 다운 받기 때문에 페이지 이동 시 로딩이 느리다.
  • SEO 최적화가 잘 된다.
  • 첫 페이지 로딩이 빠르기에 TTV(Time To View)와 TTI(Time To Interacct) 간에 시간 간격이 존재한다.
  • 서버 측 부하가 증가한다.

• CSR

  • 첫 페이지 로딩이 오래 걸린다.
  • 페이지 이동 시 이미 첫 페이지에 로드 한 파일을 사용하므로 페이지 이동이 빠르다.
  • SEO 최적화가 나쁘다.