SPA의 시대부터 쭈욱 알아보쟈 ㅎㅎ
(single-page-application) 단일 페이지 애플리케이션으로, 현재의 페이지를 동적으로 작성함으로써 사용자와 소통하는 웹 애플리케이션이다. 연속되는 페이지 간의 사용자 경험을 향상시키고, 웹 애플리케이션이 데스크톱 애플리케이션처럼 동작하도록 도와준다.
JSON
과 같은 포맷으로 서버에서 원하는 데이터만 받아 오는 것이 가능.js
를 활용하여 동적으로 html
요소를 생성하고 페이지 업데이트 2005년 이같은 방식을 AJAX라는 이름으로 부른다
이러한 SPA 트렌드 + 컴퓨터 성능의 향상 + JS의 표준화(React,Angular,Vue 등장) = CSR의 시대!
client-side-rendering, 쉽게말해 client단에서 다 한다!
server에서 index.html
파일을 client에 보내줌
client는 server에 app.js
파일을 요청해 다운로드 받게됨
이 js
파일에 우리가 필요로 하는 라이브러리,로직,프레임워크 소스코드등이 모두 포함
추가로 필요한 데이터는 server에 요청해 JSON
형태로 받아옴
app.js
+ JSON
= 동적으로 html
생성해 사용자에게 노출.
사용자가 첫 화면을 보기까지 오랜 시간이 걸릴 수 있다. ( js파일을 다운받는데 시간이 오래걸릴 수록...)
SEO의 효율이 떨어진다!
요러한 단점이 SSR의 등장을 야기.
server-side-rendering, 쉽게말해 이번엔 서버단에서 다 할래!!
웹사이트 접속
server는 필요한 정보들을 모두 HTML
+ 이를 동적으로 제어할 Javascript
와 함께 client에 전달.
client단에서 이를 받아와 바아로 사용자에게 노출 가능.
html
을 만들어야 함 ㅠㅠtime-to-view , time-to-interact
사이트 접속
server에게서 index 파일 받아옴 (텅텅 비어서 사용자에게는 노출 x)
index 파일에 링크된 javscript
요청( 모든 페이지에 대한 정보가 담겨있음)
동적으로 html을 생성할 수 있는 javascript
파일을 받아옴
이 순간부터 사용자에게 보여지게 되고, click도 할 수 있음
즉 CSR은 TTV (사용자가 웹사이트를 볼 수 있음)과 동시에 TTI (사용자가 웹사이트와 상호작용)가 가능하다!
사이트 접속
server로 부터 이미 잘 만들어진 index.html
파일을 받아온다.
사용자는 이미 이때 부터 웹사이트 볼 수 있다. TTV
하지만 아직 동적으로 제어 가능한 javscript
는 받아오지 않음.
TTI (상호작용)이 아직 불가능
server에 이를 요청하고, 이를 받아와야만 TTV 가능.
즉 SSR은 TTV와 TTI 사이의 공백기간이 존재!
server로 부터 받아오는 javscript
를 어떻게 효율적으로 받아올 것인가.
어떻게 더 잘게 쪼개서 사용자에게 필수적인 요소부터 보내줄 수 있을까 고민
사용자가 보고 상호작용 할 수 있는, 즉 TTV
와 TTI
의 공백을 어떻게 더 줄일 수 있을까?
어떻게 사용자에게 더 나은 경험을 제공할 수 있을지. ( UI/UX 측면에서 )
CSR과 SSR을 함께 사용하는 SSG(static-site-generation)도 있다는데 이 부분도 공부해서 포스팅 해봐야 겠다. (Gatsby , Next.js) 🧐
참고자료 : [드림코딩],[어서 와, SSR은 처음이지? - 도입편]을 참고하여 정리한 글입니다.