지난 포스팅에서 살펴보았듯이 이젠 웹 프론트엔드 생태계에서 CSR(Client Side Rendering)은 흔히 사용되는 프론트엔드 개발 방식이 되었습니다. SPA(Single Page Application) 구조를 통해 페이지를 렌더링하여 사용자에게 빠른 인터렉션을 제공해주는 것이죠. 그럼 SPA란 정확히 무엇일까요? 오늘은 SPA에 대해 자세히 알아보도록 하겠습니다 
# SPA (Single Page Application)
과거 전통적인 웹 사이트는 지금과는 달리 하나의 문서(예: HTML 파일)에 전달되는 정보의 양이 적었습니다. 그래서 어떠한 페이지에서 버튼을 클릭했을 때 해당 페이지의 일부 영역만 변경되어도 서버에서 완전히 새로운 페이지를 재렌더링하여 전송해주는 방식이었죠. 하지만 웹 시장이 발전됨에 따라 한 페이지에 해당하는 정보의 양을 매우 커졌고, 이에 서버에서 매번 새로운 페이지를 전송해주는 것이 점점 버거워지게 되었습니다.
그래서 이러한 문제를 해결하기 위해 등장한 기술이 바로 Single Page Application(이하 SPA)입니다. 이름에서 유추할 수 있듯이 SPA란 ‘단일 페이지 어플리케이션’을 의미합니다. 즉, 어떠한 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 변경해 표시하는 기술이죠.
브라우저는 최초에 한 번 서버에 요청하여 페이지 전체를 로드하고, 이후부터는 특정 변경 사항이 일어나는 부분만 Ajax와 같은 기술을 통해 데이터를 바인딩하는 방식으로 동작합니다. 이처럼 기존에 매번 서버에 요청하여 서버가 새로이 페이지를 렌더링하여 제공해주던 방식과 크게 다른 점이 SPA의 특징입니다. 이러한 동작 방식으로 사용자에게 빠른 인터렉션을 제공할 수 있습니다.
하지만 SPA도 문제점은 있습니다. 바로 자바스크립트로 DOM 조작이 빈번하게 일어나 브라우저의 성능을 저하한다는 문제입니다. 그래서 Virtual DOM이라는 개념이 생겨났습니다. SPA 프레임워크인 React, Angular, Vue는 대표적으로 Virtual DOM을 이용해 SPA를 구현하는 기술들입니다.
가상의 DOM 트리로 HTML 정보를 저장하고 있다가, 이 트리에 변경이 발생하면 모든 변화를 모아 단 한 번 브라우저를 호출해 화면을 갱신하는 방법을 사용합니다. 이러한 방법을 통해 브라우저와의 불필요한 상호작용을 줄이면서 사용자에게 빠른 인터렉션을 제공할 수 있게 됩니다.
마지막으로 SPA의 장단점을 다시 한번 정리하자면, 장점은 화면에 필요한 부분의 데이터만 받아서 렌더링 하므로 처리 과정이 효율적이며 속도가 빠릅니다. 그래서 사용자에게 보다 더 나은 사용성을 제공합니다.
반대로 단점은 처음 화면을 로딩할 때, 모든 화면의 정보를 모두 다운로드해야 하므로 로딩 속도가 다소 걸립니다. 또한 SEO에 불리하며, 자바스크립으로 인한 DOM 조작이 빈번하게 일어나 브라우저의 성능을 저하합니다.
따라서 내가 만들고자 하는 서비스가 사용자에게 빠른 인터렉션을 제공해야하는 서비스라면 React나 Vue와 같이 SPA 프레임워크로 개발하는 것이 좋고, 반대로 단순히 간단한 정보를 제공하는 서비스라면 복잡한 기술 사용 없이 기존의 웹 사이트 개발 방식대로 개발하는 것도 좋습니다.
