[오늘의 React] SPA MPA

SPA 란?
Single Page Application 단일 페이지 어플리케이션
한 사이트를 하나의 HTML 문서로 표현 가능 > 컴포넌트를 한장의 html에 레고처럼 넣어서 페이지 이동
필요한 모든 정적 리소스를 최초 한 번에 다운로드하며 필요한 데이터만 따로 불러 오기 때문 추가 로딩 속도가 빠름
리액트 라우터로 페이지를 나눠 접속하는 url마다 다른 data를 보여줄 수 있음
페이지의 로딩 없이, 페이지에 필요한 컴포넌트를 불러와 렌더링 하여 보여주도록 도와줌
새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태

SPA

MPA 보다 빠른 반응, 성능 컴포넌트 기반 재사용성 서버의 템플릿 연산을 클라이언트로 분산 모바일 앱 개발시 동일한 API 사용 가능

초기 구동 속도 느림 검색엔진최적화(SEO)가 어려움 보안 이슈 높은 상태 관리 복잡도

MPA란?
Multi Page Application 다중 페이지 어플리케이션
각 페이지별로 HTML문서가 따로 존재하며 화면으로 불러오기 때문에 한 사이트에 여러 HTML문서 필요
따라서 새로운 문서를 요청할 때마다 정적 리소스가 다운로드되며 매번 전체 페이지가 다시 렌더링

MPA

관리용이한 SEO 다양한 자료 첫 로딩이 SPA보다 빠름

페이지 요청마다 리로딩(새로고침) 발생 서버 렌더링에 따른 부하

 
 
* SEO : 검색엔진 최적화 (Search engine optimization)
ㄴ 어떤 웹사이트에 도달하는 트래픽의 양과 질을 개선하는 작업
ㄴ 검색엔진이 코드를 읽고 웹 페이지가 검색 쿼리의 어느 부분에 위치해야 하는지 결정함
ㄴ 이미지 검색, 지역 검색, 구체적 업종에 대한 검색 등 여러 종류의 검색을 목표로 삼음
ㄴ 검색을 한 사용자들이 웹페이지를 발견하기 쉽도록 작업
 
 
 
CSR(Client Side Rendering)
최초 한 번 HTML, static, js 등을 다 받아와서 로딩하는 방식
이후에는 클라이언트의 요청이 있을 때마다 리소스를 서버에서 제공하고 클라이언트가 해석 후 렌더링

클라이언트 요청=> 변화가 필요한 영역만 서버에 전달=> 서버에서 클라이언트로 리소스 전달=> 클라이언트에서 view 처리

SPA(Single Page App) 형식의 프론트엔드 라이브러리(React, Vue)의 방식

(React SSR 라이브러리=Next.js, Vue SSR 라이브러리=Nuxt.js)
처음에 HTML에 대한 정보 비어 있음