전통적인 웹 페이지
전통적인 웹 페이지는 아래의 그림과 같이 동작한다.
사용자가 다른 페이지로의 이동을 요청하면 서버에서 페이지에 해당하는 html 파일로 응답을 해주고, 브라우저가 해당 파일을 받아 해석한 후 사용자에게 보여주는 방식으로 사용자에게 보여주는 화면을 서버측에서 준비를 했다.
요즘에는 웹에서 제공되는 정보가 매우 많기 때문에 새로운 화면을 보여 주어야 할 때마다 서버 측에서 모든 페이지를 준비하게 되면 성능상의 문제가 발생할 수 있다.
ex)
1. 트래픽 과다
2. 사용자가 동시간대에 몰릴경우 서버에 무리를 줄 수 있다.
3. 새로운 페이지로 이동( 화면 전환 ) 할 때 마다 새로운 html 파일을 계속해서 유저와 서버가 요청/응답 하게 되면 상태 유지가 번거로울 뿐만 아니라 불필요한 페이지 로딩이 발생하게 되어 비효율적이다.
► React같은 라이브러리 or 프레임워크를 사용하여 유저의 브라우저가 뷰 렌더링을 담당하도록 하면 이러한 성능상의 문제를 해결할 수 있다.
Single Page Application
SPA는 이름 그래도 하나의 페이지로 이루어진 애플리케이션이라는 의미이다. SPA의 동작 방법은 아래의 그림과 같다.
사용자가 처음 서버에 접속 요청을 보내면 html 파일과 함께 정적 리소스 파일들을 함께 보내준다. 이후에 유저가 서버에게 요청을 하면 해당 요청에 필요한 JSON 파일들만 응답해주며 브라우저는 서버에게 받은 JSON파일을 해석하여 변경된 사항만을 반영하여 유저에게 보여준다.
► SPA의 경우 페이지는 한 종류이지만, 해당 페이지에서 로딩된 JS와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여줄 수 있다. ( 다른 주소에 다른 화면을 보여주는 것을 라우팅 이라고 한다. )
[ + ] 리액트 라우팅 라이브러리 종류
1. react-router
2. reach-router
3. Next.js .. 등
SPA의 단점
1. SPA의 단점은 앱의 규모가 커지면 JS 파일의 크기가 너무 커진다는 것이다. ( 페이지에 첫 방문 시 정적 리소스들을 html 파일과 함께 모두 보내주기 때문에 ) 페이지 로딩 시 사용자가 실제로 방문하지 않을 수도 있는 페이지의 JS도 함께 불러오게되기 때문이다.
→ 코드 스플리팅 ( code spliting ) 을 사용하면 라우트별로 파일들을 나누어서 트래픽과 로딩 속도를 개선할 수 있다.
2. SEO ( Search Engine Optimization ) 검색엔진최적화 문제
JS를 실행하지 않는 일반 크롤러에서는 페이지의 정보를 제대로 수집해가지 못하여 검색 엔진의 검색 결과에 페이지가 나타나지 않을 수도 있다. → 검색엔진에 나타나지 않는다는 것은 큰 문제 ( 광고, 홍보, 유저가 구글, 네이버 등 포탈에서 검색을 통해 유입되지 못함. )→ SSR ( Server Side Rendering ) 을 통해 해결할 수 있다.
3. JS가 실행될 때까지 페이지가 비어 있기 때문에 JS 파일이 로딩되어 실행되는 짧은 시간 동안 흰 페이지가 나타날 수 있다. → SSR ( Server Side Rendering ) 을 통해 해결할 수 있다.