SSR vs CSR vs SSG (페이지 렌더링 방식)

 

Overview

기존에는 Static Sites 였다.

사용자가 주소에 접속하면 서버에 배포되어있는 HTML 문서들을 받아와서 보여준다.

다른 링크를 클릭하면 다시 서버에서 해당하는 페이지의 HTML 을 요청하고 받아와서 페이지 전체가 업데이트 된다.

이후 XML API, JSON 를 통해 HTML 문서 전체가 아니라 서버에서 필요한 데이터만 받아오고 

JS 를 통해 동적으로 HTML 요소를 생성해서 페이지 업데이트를 받아오는 방식이 있었다.

이러한 방식은 AJAX 라는 이름을 가지게 되었고 구글에서도 AJAX 방식을 사용해 웹어플리케이션을 만들었다.

AJAX를 사용하여 제작한 웹 어플리케이션을 SPA 라고 한다.

 

선행 개념:

TTV (Time To View) : 사용자가 웹사이트를 볼 수 있음

TTI (Time To Interact) : 사용자가 인터렉션이 가능함

 

 

CSR (Client Side Rendering)

사용자가 웹사이트에 접속하면

1. 서버에서 index.html 파일을 클라이언트에 보내주게되는데 받아온 HTML 에는 빈 ROOT 요소와 app.js 링크만 들어있다.

    (HTML 은 비어져 있기 때문에 처음 접속시에 빈 화면만 보인다)

2. 서버로 부터 다운로드 받는 app.js 는

    어플리케이션에서 필요한 로직 + 구동을 위한 프레임워크와 라이브러리의 소스코드가 모두 포함되어있다. (용량이 크다.)
    추가로 필요한 데이터들이 있다면 서버를 통해 JSON 데이터를 받아온다.

3. 2번에서 동적으로 HTML을 생성하여 최종적인 어플리케이션을 보여주게 된다.

    (TTV 와 동시에 TTI 가 가능하다)

 

장점:

- 페이지 렌더링이 자연스럽다.

- 서버에 부담이 적다.

 

문제점:

- 사용자가 첫 화면을 보기까지 시간이 오래걸린다.

- Low SEO (Search Engine Optimization)

  검색엔진들은 웹사이트의 HTML 문서를 분석해 검색엔진에 등록해 놓는다.

  CSR에서는 바디가 대부분 비어져 있기 때문에 검색엔진들이 분석해 놓는데 어려움을 겪는다. (구글에서는 조금 개선됨)

 

성능에 관하여..

CSR 에서는 최종적으로 번들링해서 사용자에게 보내주는 JS 파일을

어떻게 효율적으로 많이 분할해서 첫번째로 사용자가 보기위해 필요한 필수적인 요소만 보낼 수 있을지 고민해본다.

 

 

SSR (Server Side Rendering)

사용자가 웹사이트에 접속하면

1. 서버에서 필요한 데이터를 모두 가져와서 HTML 파일을 만든다.

2. 만들어진 HTML파일은 동적으로 조금 제어할 수 있는 소스코드와 함께 클라이언트에게 보내준다.

3. 잘 만들어진 HTML 문서를 받아와서 바로 사용자에게 보여준다.

 

장점:

- 첫 번째 페이지 로딩이 빠르다.

- 모든 컨텐츠가 HTML 에 담겨져 있기 때문에 조금 더 효율적인 SEO 를 할 수 있다.

 

문제점:

- Static Sites 에서 발생했던 깜박임 현상이 일어난다. (좋지 않은 사용자 경험)
   (전체적인 웹사이트를 다시 서버에서 받아오는 것과 동일하기 때문)

- 요청이 많을 수록 서버 과부하가 걸리기 쉽다.

- HTML 은 빠르게 받아왔지만 동적으로 데이터를 처리하는 JS 를 불러오지 못했을때 이벤트에 대한 반응이 없을 수 있다.

  (TTV 와 TTI 의 공백이 길다.)

 

성능에 관하여.. 

SSR 에서는 TTV 와 TTI 의 단차, 효율적인 UI/UX 제공을 고민해본다.

 

 

SSG (Static Site Generation)

정적 웹 페이지를 생성하는 엔진으로, 컨텐츠가 변경될 일이 거의 없거나 URL을 예측 가능할 경우 SSG를 사용한다.

SSR 처럼 만들어진 HTML 을 받아오지만, SSG는 HTML 파일은 빌드했을때 생성된다.

 

React + Gatsby 

React 에서 만든 웹어플리케이션을 정적으로 웹페이지를 미리 생성해서 서버에 배포해 놓을 수 있다.

JS 파일을 함께 가지고 있을 수 있어서 동적으로 필요한 로직들도 추가할 수 있다.

 

React + NextJS

NextJS 는 SSR 특화 라이브러리이지만 SSG도 지원한다.

CSR 과 SSR 를 섞어서 목적에 맞게 사용할 수 있도록 지원한다.

 

 

 

 

Reference

https://www.youtube.com/watch?v=iZ9csAfU5Os