서버사이드 렌더링 이란?

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

 

 

Static Sites

: 1990년대 중반까지 모든 웹 페이지들의 방식

: 서버에서 HTML 파일을 일일이 받아오는 방식으로 페이지 이동때 마다 서버 요청하여 웹 페이지를 띄움

 

 

iframe

: 1996년에 탄생한 문서 내에서 또 다른 문서를 담을 수 있는 태그

 

 

XML Http Request API

: 1998년 탄생한 fetch API의 원조

: HTML 문서 전체가 아닌 JSON과 같은 포맷으로 필요한 데이터만 받아올 수 있게됨

: JS를 이용하여 동적으로 업데이트 

 

 

AJAX

: 2005년 XML을 이용한 API 웹 페이지 방식

: 현재 널리 쓰이고 있는 SPA (Single Page Application)의 원조

: 구글 맵 등에서 사용하는 방식

: 사용자가 한 페이지 내에서 머무르면서 필요한 데이터만 받아오는 방식

: JS의 표준화가 개선됨에 따라 Angular / vue / React 같은 프레임워크가 나오면서

  CSR (Client Side Rendering)의 시대가 열림

 

 

CSR (Client Side Rendering)

: 클라이언트 측에서 웹 페이지를 렌더링 하는 방식 

: 서버에서 인덱스라는 HTML 파일을 보내면 인덱스에서 자바스크립트 애플리케이션의 링크를 호출하여

  서버로 부터 웹 페이지 렌더링에 필요한 모든 코드와 데이터를 받아옴

 

- 단점

: 첫 화면을 보는데 시간이 오래걸림

: SEO (Search Engine Optimization)이 느려, 검색엔진들이 분석하는데 오래 걸림

 

 

SSR (Server Side Rendering)

: 서버에서 필요한 데이터를 모두 가져와서 HTML 파일을 만들고 

  이를 동적으로 제어할 수 있는 소스코드를 보내줌

: 클라이언트에서는 바로 사용자에게 페이지에게 출력할 수 있음

: 첫 페이지 로딩이 빠름

: 모든 컨텐츠가 HTML에 담겨져 있기 때문에 SEO가 개선됨

 

- 단점

: 전체적인 웹사이트를 서버에서 받아오기 때문에 Blingking (깜빡임) 이슈 존재

: 서버에 과부하가 걸리기 쉬움

: 동적으로 데이터를 처리하는 자바스크립트를 다운로드 받는데 속도가 느려

  클릭에 대한 반응이 없을 수 있음

 

 

TTV (Time To View)

: 사용자가 웹 사이트를 볼 수 있는 특징

: CSR과 SSR에서도 빠름

 

 

TTI (Time To Interactive)

: 사용자가 웹 사이트를 사용할 수 있는 특징

: CSR에서는 빠르지만 SSR에서는 느림

=> SSR는 TTV와 TTI의 차이가 큼

 

 

SSG (Static Site Generation)

: React의 경우 CSR에 특화된 라이브러리지만 Gatsby 라이브러리를 같이 사용하면

  정적으로 웹 페이지를 만들어놓아 사용할 수 있음

: CSR과 SSR이 융화된 방식

: Next.js의 경우 SSR에 특화된 라이브러리 였지만 최근에 SSG도 지원하게 됨

 > CSR과 SSR을 융화하여 목적에 맞는 웹 애플리케이션을 만들 수 있음