SPA - CSR/SSR/SSG

Web Development/General Tech Knowledges

Nomad Kim 2021. 8. 1. 17:31

Single Page Application

html 문서 전체가 아니라 json 과 같은 포맷으로 서버에서 필요한 데이터만 받아올 수 있다.

이 데이터를 javascript 를 이용해 동적으로 html 요소를 생성해 페이지를 업데이트하는 방식이다.

이 방식이 AJAX 라는 이름으로 공식적으로 인정되는데, 이 것이 Single Page Application 이다.

Table of Contents:

JS + Framework(React, Angular, View)

클라이언트에서 모든 것을 처리하는 방식

html 파일에 아래와 같이 body 안에서 script 로 링크된 app.js 자바스크립트를 서버로부터 다운로드 받는다.

로직들, 프레윔워크, 라이브러리의 소스코드가 포함되어 있어 사이즈가 커 다운로드 받는데 시간이 걸릴 수 있다.

<body>
  <div id='root'></div>
  <script src='app.js'></script>
</body>

단점

1. Initial Loading may take too long

2. Low SEO(Serach Engine Optimization): html 의 body 는 보통 비어있기 때문에 SEO 가 좋지 않다.

위와 같은 단점을 보완하기 위해 *Static Sites 에서 영감을 받은 Server Side Rendering 이 탄생한다.

*Static Sites

서버에 배포되어 있는 html 문서를 받아와서 보여주는 형식.

문제점은 페이지 내에서 다른 링크를 클릭시 페이지 전체가 업데이트 되어 사용성이 떨어짐.

서버에서 웹 사이트에 필요한 데이터를 모두 가져와서 html 파일 만들고 이 파일을 동적으로 조금 제어할 수 있는 소스코드와 함께 클라이언트에 보내주면, 클라언트에서는 이를 바로 사용자에게 보여준다.

개선점

1. Initial page load is faster

2. Great SEO: 모든 컨텐츠가 html 에 담겨져 있기 때문에 더 효율적인 Search Engine Optimization 이 가능하다.

단점

1. Blinking issue, Non-rich site interations

2. Server side overhead: 서버 과부하

3. Need to wait before interacting: 동적으로 데이터를 처리하는 자바스크립트(app.js)를 다운 받기 전에 여기저기 클릭할 경우 반응이 없는 경우가 발생할 수 있다.

1. CSR

TTV 와 TTI 가 동시에 가능해진다. 화면이 나타나는 시간이 느리다.

2. SSR

html 을 먼저 받아와서 사용자가 화면을 볼 수 있지만, javascript 파일을 받아올 때까지 클릭과 같은 interact 는 할 수 없다.

화면을 렌더링한 시점부터 인터랙션 기능이 가능할 때까지의 공백기간이 꽤 긴 편이다.

리액트로 만든 앱을 정적으로 웹페이지를 미리 생성해 서버에 배포놓는다. 추가적으로 서버로부터 데이터를 받아오거나 동적으로 처리해야 하는 로직이 있을 경우 자바스크립트 파일을 함께 가지고 있을 수 있기 때문에 동적인 요소도 추가할 수 있다.

해당 서비스(사이트) 가 정적인지 동적인지,

서버에서 동적으로 데이터를 받아오는지, 얼마나 자주 받아오는지, 얼마나 많은 사용자가 있는지 등에 따라

TTV(Time To View) & TTI(Time To Interact) 를 고려하여 더 유연하게 섞어가며 개발하는게 좋다.

서버사이드 렌더링 (개발자라면 상식으로 알고 있어야 하는 개념 정리 ⭐️): https://www.youtube.com/watch?v=iZ9csAfU5Os&t=335s