SPA(Single Page Application)
SPA란?
- 최초 한 번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 애플리케이션을 의미
동작과정
- APP에 필요한 리소스 모든 정적 리소스를 최초에 한번 다운로드
- 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만 전달받아 갱신한다
- 전체적인 트래픽 감소, 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험
장점
- 모바일의 사용이 증가하고 있는 현 시점에 트래픽의 감소와 속도, 사용성, 반응성의 향상
- 핵심가치는 사용자 경험(UX) 향상
- 모바일 퍼스트 전략에 부합
단점
- 초기 구동 속도
- SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드하기 때문에 초기 구동속도가 상대적으로 느리다
- SEO(검색엔진 최적화) 문제
- 서버 렌더링이 아닌 자바스크립트 기반 비동기 모델(클라이언트 렌더링 방식)
- 여러 SPA 프레임워크들에 SEO 대응 기술 존재
렌더링 방식
- SPA는 클라이언트사이드 렌더링 방식
전통적인 웹 방식
1
<a href="exam.html">Example</a>
- a태그를 클릭하면 href 어트리뷰트 값인 리소스의 경로가 URL의 path에 추가되어 주소창에 나타나고, 해당 리소스를 서버에 요청
- 다음은 URI의 구조이다
- 서버는 요청에 대한 응답으로 html로 화면을 표시하는데 부족함이 없는 완전한 리소스를 클라이언트에 응답하게 되는데 이를
서버 렌더링이라고 한다 - 브라우저는 서버가 응답한 html을 수신하고 렌더링한다
- 이때 이전 페이지에서 수신된 html로 전환하는 과정에서 전체 페이지를 다시 렌더링하게 되므로 새로고침이 발생한다
- 다음은 전통적인 웹 페이지의 Lifecycle
- 이 방식은 JavaScript가 필요없이 응답된 html만으로 렌더링이 가능하며 각 페이지마다 고유의 URL이 존재하므로 history 관리 및 SEO 대응에 문제가 없다
- 하지만 중복된 리소스를 요청마다 수신해야 하며, 전체 페이지를 다시 렌더링 하는 과정에서 새로고침이 발생하여 사용성이 좋지 않은 단점이 있다
AJAX방식
- AJAX(Asynchronous JavaScript and XML)
- 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 교환할 수 있는 통신 방식
- 서버로부터 웹페이지가 반환되면 화면 전체를 새로 렌더링해야 하는데 페이지 일부만 갱신하고도 동일한 효과를 볼 수 있도록 하는 것
클라이언트 사이드 렌더링이란?
-
클라이언트 사이드 렌더링은 사용자의 요청에 의해 변경되야 하는 부분만 다시 렌더링 하여 화면을 보여 주는 반면, 서버 사이드 렌더링은 화면 전체를 새로 다시 렌더링 해야 한다.
- 쉽게 말해 서버 단에서 변화된 데이터로 화면을 미리 만들어서완성본을 전달해 주는 것(서버 사이드 렌더링)
- 변화된 UI를 유저의 브라우저에서 만들어 제공하는 것(클라이언트 사이드 렌더링)
- Vue나 React같은 CSR방식 프론트엔드에도 Next.js 나 Nuxtl.js 등의 SSR 프레임워크가 존재한다
참고사이트
