웹 개발자라면 상식처럼 알아야 하는 SPA,CSR, SSR, SSG, TTV, TTI에 대해서 알아보자.
1990년 중반 - static sites
브라우저가 html, js, css파일을 요청에 따라 응답해주는 정적인 페이지로 구성된 방식
단점 : 페이지를 이동할때마다 페이지 로딩을 기다려야한다. (번쩍거린다.)
1996년 - iframe
페이지 내부에 다른 페이지를 로딩할 수 있는 <igrame>태그의 등장
1998년 - XMLHttpRequest
js의 비동기 요청을 통한 json같은 포맷의 자료를 받아와 필요한 데이터를 HTML에 업데이트하는 기술
2005년 - AJAX
- XMLHttpRequest -> AJAX라는 공식적인 기술로 승격
- SPA(Single Page Application)의 등장
- CSR(Client Side Rendering) 등장
SPA
하나의 페이지에서 브라우저가 머물면서 js를 통한 데이터 업데이트로 하나의 어플리케이션을 활용하는 효과를 제공하는 기술
CSR
빈 껍데기 index.html을 보내두고 app.js라는 어플리케이션에서 필요한 자바스크립트 파일(라이브러리 포함)을 받아 서버로 요청을 보내고 이걸 활용해 페이지를 렌더링 하는 기술
브라우저 동작 순서
서버에 요청 -> 인덱스 파일 다운로드(빈 html) -> 링크된 js 다운로드 요청 -> app.js 다운로드 -> 웹사이트 보임 + 상호작용 가능 (TTI, TTV)장점
- 깜빡임 이슈가 없다.
- 서버 부하가 적다.
단점
- 최초 자바스크립트 파일을 다운로드 하는 시간이 길 수 있다.
- 클라이언트 부담이 크다.
- SEO(Search Engine Optimization)에 좋지 않다.
예시
React
SSR
최초 HTML 렌더링을 서버측에서 하도록 하고 이걸 제어할 수 있는 js파일과 함께 브라우저에 제공하는 방식
브라우저 동작 순서
서버에 요청 -> 인덱스 파일 다운로드 + 화면 확인 가능 (TTV) -> js 요청 -> js 다운로드 완료 + 상호작용 완료(TTI) 장점
- 자바 스크립트 파일 다운로드 시간 짧음
- SEO에 좋다.
단점
- 서버 부하가 크다.
- 깜빡임 이슈 존재
- JS가 다운로드 되기전에 이벤트를 받아오지 못한다.(TTV <-> TTI)
예시
React + Next.js
TTV, TTI
TTV : Time To View 브라우저가 사용자가 요청한 화면을 보여주기 시작하는 시간
TTI : Time To Interact 브라우저가 사용자의 이벤트와 js로 상호작용 하기 시작하는 시작
SSG
Static Site Generation : 정적 웹 페이지를 빌드 타임에 생성하는 기술. 빌드 타임에 CSR인 리액트 앱을 HTML로 미리 렌더링하는 방식을 의미한다.
미리 빌드해두는 방식을 사용하기에 SSR보다 훨씬 빠르게 동작 가능하며 CDN을 최대로 활용 가능하다.
마치며
대부분의 프론트 프레임워크가 이런 렌더링 방식들을 모두 하이브리드 형태로 구현 가능해지고 있으므로, 장점을 최대화 할 수 있는 방향을 고민해보면 좋겠다.
참고
