Static Website
- 말 그대로 정적인 웹사이트
- 화면에 보이는 컨텐츠 그대로 html 파일로 작성되어 있어서, 서버에 저장된 html 파일 그대로 브라우저에 보이는 것 (ex. 회사 소개 페이지)
Dynamic Website
- Static Website와 반대되는 개념
- 서버에 저장된 html 파일이 그대로 브라우저에 그려지는 것이 아니라, 동적으로 html 파일이 만들어짐 (ex. 요즘 대부분의 웹사이트)
1) Dynamic Website - CSR, SSR
(1) CSR (Client Side Rendering)
- 동적으로 만들어지는 곳이 client side(브라우저)인지? (ex. CRA)
(2) SSR (Server Side Rendering)
- 아니면 server side인지?
- 요청 시 서버에서 html을 만들기 때문에 검색어 노출에 최적화되어 있음
SPA (Single Page Application)
- html 파일 하나에 여러 개의 js로 구성되어 있음
- 검색 노출이 안된다는 단점이 있음
- 자바스크립트 파일이 너무 크기 때문에 페이지가 많아질 수록 최초에 첫 페이지 렌더링 시 자바스크립트를 가져오는 과정이 느림 (하지만 그 다음부터는 이미 가져온 js 파일을 불러오기 때문에 빨라짐)
- 한 마디로 화면 로딩 속도(TTFB)는 빠른데 TTI(Time to interactive)가 느린 것임
** 용어 참고 https://developers.google.com/web/updates/2019/02/rendering-on-the-web
MPA (Multi Page Application)
- 페이지 당 html 파일이 각각 존재함
우리는 검색 노출 최적화(SEO)하기 위해 첫 페이지 응답 시에만 SSR을 통해 동적으로 만들어지게 하고, 그 후부터는 client side로 렌더링하는 것이 가장 효율적인 방법임
