예전 방식(MPA)
client가 html을 요청하면 server가 그대로 보여주는 방식. 새로고침 할 때마다 페이지 전체를 다시 rendering했다.
SPA(Single page Application)
페이지 이동 시 필요한 데이터만 JSON으로 전달받아 페이지를 갱신
장점
1.트래픽 감소
2.새로고침을 하지않아 사용성 향상 -> 모바일 웹에 적합
단점
1.초기 구동속도 느림 -> 정적 리소스를 전부 받아와야하기 때문이다.
ex)framework library
2.SEO문제 -> SPA는 서버 렌더링 방식(SSR)이 아닌 자바스크립트 비동기 엔진(CSR),클라이언트 렌더링 방식이기 때문이다.
즉, 처음 받았을 때 소스코드들이 비어있어 검색이 잘 안될 수 있다.
SEO (검색 엔진 최적화) :
검색자의 의도를 이해하고 이에 맞춰 웹 페이지의 콘텐츠를 제작, 검색 결과 페이지에서 잘 노출 되도록 웹페이지의 태그와 링크 구조를 개선하여 자연 유입 트래픽을 늘린다.
** TTV(Time To View),TTI(Time To Interact)
CSR은 TTV,TTI가 동시에 일어난다. js파일은 받아와야 View,Interact가 가능해지기 때문이다.
반면 SSR은 html을 먼저 받아온 후 js를 받아오기 때문에 TTV,TTI 간의 공백이 꽤 긴 편이다.
따라서 CSR은 어떻게 해야 최소한의 필수적인 js 파일만 먼저 보여줄 수 있는지 고민해봐야 하고 (초기 구동속도 개선)
SSR은 어떻게 해야 TTI를 줄일지 고민해야 한다.
SSG(Static Site Generation):웹 어플리케이션을 정적인 파일로 바꿔주는 것
ex)react를 Gatsby나 Next.js라는 라이브러리와 함께 사용하면 웹 어플리케이션을 정적인 파일로 먼저 만들어서 서버에 배포해놓을 수 있다.
