리액트는 SPA라는데 SPA가 뭐지? 그건..

SPA란?

SPA는 Single Page Application의 약자로 단일 페이지로 구성된 웹 애플리케이션을 뜻한다.

 

 

 

다른 방식과의 다른 점, SPA전에는?

기존의 방식인 서버 사이드 렌더링(SSR)은 화면에 나타낼 리소스를 서버로 요청해서 받은 리소스를 렌더링 하였다.

 

그렇다면 SSR은 무엇일까?

페이지를 이동할 때마다 서버에 새로운 페이지에 대한 요청을 해서 서버는 렌더링을 마치고 데이터가 결합된 HTML 파일을 보내준다.

이것이 SSR인데 이 방식은 요청한 페이지를 받기까지 대기하기 때문에 깜박거리는 현상을 마주할 수 있다.

이런 단점 때문에 CSR방식이 관심을 받게 되었다.

CSR은 Client Side Rendering의 약자로 HTML, CSS, Javascript 같은 리소스를 최초에 한번 받아오고 이후에는 서버에 필요한 데이터만 요청한다.

 

SPA는 이 CSR방식을 채택한 것이다.

SSR방식을 채택한 기존의 애플리케이션은 MPA(Multi Page Application)라고 한다.

위에서 설명했듯이 MPA는 SSR방식이기 때문에 서버로부터 완전한 페이지를 받아와서 데이터를 조회하거나 수정할 때 또 다른 완전한 페이지로 이동한다.

 

정리하자면

  - SPA : CSR방식. 페이지의 내용을 브라우저에서 그려줌

  - MPA :  SSR방식. 페이지의 내용을 서버에서 그려서 브라우저로 보내줌

 

 

 

 

SPA의 특징

• 뷰 렌더링을 사용자의 브라우저가 담당한다.
• 애플리케이션을 실행 한 후 인터렉션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트 해준다.
• 무언가를 클릭하거나 페이지를 스크롤할 때 몇 가지 요소만 변경되고 나머지는 동일하게 유지된다.
• 예를 들어 어떤 웹사이트에서 다른 정보 창은 계속 바뀌는데 상단 바만 고정된 채 계속 유지된다면 SPA를 사용하는 것이다.
• 애플리케이션과 사용자 간의 커뮤니케이션이 많다면 페이지에서 실시간 업데이트를 효과적이게 해주는 SPA가 필수라고 할 수 있다.

 

 

장점

• 서버는 기존보다 더 적은 데이터를 보내면 되고 사용자는 요청한 후 응답 시간이 짧아졌다.
• 새롭게 변경된 부분만 렌더링 하기 때문에 새 페이지가 로드될 때까지 기다릴 필요가 없어 마치 응용 프로그램과 같이 향상된 사용자 경험을 제공한다.

*사용자 경험(UX; User Experience) : 사용자가 어떤 시스템, 제품, 서비스를 직, 간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험

 

 

[개발적인 이점]

• 프런트엔드와 백엔드 서버가 분리되어 프런트엔드를 독립적으로 빌드, 배포할 수 있다.
• 컴포넌트별로 개발하기 때문에 결합도가 낮은 개발을 할 수 있다.

 

 

 

단점

• SPA를 빌드할 때 모든 리소스를 한 번에 받아오기 때문에 다른 방식을 이용할 때보다 초기 구동 속도가 느리다.
• 최초 한 번 모든 리소스를 불러오기 때문에 애플리케이션의 규모가 커지면 자바스크립트 파일이 커진다.
• 검색 엔진 최적화가 어렵다.

검색 엔진 최적화가 어려운 이유는 SPA가 자바스크립트 기반 비동기 모델로 실행되기 때문이다.

검색엔진 봇은 크롤링할 때 JS를 실행하지 않고 HTML만 렌더링 하기 때문에 HTML은 뼈대만 보내는 SPA 방식에서는 콘텐츠를 봇이 가져가지 못한다.

 

검색엔진 최적화 (SEO; Search Engine Optimization)은 무엇일까?

내 웹사이트에 올린 글을 구글, 네이버 같은 검색 엔진에 잘 검색되도록 하는 기술이다.

예를 들면 SPA 방식으로 만든 내 웹사이트에 'SPA에 대하여'라는 글을 올렸는데 이 글이 검색엔진에 걸리기가 더 어렵단 뜻이다.

Google 검색이 SPA페이지를 위해 개선되고 있지만 자신이 구축한 Javascript파일이 Google에서 색인을 생성하는지 확인해야 한다.

 

 

 

SPA로 발전하게 된 이유

SPA 이전의 브라우저는 클릭이 발생할 때마다 서버에서 새 페이지가 로드되어 시간이 많이 걸렸다.

단일 페이지 앱을 사용하면 사용자가 요청한 데이터만 다시 로드하여 속도가 개선될 수 있다.

 

 

 

SPA의 사용

• SPA와 잘 어울리는 데이터 베이스는 MongoDB와 MySQL이다.
• 검색 엔진이 중요하지 않은 애플리케이션이라면 SPA를 사용하는것이 좋다.
• 사용자와의 인터렉션이 중요하다면 SPA는 좋은 선택이 될 것이다.

 

 

 

리액트와 SPA

단일 페이지로 구성되어 있는것이 SPA의 특징이지만 사용하다보면 페이지가 여러개 필요해지는 경우가 있다.

여러개의 페이지로 구성된 듯한 애플리케이션 개발을 도와주는게 바로 React-router이다.

React-router로 페이지 이동을 쉽게 만들 수 있다.

 

 

 

React.js의 대표 예시 사이트

페이스북

인스타그램

아마존

트위터

넷플릭스

 

 

 

 

참고

https://www.excellentwebworld.com/what-is-a-single-page-application/