22.12.03./CSR과 SSR

0. SPA(Single Page Application) 와 MPA(Multiple Page Application)

• SPA
  • 하나의 HTML 파일로 이루어진 홈페이지
  • VUE,ANGULA,REACT 프레임워크 로 만든 홈페이지
• MPA
  • 여러 개의 HTML 파일들로 이루어진 홈페이지
  • PHP나 JAVA

1. CSR(Client Side Rendering)

서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내주고
클라이언트는 그것을 받아 렌더링을 시작한다.

 자바스립트가 모두 다운로드 되고 실행이 끝나기 전까지
사용자는 볼 수 있는게 없다.

• 구동 방식
  1. 빈 html 과 모든 로직이 담겨 있는 js을 다운로드
  2. 빈 html의 동적으로 js를 사용해 DOM 그리기
• SPA의 적합한 환경
• 원하는 내용만 업데이트를 할 수 있음
  • 헤더와 풋터와 같이 중복되는 내용은 고정으로 두고
    안에 컨텐츠만 업데이트하여 로드할 수 있음\
• 초기 진입속도가 느릴 수 있음
• 구글을 제외하고 SSR에 비해 SEO에 약한 편

2. SSR(Server Side Rendering)

서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식

자바스크립트가 다운로드 되는 동안 사용자는 무언가를 보고 있을 수 있다.

• 구동 방식
  1. 서버에서 렌더링
  2.  완성된 html 파일을 로드
  3. 클라이언트에서 요청을 할 떄마다 각 상황에 맞는 html 파일을 넘겨줌
• MPA와 더 적합한 환경
• 불필요한 부분까지 다시 렌더링하게 된다는 단점이 있음

3. CSR vs SSR

 

1. 웹페이지를 로딩하는 시간
웹 페이지 로딩의 종류는 두 가지로 나눌 수 있다.
하나는 웹 사이트의 가장 첫 페이지를 로딩하는 것.
다른 하나는 나머지를 로딩하는 것

첫 페이지 로딩시간
- CSR의 경우 HTML, CSS와 모든 스크립트들을 한 번에 불러온다.

반면 SSR은 필요한 부분의 HTML과 스크립트만 불러오게 된다.

- 따라서 평균적으로 SSR이 더 빠르다.

나머지 로딩 시간
- 첫 페이지를 로딩한 후, 사이트의 다른 곳으로 이동하는 식의 동작을 가정하자.
   CSR은 이미 첫 페이지 로딩할 때 나머지 부분을 구성하는 코드를 받아왔기 때문에 빠르다.
- 반면, SSR은 첫 페이지를 로딩한 과정을 정확하게 다시 실행한다. 그래서 더 느리다.

 

 

2. SEO 대응
검색 엔진은 자동화된 로봇인 '크롤러'로 웹 사이트들을 읽는다. 
CSR은 자바스크립트를 실행시켜 동적으로 컨텐츠가 생성되기 때문에 자바스크립트가 실행 되어야 meatadata가 바뀌었다.
(이전 크롤러들은 자바스크립트를 실행시키지 않았었기에 SEO 최적화가 필수적이었다. 구글이 그 트렌드를 바꾸고 있다고 한다.)

SSR은 애초에 서버 사이드에서 컴파일되어 클라이언트로 넘어오기 때문에 크롤러에 대응하기 용이하다.

 

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

4. CSR + SSR

• Next.js
  • Next.js를 사용하여 첫페이지는 백엔드 서버에서 렌더링하여
    빈 html이 아닌 데이터가 채워진 html을 받아 검색최적화 문제를 해결하고
  • 그 다음 페이지부턴 CSR방식을 적용하여 필요한 데이터 부분만 갱신해 서버의 부하도 줄이게 한 것

 

출처: https://hahahoho5915.tistory.com/52

[간단정리] CSR vs SSR 특징 및 차이

https://pxd-fed-blog.web.app/csr-ssr/

CSR 과 SSR의 차이점