오늘날의 웹은 크게 SPA(Single Page Application)과 MPA(Multi Page Application)으로 나뉩니다.
MPA
MPA는 탭을 이동할 때마다 서버로부터 새로운 html을 받아와서 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식SPA
SPA는 하나의 페이지로 구성된 웹 애플리케이션
오늘날의 SPA는 대부분 React, Vue, Angular를 활용하여 만들어진다
SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드
새로운 페이지 요청이 있을 경우, 페이지 갱신에 필요한 데이터만 전달받아 페이지를 갱신
어떤 링크를 클릭한다해도 그에 관련된 모든 파일을 다운로드 받는게 아니라, 필요한 정보만 받아서 그 정보를 기준으로 업데이트 할 뿐
##
SPA에서는 렌더링 방식으로 CSR을 MPA에서는 렌더링 방식으로 SSR을 사용
SPA는 웹 애플리케이션에 필요한 정적 리소스를 처음 한번만 다운로드하고 그 이후 새로운 페이지 요청이 있을 때만 데이터를 전달받아서 클라이언트에서 페이지를 갱신하기 때문에 자연스럽게 CSR을 사용하게 되고, MPA는 새로운 요청이 있을 때마다 서버에서 이미 렌더링된 정적 리소스를 받아오기 때문에 렌더링 방식으로 자연스럽게 SSR을 사용
유저가 컨텐츠를 보는 시간까지를 Time To View 즉, TTV 라고 하고 유저가 컨텐츠와 상호 작용을 할 수 있는 시간을 Time To Interact
- CSR은 이 둘이 일치
- SSR은 이 둘이 불일치브라우저(Browser)
주요기능: 사용자가 요청한 자원을 서버에 요청하고 브라우저에 표시하는 것
1. 유저인터페이스 : 주소표시줄이나, 이전/다음버튼, 새로고침 버튼등 유저가 상호작용할 수 있는 부분
2. 브라우저 엔진: 유저인터페이스와 렌더링 엔진 사이의 동작을 제어하는 역할
3. 렌더링엔진: 요청한 콘텐츠, 즉 HTML이나 CSS를 파싱하여 화면에 표시하는 역할