SPA(Single Page Application, 단일 페이지 애플리케이션)
서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성하는 웹 애플리케이션이나 웹 사이트를 말한다.
HTML, JavaScript, CSS 등 필요한 모든 코드는 하나의 페이지로 불러오거나, 적절한 자원들을 동적으로 불러들여서 필요하면 문서에 추가한다.
보통 사용자의 동작에 응답하는 방식이며, React나 Angular, Vue.js 등의 프레임워크로 만들어진다.
풀 브라우징(Full Browsing)
풀 브라우징은 전통적인 웹 방식으로, 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링한다.
이와 같은 방식은 새로고침이 발생되어 사용성이 좋지 않고, 변경이 필요 없는 부분을 포함하여 전체 페이지를 갱신하므로 비효율적이다.
SPA 특징
라우팅
사용자가 태스크를 수행하기 위해 어떤 화면에서 다른 화면으로 화면을 전환하는 내비게이션을 관리하기 위한 기능이다.
라우팅을 서버가 아닌 브라우저 단에서 구현해야 하는 것이 SPA의 핵심이다.
사용자가 요청한 URL 또는 이벤트를 해석하고, 새로운 페이지로 전환하기 위한 데이터를 얻기 위해 서버에 필요 데이터를 요청하여 화면을 전환한다.
요청 URI에 따라 브라우저에서 돔을 변경하는 방식으로, 요청 경로에 따라 동적으로 렌더링 되도록 만들면 라우팅에 따라 다른 화면을 구현할 수 있다.
컴포넌트
컴포넌트들이 모여 한 페이지를 작성하고, 특정 부분만 데이터를 바인딩하는 개념이다.
HTML 파일 하나에서 JS, CSS 등 리소스 파일들과 모듈들을 로드해서 페이지 이동 없이 특정 영역만 새로 모듈을 호출하고 데이터를 바인딩한다.
장점
- 기존의 *서버 사이드 렌더링과 비교하여 배포가 간단함
- 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한 번만 다운로드함
- 이후에는 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신함
- 전체적인 트래픽이 감소됨
- 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신함
- 새로고침이 발생하지 않음
- *네이티브 앱과 유사한 사용자 경험을 제공함
🔗 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)
네이티브 앱(Native App)
디바이스에 다운로드하여 설치할 수 있는 앱을 말한다.
단점
- 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한 번 다운로드하기 때문에 초기 구동 속도가 상대적으로 느림
- *클라이언트 사이드 렌더링이기 때문에 검색 엔진 최적화 이슈가 있음
Reference
