웹 SPA(Single Page Application) 에 대해서
SPA란?
제목에도 써놓았지만 Single Page Application 의 약자로 단순히 이름에서 유추해보면 페이지가 하나인 앱(…)입니다.
물론 당연하지만 진짜로 페이지가 하나인건 아니고 SPA의 특징 때문에 붙은 이름인데 자세한건 아래 그림을 통해 알아보겠습니다.
전통적인 웹 페이지와의 차이
위 그림이 전통적인 웹에서 최초 접속과 페이지 이동시의 라이프사이클이고,
아래 그림이 SPA 에서의 최초 접속과 페이지 이동시의 라이프사이클입니다.
이 두 그림을 비교해보시면 최초 접속(Initial Request)에서는 둘 다 요청후 HTML 을 받아오는 부분까지는 똑같지만
다음 페이지 이동시 서버에서 요청하는 부분이 다른점을 알 수 있습니다.
전통적인 웹에서는 페이지 이동을 하고 서버에 요청을 하면 서버가 HTML 파일을 만들어서 클라이언트에 보내주고 브라우저가 HTML 을 반영해서 보여주기전 새로고침이 일어납니다.
하지만 SPA 에서는 페이지 이동시 서버에 AJAX로 요청하고 Server 는 JSON 만 전달해줌을 알 수 있는데,
이는 SPA 방식에서는 페이지 이동시 변경되는 부분만 JSON 으로 받아온뒤, 브라우저의 자바스크립트에서 받은 JSON 을 토대로 DOM 에 변경된 부분만 렌더링 해주기 때문입니다.
이 때 SPA 는 html 렌더링을 서버가 하는게 아닌 클라이언트가 받은 json 을 토대로 하기 때문에 CSR(Client Side Rendering) 방식으로 렌더링 한다고 말합니다.
이러한 SPA의 특성으로 인해 오는 장단점이 있는데요,
장점
- 페이지의 필요한 부분만 업데이트하기때문에 트래픽이 적고 페이지 이동이 그만큼 빨라집니다.
- 최초접속시 필요한 모든 정적 리소스들을 다운받고 이미 방문한 페이지도 캐싱합니다.
- CSR 의 특징을 이용해서 페이지 화면전환 애니메이션을 넣어서 사용자 친화적으로 만들 수 있습니다.
- 모듈화나 컴포넌트화를 통해 유지보수를 쉽게 만들고 개발 속도를 빠르게 만들어줍니다.
- 프론트와 백엔드의 분리로 개발업무 분업화가 쉽습니다.
단점
- 리소스를 초기에 다 다운받기 때문에 초기 구동속도가 느립니다.
- html 렌더링을 클라이언트에서 하기 때문에 검색엔진최적화(SEO)가 어렵습니다.
이러한 단점들을 해결하기 위해 webpack 의 code splitting 이나 lazy loading,
SSR(Server Side Rendering) 같은 기술들이 있는데, 이는 나중에 기회가 되면 다른 포스트에서 다루도록 하겠습니다.
결론
SPA 가 가지고 있는 장점만큼 어느정도 단점도 있으니 개발할 웹사이트의 특징과 요구사항에 따라 장단점을 고려해서 프로젝트에 적용하는게 좋을것 같습니다.
