SPA: Single Page Application
헤더는 고정되어있고, 고정되어있는 부분만 바뀐다
MPA: Multi Page Application
전통적인 방식 서버로부터 새로운 Html을 받아오고 페이지 전체를 새로 렌더링함
MPA를 사용하는 사이트들이 있기는 하지만 AJAX가 등장하면서
원하는 부분만 갈아끼우는 SPA를 사용하게 되었다.
SPA -> CSR
초반 필요한 리소를 전부 다운로드함 페이지 갱신에 필요한 데이터만 받는다.
MPA -> SSR
새로운 요청이 있을 때마다 정적 리소스를 받아온다.
특별한 목적이 없다면 일반적인 방법이다.
이 개념은 서로 다른 개념이다
Client Side Rendering(CSR)
클라이언트에서 렌더링
Server Side Rendering(SSR)
서버에서 요청시에 즉시 만듬
데이터가 동적일때 유리
Static Site Generation(SSG)
(Static Rendering)
서버에서 요청시 미리 다 만들어 놓음
데이터가 정적일 떄 유리
CSR
초기 로딩 속도가 느리나 서버 부하가 적고 구동속도가 빨라서 유저경험이 좋다.
빈 뼈대의 HTML만 불러서와서 SEO에 불리하다
->웹 크롤러 봇이 읽지를 못한다. Google 크롤러 봇은 JS를 실행하지만 불완전하다.
SSR
크롤러 봇이 읽기 쉽게 데이터가 HTML 담겨진 상태로 전달 되어 SEO에 유리
초기 구동속도가 빠르다.
TTV !== TTI
SSR VS CSR
code splitting
tree-shaking
Chunk 분리 등을 동해 초기 로딩속도 보완 가능하다.
Pre-rendering을 통해 SEO개선 라이브러리나 웹팩 플러그인을 통해 미리 HTML을 생성
-> 크롤러라면 미리 렌더링한 것을 보여줌
SSR과 SSG를 도입하여 해결 상당 부분 보완할 수있다.
별도의 서버를 직접 운영하여 프레임 워크 없이 해결할 수 있다.
진입장벽이 높다.
프레임워크를 사용하면 코드 복잡도가 올라가고 직접 제어할 수 있는 한계가 있다.
최근에 많이 사용되는 추세다.
서비스의 성격에 맞춰서 사용해야한다.
개인정보를 다루고 유저랑 상호작용이 많으면 CSR
회사 홈페이지거나, 매주 업데이트는 경우에는 SSR
업데이트가 적은 경우에는 SSG
사용자 내용에 따라서 페이지 내용이 달라지고, 인터렉션, 상위 노출이 필요하다면
CSR+ SSR을 섞은 유니버셜 렌더링을 사용하자
