https://www.youtube.com/watch?v=TXzwuaXQN2U
MPA ( multi page application )
- 새로고침 발생
- 서버로부터 내려받기 때문 - 성능이슈
- 복잡도가 최근 높아짐 - SSR방식
AJAX
- 필요한 부분만 리로드
SPA ( single page application )
- 갱신될 부분만 데이터 요청
- 새로고침 발생 x
- CSR
CSR ( Client Side Rendering )
- TTFB ( Time To Fist Byte )
- FCP ( First Contentful Pain )
Good - 화면 깜박임이 없어서 사용자 경험이 좋음
- 초기 로딩 이후에 구동속도가 빠름
Bad - 초기 구동속도가 느림
- SEO가 어려움
SSR ( Server Side Rendering )
- 서버 측에서 렌더링 될 페이지를 그린다음, 클라이언트로 내려주는 방식
- 요청 즉시 HTML파일을 만드냐, 미리 다 만들어준 정적 페이지를 주냐
- SSR | SSG
- 정적인 페이지 제공
- 이벤트리스너를 할당해 인터렉티브한 페이지 제공
- FCP | TBT | TTI
Good
- 초기 로딩속도가 빠르다.
- SEO가 쉬움
Bad - 페이지를 이동할때 화면이 깜빡여 사용자 경험이 저하된다.
- 매번 요청을 보내기 때문에 서버가 과부하 될 수 있음
SSG ( Static Side Generation ) - 정적페이지생성
- 데이터 변동이 없는 정적사이트를 렌더링할때 굳
SEO ( Search Engine Optimization ) - 검색엔진최적화
- 웹사이트 검색결과가 더 잘보이도록
- 검색봇은 크롤링하면서 색인화를 하는데, CSR은 아무래도 빈 html파일을 주다보니 애초에 내용이 비었으니까 최적화가 어렵다.
- 함정 : 구글의 검색봇은 JS를 실행시킬 수 있어서 해석할 수 있다고 한다 (갓구글)
CSR + SSR (Universal Rendering)
- 초기속도가 빠른 SSR장점
- 페이지 이동시에 깜빡임이 없는 CSR
- 더하면
- 초기 렌더링은 SSR, 다른페이지로 이동할때는 CSR 사용
