SSR
1990s
Static Sites
클릭 할 때 마다 html 문서 다운
1996s
iframe tag
페이지 내에서 부분적으로 문서를 받아옴
1998s
XMLHttpRequest
Json과 같은 형태로 서버에서 가볍게 필요한 데이터만 받아옴
받아온 데이터를 자바스크립트를 사용해서 동적으로 html 요소를 생성해서 페이지를 업데이트
2005s
AJAX
XMLHttpRequest 방식이 공식적으로 AJAX라는 이름을 가지게 됨 → 구글에서 AJAX를 이용하여 Gmail, Google Map과 같은 웹 어플리케이션을 만들었다.
SPA 트랜드 + 사용자들의 PC의 성능이 좋아짐 + 자바스크립트 표준화가 잘 이루어짐 + Angular + React + vue와 같은 프레임워크가 등장
CSR
seo가 좋지 않다. → html의 body가 비어져있기 때문에 검색 엔진들이 분석하기 어려움이 있다.
- 비어있는 index.js를 받아옴
- 링크된 자바스크립트 (+ 어플리케이션을 구동하는 프레임워크와 라이브러리의 소스코드들도 포함) 받아옴(사이즈가 커서 다운로드 시간이 소요될 수 있다.)
- 추가로 필요한 데이터는 json으로 서버에서 받아옴
- 이것들을 기반으로 동적으로 html을 생성해서 사용자에게 최종 어플리케이션을 보여줌
💡 자바스크립트 파일을 어떻게 하면 효율적으로 많이 분할해서 첫번째로 사용자가 보기 위해서 필요한 정말 필수적인 것들만 보낼 수 있는지 고민해야 한다.
SSR
- 서버에서 잘 만들어진 index.html 파일을 받아옴
- but 동적으로 제어할 수 있는 자바스크립트는 아직임
- 사용자가 클릭을 해도 반응이 없을 수 있음
- 자바스크립트 파일을 받아옴
💡 사용자가 화면을 볼 수 있는 시간과 interaction할 수 있는 공백이 긴 편 → 이 시간의 단차를 줄이기 위한 고민을 해야 한다.
웹사이트 성능을 분석 할 때 ttv, tti도 중요한 매트릭으로 사용
TTV(Time to view) - 사용자가 웹사이트를 볼수 있음
TTI(Time to interact) - 사용자가 클릭을 하거나 인터렉션 함
SSG(Static Site Generation)
React(클라이언트 사이드 렌더링에 특화됨) + Gatsby
리액트로 만든 웹어플리케이션을 정적으로 웹페이지를 생성을 해두어 서버에 배포해둠
React + Next.js
Next.js는 원래 서버사이드 렌더링을 지원하던 라이브러리 였다. But 요즘에는 SSG, (CSR + SSR)을 섞어 쓸 수 있게 지원함