[ TIL ] SSR 방식과 CSR 방식의 차이

SSR 방식과 CSR 방식의 차이

 

SSR(Server Side Rendering)이란?

 

렌더링이 서버쪽에서 일어나는 방식 ,

 

1. 유저가 웹사이트에 요청한다
2. 서버가 렌더링 가능한 HTML파일을 만든다.
3. 브라우저가 즉시, HTML을 만든다. (하지만, 사이트 자체는 조작 불가능하다.)
4. 브라우저가 자바 스크립트를 다운로드한다. 
5. 유저는 컨텐츠를 볼 수 있지만 사이트를 조작할 수 없으며, 그것을 기억하고 있는다.
6. 브라우저는 자바스크립트 프레임워크를 실행한다.
7. 기억하고 있던 조작이 실행되고 웹페이지가 상호작용이 가능해진다. 

 

CSR(Client Side Rendering)이란?

 

렌더링이 클라이언트 쪽에서 일어나는 방식 ,

 

1. 유저가 웹사이트 요처을 보냄
2. CDN이 HTML파일과 JS로 접근할 수 있는 링크를 클라이언트로 보낸다.
3. 브라우저가 HTML과 JS를 다운로드한다. (유저는 아무것도 볼 수 없다.)
4. 브라우저는 JS를 다운로드한다.
5. JS가 실행된다. API가 불러온 data를 Placehoder에 넣는다. 
6. 서버는 data와 상호작용한다.
7. data는 placeholders에 채워지며 페이지는 상호작용이 가능해진다. 

 

 

상호간의 차이

 

1. 첫 페이지 로딩시간의 차이
   1. CSR는 HTML, CSS와 모든 스크립트들을 한 번에 불러온다. 
   2. SSR은 필요한 부분의 HTML과 스크립트만 불러오게 된다.
   3. 따라서 평균적으로 SSR이 더 빠르다.
2. 나머지 로딩시간
   1. CSR은 첫 페이지 로딩할 때 나머지 부분을 구성하는 코드를 받아왔다.
   2. SSR은 첫 페이지를 로딩한 과정을 정확하게 다시 실행한다.
   3. 따라서 CSR이 더 빠르다.
3. SEO 대응 
   1. 검색 엔진은 자동화된 로봇인 '크롤러'로 웹 사이트들을 읽는다.
   2. CSR은 자바스크립트를 실행시켜 동적으로 컨텐츠가 생성되기 때문에 자바스크립트가 실행 되어야 meatadata가 바뀐다. 
   3. SSR은 애초에 서버 사이드에서 컴파일되어 클라이언트로 넘어오기 때문에 크롤러에 대응하기 용이하다.
4. 서버 자원 사용
   1. SSR이 서버 자원을 더 많이 사용한다. 매번 서버에 요청을 하기 때문
   2. CSR은 클라이언트에서 처리하기 때문에 서버에 부하가 적다.

 

CSR과 SSR의 사용시기

 

• SSR
  • 네트워크 속도가 느릴 때 사용
    (CSR은 한번에 모든 것을 불러오지만 SSR은 각 페이지마다 나눠불러오기 때문)
  • SEO(serach engine optimization : 검색 엔진 최적화)가 필요할 때.
  • 최초 로딩이 빨라야하는 사이트를 개발 할 때
  • 메인 스크립트가 무겁고 로딩이 느릴 때 필요.                                                                                                            (CSR은 메인스크립트가 로딩이 끝나면 API로 데이터 요청을 보낸다. 하지만 SSR은 한번의 요청에 아예 렌더가 가능한 페이지가 돌아온다.)
  • 웹 사이트가 상호작용이 적을 때
• CSR
  • 네트워크가 빠를 때 사용
  • 서버의 성능이 좋지 않을 때 사용
  • 데이터의 양이 많을 때.
  • 메인 스크립트가 가벼울 때
  • SEO가 불필요 할 때
  • 웹 어플리케이션에 사용자와 상호작용할 것들이 많을 때.