드림코딩 엘리 | 서버 사이드 랜더링 SPA, CSR, SSR, SSG, TTV, TTI

서버사이드 렌더링 (개발자라면 상식으로 알고 있어야 하는 개념 정리 ⭐️) - YouTube

 

클라이언트 사이드 렌더링 CSR

서버 사이드 렌더링 SSR

 

웹의 역사

 

1990s

까지는 Static Sites였다. 

서버에 이미 배포되어있는 HTML을 보여주는 형식

다른 링크를 클릭하면, 

다시 서버에서 받아와서 화면 전체를 업데이트 해야했음

 

1996년

문서 내에서 다른 문서를 담는 iframe이 도입되었음

부분적으로 업데이트하는 것이 가능해짐

 

1998년

XMLHttpRequest

JSON 형태로 가볍게 필요한 데이터만을 받아올 수 있다. 

이를 JS에서 Html으로 변환해준다. 

 

2005년

AJAX로 공식화됨

이것이 SPA

Single Page Application

사용자가 한 페이지에 머무르면서 

부분적으로만 업데이트한다. 

 

사용자 PC 성능이 좋아지면서 등장한 것?

 

=> Angular, React, Vue가 등장

 

CSR 클라이언트 사이드 렌더링

 

CSR Client Side Rendering

클라이언트측에서 모두 처리하는 것

CSR

html은 텅 비어있고, 연결된 자바스크립트에서 처리해주게 된다. 

서버로부터 자바스크립트를 받아온다. 

어플리케이션의 모든 요소들이 포함되어있음(사이즈 큼)

문제점 : 첫 화면을 보기까지 오래 걸림

문제점 : Low Search Engine Optimization

서버에 등록된 웹 사이트를 돌아다니면서

HTML을 분석하면서 검색 엔진을 만들어주는 것이다. 

그러나 CSR에서는 HTML 바디에서 어떤 정보를 주지 못하게 된다. 

 

 

SSR 서버 사이드 렌더링

 

SSR Server Side Rendering

서버 사이드에서 모든 요소를 가져와서

HTML 파일을 동적으로 제어하는 소스코드와 함께

클라이언트에게 보내준다. 

바로 사용자에게 보여줄 수 있게 되는 것

=> 첫번째 페이지 로딩이 빨라진다

=> 모든 컨텐츠가 HTML에 담겨있어 SEO가 쉬움

<-> 문제점

: 화면이 깜빡이는 이슈가 발생한다. 

: 서버에 과부하가 걸리기 쉽다

: 자바스크립트를 다운받지 못해서 클릭했으나 반응이 없을 수 있음

 

TTV와 TTI 측면에서 정리

 

*cf*

TTV Time To View

TTI Time To Interact

 

CSR의 경우

- 서버에서

- Index.html 다운

- 연결된 자바스크립트를 요청

- HTML을 생성하는 자바스크립트 받아옴

= viewable = interactable

(즉, CSR는 TTV = TTI)

 

SSR의 경우

- Index.html을 먼저 받아온다

(=viewable)

- 그 다음에 JS 파일을 다운 받는다

(=interactable)

TTV < TTI

 

웹사이트의 성능을 평가할 때

중요한 매트릭이 된다. 

 

어떻게 개선할 수 있을까? 

 

SSG Static Site Generation

리액트는 Client Side Rendering에 특화됨

Gatsby와 함께 사용하면 서버에 미리 배포해둘 수 있다

 

추가적으로 데이터를 받아오거나, 

동적인 로직이 있으면

동적인 요소도 추가 가능하다

 

Next.JS

원래 SSR를 지원하는 라이브러리였는데, 

static-generation도 지원해주고 있다. 

 

출처 : 드림코딩 엘리🧡