React - SPA란?

 

 

SPA란?

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

말 그대로 한 개의 페이지로 이루어진 애플리케이션을 말한다.

 

SPA가 생긴 이유는?

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

즉, 사용자에게 보이는 화면은 서버 측에서 준비했었다는 의미이며, 이것을 CSR(클라이언트 사이드 렌더링)이라 한다.

But,

요즘은 웹에서 제공되는 정보가 너무 많기 때문에 새로운 화면을 보여 주어야 할 때마다 서버 측에서 모든 뷰를 준비한다면 성능상 문제가 발생할 수 있다.

예를 들면,

• 트래픽이 너무 많이 나올 수 있다.

• 사용자가 몰려 서버에 높은 부하가 쉽게 걸릴 수 있다.

애플리케이션 내에서 화면 전환이 일어날 때마다 html을 계속 서버에 새로 요청하면 사용자의 인터페이스에서 사용하고 있던 상태를 유지하는 것도 번거롭고, 바뀌지 않는 부분까지 새로 불러와서 보여 주어야 하기 때문에 불필요한 로딩이 있어서 비효율적이다.

그래서,

리액트 같은 라이브러리 혹은 프레임워크를 사용하여 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고, 우선 애플리케이션을 브라우저에 불러와서 실행시킨 후에 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트를 해준다.

 

그렇다면, 싱글 페이지는 화면이 한 종류일까?

답은 NO !

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

SPA의 경우 서버에서 사용자에게 제공하는 페이지는 한 종류이지만, 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여 줄 수 있다.

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

 

SPA의 단점은?

• 앱의 규모가 커지면 자바스크립트 파일이 너무 커진다는 점!

• 리액트 라우트처럼 브라우저에서 자바스크립트를 사용하여 라우팅을 관리하는 것은 자바스크립트를 실행하지 않는 일반 크롤러에서는 페이지의 정보를 제대로 수집해 가지 못한다는 단점!

• 이러한 단점을 서버 사이드 랜더링으로 해결 가능!