MPA(Multi-Page Application)
- 여러개의 HTML 파일로 이루어져 있는 애플리케이션
- 새로운 페이지를 요청할 때마다 서버에서 정적 리소스가 다운되고 그에 맞춰 전체 페이지를 다시 렌더링한다
- 사용자에게 보이는 화면은 서버측에서 준비하는 SSR(Server Side Rendering) 방식을 사용한다
장점
1. 첫로딩이 빠르다
요청받은 페이지에 정적 리소스만 받아오기 때문에 처음 페이지를 로딩하는 작업이 빠르다.
2. SEO(Search Engine Optimization, 검색 엔진 최적화)에 유리하다
MPA는 완성된 형태의 HTML 파일을 서버로부터 전달받기 때문에 검색 엔진이 페이지를 크롤링하기에 적합하다.
단점
1. 다른 페이지와 겹치는 컴포넌트를 매번 다시 불러와야 한다
header, footer 같은 웹사이트에서 겹치는 컴포넌트를 새로운 페이지를 불러올때마다 다시 불러와야 한다. 다른 페이지로 이동해도 변하지 않는 영역까지 DOM을 다시 그려줘야하기 때문에 비효율적이다.
2. 상태값을 유지하는 것이 어렵다
상태값이란 그 페이지에서 유지하고 있는 데이터 값을 의미하는데 이 값을 유지하는 것이 어렵다.
3. 새로운 페이지를 이동하면 화면이 깜빡인다
새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링 하기 때문에 화면전체가 리로딩이 되면서 페이지가 깜빡인다.
이런 단점을 해결하기위해 리액트에서
1. 뷰 렌더링을 사용자의 브라우저가 담당한다
2. 애플리케이션을 브라우저에 불러와 실행하고 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트한다
SPA(Single-Page Application)
- 한개의 HTML 파일로 이루어진 애플리케이션
- 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드한 후 새로운 페이지 요청이 있을 경우 페이지 업데이트에 필요한 데이터만 전달받아 페이지를 업데이트한다
- 브라우저가 페이지를 화면에 그려주고 서버에서는 해당하는 데이터만 받아오는 CSR(Client Side Rendering) 방식을 사용한다
장점
1. 다른 페이지로 전환이 빠르다
첫페이지 로딩때 모든 리소스를 가져오기 때문에 이후에 페이지를 불러오는 작업이 빠르다.
2. 새로운 페이지를 이동해도 화면이 깜빡이지 않는다
전체 페이지를 업데이트를 할 필요가 없고 업데이트된 데이터만 갈아끼우기 때문에 새로운 페이지를 이동해도 화면이 깜빡이지 않는다.
단점
1. 첫로딩이 느리다
페이지 로딩시 사용자가 실제로 방문하지 않을 수도 있는 페이지의 스크립트도 불러오기 때문에 앱의 규모가 커지면 자바스크립트 파일이 너무 커져 첫로딩이 느릴 수 있다. 이때 트래픽과 로딩 속도를 개선하기 위해 라우트별로 파일을 나누는 코드 스플리팅을 사용한다. SPA는 첫로딩이 느리지만 이후에 페이지를 로딩하는것은 빠르다.
리액트에서 라우터의 역할
1. 리액트에서 라우터는 URL에 해당하는 컴포넌트를 불러온다
2. 웹 브라우저 뒤로가기 기능 사용 가능하다
MPA와 SPA의 동작방식 정리
MPA는 클라이언트가 서버에게 Initial Request를 하면 HTML을 한번만 받는다. 서버에 추가적인 요청은 AJAX를 통해 JSON 데이터를 받아서 업데이트한다.
SPA는 클라이언트가 서버에게 Initial Request를 하면 HTML을 받는다. 'page reload'를 요청하면(post 방식으로), 다시 HTML을 받아와 화면을 그려준다.
Reference
'React' 카테고리의 다른 글
| [리액트] react-router-dom v5 사용법 (0) | 2022.04.11 |
|---|---|
| [리액트/한줄정리] 라우팅이란? (0) | 2022.04.11 |
| [리액트] 리액트에서 state를 직접 수정하면 안되는 이유 (데이터의 불변성) (0) | 2022.04.08 |
| [리액트/한줄정리] 단방향 데이터 흐름이란? (0) | 2022.04.08 |
| [리액트] 스프레드 문법으로 state에 값 추가해주기 (0) | 2022.04.08 |
댓글