SPA(Single Page Application)
- 백엔드에 렌더링 로직이 없으므로, 모든 문서 요청은 static file server(대부분 CDN)으로 간다.
작동방식
- 초기로드
- 사용자가 애플리케이션을 처음 방문 시, 서버에서 하나의 HTML 페이지를 클라이언트로 전송한다.
- 이 초기 HTML 페이지는 최소한의 구조만을 가지며, 실제 콘텐츠는 클라이언트 측 자바스크립트가 로드 된 후 동적으로 렌더링 된다.
- 클라이언트 측 렌더링
- 초기 로드 된 자바스크립트는 어플리케이션의 루트 컴포넌트를 렌더링하고, 애플리케이션의 상태와 라우팅을 관리한다.
- 라우팅
- 클라이언트 측 라우팅 라이브러리를 사용하여 URL 변화를 감지하고 이에 따라 적절한 컴포넌트를 렌더링한다.
- 사용자가 링크를 클릭하거나 브라우저의 뒤로/앞으로가기 버튼을 누르면 전체 페이지를 새로 로드하지 않고, 필요한 부분만 업데이트한다.
- 데이터 페칭
- 어플리케이션이 초기화되면, 필요한 데이터를 API 요청을 통해 가져온ㄷ다.
장단점
- 번들크기가 커짐
- 워터폴
- 모든 data-fetching 코드가 클라이언트에 있음
- 추가로 코드 분할, 지연로딩까지 추가
- 런타임 성능
- 상태관리