SPA?

1. SPA?

Single Page application

최초 한번 페이지 전체를 로딩한 이후 부터는 데이터만 변경하여 사용할 수 있는 웹 어플리케이션을 뜻한다.

Vue.js와 React.js에서 채택하는 방식인데, 기존의 웹 페이지의 단점을 보완하지만 SPA의 단점 역시 존재한다. 이를 기존의 웹 페이지와 비교하면서 알아보자.

2. 기존 웹 페이지

기존 웹 페이지에서는 사용자가 다른 페이지로 이동할 때 마다 새로운 HTML을 받아오고 페이지를 로딩할 때 마다 서버에서 리소스를 전달 받아서 해석한 뒤 화면에 보여줬다.

따라서 서버가 할 일이 많았기 때문에, 성능상의 문제가 발생할 수 있었다. 서버 트래픽이 많이 나올 수도 있고 많은 사용자가 몰리면 과부하가 걸려서 서버가 다운 되는 등의 문제가 발생 가능했다. 캐싱과 압축을 통해 어느 정도 보완할 수 있지만 요즘 처럼 사용자와의 인터랙션이 많은 페이지의 경우 이 방법 또한 힘들어진다.

또한 화면 전환이 필요할 때마다 새로운 HTML을 불러오기 때문에 바뀔 필요가 없는 부분까지 새로 받아와 로딩하므로 매우 비효율적이다.

이를 보완할 수 있는 것이 SPA이다.

3. Vue, React etc..

요즘 프론트엔드 개발자들이 많이 사용하는 Vue.js와 React.js와 같은 라이브러리 또는 프레임워크들은 SPA 방식의 개발을 도와준다.

우선 페이지 전환이 있을 때 서버에 요청하여 새로운 HTML을 가져오는 것이 아니라 클라이언트에서 렌더링을 담당하며 사용자와의 인터랙션이 발생한다면 변경이 필요한 부분만 변경하여 불필요한 렌더링을 방지할 수 있다.

Single Page이지만 여러 페이지를 보여줄 수 있다. React.js의 경우 대표적으로 React Router를 사용할 수 있고 Vue.js의 경우 Vue-Router를 사용하여 클라이언트에서 라우팅을 통해 여러 페이지를 구현하여 보여줄 수 있다. Next.js와 같은 라이브러리도 존재한다. 따라서 우리는 SPA를 통해 기존의 웹 페이지의 단점을 보완할 수 있다.

4. SPA의 단점?

SPA의 단점은 Single Page라는 이름과 맞게 규모가 커지면 javascript 파일이 너무 커진다.페이지를 로딩할 때 사용자가 방문하지 않을 페이지도 같이 렌더링하기 때문에 로딩시간이 길다는 점이다. 하지만 이 단점은 코드 스플리팅을 통해 해결할 수 있다. 라우트별로 파일을 나누어서 트래픽과 로딩 속도를 개선 할 수 있다.

또한 클라이언트에서 자바스크립트를 통한 라우팅 관리법은 자바스크립트를 사용하지 않는 일반 크롤러에서는 제대로 작동하지 않을 수 있다는 것이다. 따라서 페이지 결과가 제대로 나타나지 않을 수도 있다. 그리고 자바스크립트가 실행될 때까지 페이지가 나타나지 않기 때문에 사용자가 빈 화면만 보고 있을 수도 있다는 것이다. 이 단점은서버 사이드 렌더링을 통해 극복할 수 있다.