React : SPA 란?

 

1. SPA 란?

SPA 는 Single Page Application 의 약자이다.

 A.html b.html c.html 페이지를 로딩할때마다 서버에서 리소스를 전달받아 렌더링 해왔는데.

규모가 커지고 사용자와의 상호작용이 많아짐에 따라 , 데이터 정보 전송 과부화로 인해 속도 저하 등 문제점이 생겼다.

그래서 요즘 라이브러리 또는 프레임 워크는  뷰 렌더링을 서버가 아닌 브라우저가  담당한다.

예전에는 페이지를 요청할때마다 서버로 접속하여 받아왔기때문에 , 페이지가 매번 새로고침이 되었지만

SPA 의 경우 서버에서 제공하는 페이지가 한 개 이다.

 

사용자에게  보여주는 페이지는 한 페이지지만, 사용자가 원하는 해당 페이지와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여 줄 수 있다.

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

 

 

React Router 의 종류 

 

1. react-router

2. reach-router

3. next.js

 

 

SPA 단점

1. 앱의 규모가 커지면 자바스크립트 파일이 너무 커진다는것이다.

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

2. SEO , 크롤러가 페이지 정보를 수집하지 못하여 페이지 검색이 힘듬 (구글,네이버 같은) 대형 포털사이트에

검색이 안될경우가 있다.

 

왜?

React 같은 경우는  index.html 파일에 <div id ="root"> </div> 가 있고 우리는 indes.js에

자바스크립트가 로딩이 되기전에 DOM은  비어있어서 그럴 수도 있다고 한다.

실제로 자바스크립트가 실행될때 까지 페이지가 비어 있어 로딩 대기중의 짧은 시간동안 빈페이지가 화면에 띄어져 있는다.