[Tip] Web CSR Front End About SPA( Single Page Application )

[ SPA (Single Page Application) ]

**

SPA는 Single Page Application(싱글 페이지 애플리케이션)의 약어입니다. 

말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미입니다.

전통적인 웹 페이지는 다음과 같이 여러 페이지로 구성되어 있습니다.

**

기존에는 사용자가 다른 페이지로 이동할 때마다

새로운 HTML을 받아 오고, 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여 주었습니다.

이렇게 사용자에게 보이는 화면은 서버 측에서 준비했습니다.

사전에 HTML 파일을 만들어서 제공하거나,

데이터에 따라 유동적인 HTML을 생성해 주는 템플릿 엔진을 사용하기도 했습니다.

요즘은 웹에서 제공되는 정보가 정말 많기 때문에 새로운 화면을 보여 주어야 할 때마다

서버 측에서 모든 뷰를 준비한다면 성능상의 문제가 발생할 수 있습니다.

예를 들면 트래픽이 너무 많이 나올 수도 있고, 사용자가 몰려 서버에 높은 부하가 쉽게 걸릴 수도 있습니다.

속도와 트래픽 측면에서는 캐싱과 압축을 해서 서비스를 제공하면 어느 정도 최적화될 수 있겠지만

사용자와의 인터랙션이 자주 발생하는 모던 웹 애플리케이션에는 적당하지 않을 수도 있습니다.

애플리케이션 내에서 화면 전환이 일어날 때마다 HTML을 계속 서버에 새로 요청하면

사용자의 인터페이스에서 사용하고 있던 상태를 유지하는 것도 번거롭고

바뀌지 않는 부분까지 새로 불러와서 보여 주어야 하기 때문에 불필요한 로딩이 있어서 비효율적입니다.

그래서 리액트 같은 라이브러리 혹은 프레임워크를 사용하여

뷰 렌더링을 사용자의 브라우저가 담당하도록 하고

우선 애플리케이션을 브라우저에 불러와서 실행시킨 후에

사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트해 줍니다.

만약 새로운 데이터가 필요하다면 서버 API를 호출하여

필요한 데이터만 새로 불러와 애플리케이션에서 사용할 수도 있습니다.

싱글 페이지라고 해서 화면이 한 종류일까요? 꼭 그렇지만은 않습니다.

예를 들어 블로그를 개발한다면 홈, 포스트 목록, 포스트, 글쓰기 등의 화면이 있습니다.

SPA의 경우 서버에서 사용자에게 제공하는 페이지는 한 종류이지만,

해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여 줄 수 있습니다.

다른 주소에 다른 화면을 보여주는 것은 라우팅이라고 합니다.

리액트 라이브러리 자체에 이 기능이 내장되어 있지는 않습니다.

그 대신 브라우저의 API를 직접 사용하여 이를 관리하거나,

라이브러리를 사용하여 이 작업을 더욱 쉽게 구현할 수 있습니다.

리액트 라우팅 라이브러리는 리액트 라우터(react-router), 리치 라우터(react-router), Next.js 등 여러 가지가 있습니다.

리액트 라우터의 경우 클라이언트 사이드에서 이루어지는 라우팅을 아주 간단하게 구현할 수 있도록 해 줍니다.

더 나아가서 나중에 서버 사이드 렌더링을 할 때도 라우팅을 도와주는 컴포넌트들을 제공해 줍니다.

[ SPA의 단점 ]

SPA의 단점은 앱의 규모가 커지면 자바스크립트 파일이 너무 커진다는 것입니다.

페이지 로딩 시 사용자가 실제로 방문하지 않을 수도 있는 페이지의 스크립트도 불러오기 때문입니다.

하지만 코드 스플리팅(code spliting)을 사용하면

라우트별로 파일들을 나누어서 트래픽과 로딩 속도를 개선할 수 있습니다.

리액트 라우터처럼 브라우저에서 자바스크립트를 사용하여 라우팅을 관리하는 것은

자바스크립트를 실행하지 않는 일반 크롤러에서는 페이지의 정보를 제대로 수집해 가지 못한다는 잠재적인 단점이 따릅니다.

그렇기 때문에 구글, 네이버, 다음 같은 검색 엔진의 검색 결과에 페이지가 잘 나타나지 않을 수도 있습니다.

구글 검색 엔진에서 사용하는 크롤러의 경우 자바스크립트를 실행해 주는 기능이 탑재되어 있기는 하지만,

크롤링하는 모든 페이지에서 자바스크립트를 실행하고 있지는 않습니다.

또한, 자바스크립트가 실행될 때까지 페이지가 비어 있기 때문에 자바스크립트 파일이 로딩되어

실행되는 짧은 시간 동안 흰 페이지가 나타날 수 있다는 단점도 있습니다.

이러한 문제점은 서버 사이드 렌더링(server-side rendering)을 통해 모두 해결할 수 있습니다.

 

참고: [리액트를 다루는 기술](https://logiciel.io/why-single-page-application)