MPA
MPA란 Multi Page Application의 약자로 여러 개의 페이지로 이루어진 어플리케이션을 말한다.
MPA에서 사용하는 렌더링 방식을 SSR(Server Side Rendering)이라고 한다.
SSR은 말그대로 서버측에서 사용자에게 보여줄 페이지를 정적인 HTML로 미리 렌더링하여 반환한다. 그 다음 사용자가 페이지를 이동할 때마다 서버에 요청하여 새로운 페이지의 HTML을 받아오며 완전히 새로운 페이지로 이동하게된다.
최초 렌더링이 빠르다는 장점이 있지만 페이지를 이동할 때마다 완전히 새로운 페이지로 이동하기 때문에 화면이 깜빡이며 새로고침된다는 단점이 있다. 페이지의 용량이 무거워질 경우 로딩 시간이 길어져 사용자 경험이 나빠질 수 있다.
SPA
SPA란 Single Page Application의 약자로 단일 페이지 어플리케이션을 말한다.
SPA는 실제로 초반에 표시되는 index.html 외에 html 문서는 없으며, index.html 파일의 내용을 자바스크립트를 이용해 리렌더링 해주는 방식으로 페이지를 구성한다. 즉, 페이지 별로 html 파일을 구성하지 않고 표시해주어야 할 내용들을 각각의 컴포넌트 형식으로 구성하게 된다.
SPA에서 사용하는 렌더링 방식을 CSR(Client Side Rendering)이라고 한다.
CSR은 최초 렌더링 시에 페이지의 모든 정적 데이터를 한번에 다 받아온다. 그래서 초기 화면 로딩이 느리다.
하지만 일단 로드되고 나면 사이트 내에서 페이지 이동이 일어날 때 변화하는 부분의 데이터만 바인딩되기 때문에 화면 깜빡임과 새로고침이 없어 사용성이 매우 좋아진다.
다만 html 파일이 단 한 개이고, 페이지의 내용이 자바스크립트로 이루어지기 때문에 검색 엔진 크롤러에 노출시키기 어렵다는 단점이 있다. 이를 SEO(검색 엔진 최적화)가 좋지 않다라고 표현한다.
↓
정리
| SPA | MPA |
| 한 개의 페이지로 구성된 어플리케이션 | 여러 개의 페이지로 구성된 어플리케이션 |
| CSR 방식 렌더링 | SSR 방식 렌더링 |
| 최초 렌더링 느림 | 최초 렌더링 빠름 |
| 페이지 이동 빠름 | 페이지 이동 느림 |
| SEO(검색 엔진 최적화)가 좋지 않음 | SEO(검색 엔진 최적화)가 좋음 |
'Web-Frontend > React.js' 카테고리의 다른 글
| [React.js] Styled Component (0) | 2023.03.06 |
|---|---|
| [React.js] React Router (0) | 2023.01.24 |
| [React.js] Context 사용하여 데이터 전달하기 (0) | 2023.01.21 |
| [React.js] 복잡한 상태 변화 로직 분리 - useReducer (0) | 2023.01.21 |
| [React.js] 렌더링 최적화 - useCallback, 함수형 업데이트 (0) | 2023.01.20 |