SPA & MPA
SPA( SinglePageApplication )
- 하나의 페이지로 이루어진 웹어플리케이션
- 렌더링 방식 CSR (ClientSideRendering) 사용
- 웹어플리케이션에 필요한 정적 리소스를 초반 한 번에 모두 다운로드
- 새로운 페이지 요청이 있을 경우 갱신에 필요한 데이터만을 서버에 받고,
클라이언트에서 렌더링을 갱신 ⇒ 자연스러운 페이지 갱신MPA ( MultiPageApplication )
- 여러개의 페이지로 이루어진 웹어플리케이션
- 렌더링 방식 SSR (SeverSideRendering) 사용
- 새로운 페이지 요청이 있을 경우 서버에서 이미 렌더링된 정적리소스를 받아옴
- 무조건 SPA == CSR, MPA == SSR?
- SPA, MPA는 페이지 갯수에 따른 개념
- CSR, SSR은 렌더링이 어디서 이루어지냐에 따른 개념
- 두가지 분리 필요
- MPA와 SPA에서의 상태관리
- MPA에서는 서버의 데이터를 이용해 페이지를 렌더링하므로,
클라이언트의 데이터와 서버의 데이터가 큰 차이를 가지지 않음- SPA에서는 자체적으로 데이터를 갖고, 서버와의 동기화가 필요한 데이터만을 처리
그 외의 데이터는 Client만의 데이터로 유지
CSR & SSR
CSR, SSR의 개념
- ClientSideRendering
- SeverSideRendering
- 요청할 때 즉시 만드니까 데이터가 달라져서 미리 만들어두기 어려운 페이지에 적합
- StaticSiteGeneration
- 미리 다 만들어두니까 바뀔 일이 거의 없는 페이지에 적합
- (캐싱해두기 좋은 페이지에 적합)
CSR
- 동작 방법
- 웹사이트 방문
- 브라우저가 서버에 콘텐츠 요청
- 서버에서 빈뼈대HTML, 연결된 JS링크(React) 전달
- 서버에 부하가 적어
- 브라우저의 웹크롤링 부분에서 HTML에 정보가 없기 때문에 검색엔진에서 낮은 평가를 받을 수 있음
- 브라우저가 HTML파싱 후 서버로 부터 다시 JS다운로드
- 초기 로딩 속도 느림
- 이후 구동 속도 빠름 (UX 측면에서 좋)
- 동적DOM생성 후 렌더
- 어떤 상황에 좋을까
- 유저와 상호작용이 많을 때
- 검색엔진 노출이 필요없을
SSR
- 동작 방법
- 웹사이트 방문
- 브라우저가 서버에 콘텐츠 요청
- 서버에선 즉시 필요한 데이터를 얻어와 모두 삽입하고 CSS 적용까지 마친 HTML코드와 JS코드를 전달
- HTML에 정보가 있기 때문에 검색엔진 최적화에 유리
- 브라우저는 바로 HTML렌더 → JS코드 다운로드 → HTML에 JS로직 연결
- JS코드 다운로드 전 사용자가 HTML화면을 볼 수 있음 (초기 구동 속도 빠름)
- (JS코드가 다운로드 되기 전에는 이벤트가 이루어지지 않음)
- 어떤 상황에 좋을까
- 회사홈페이지 같이 검색엔진 노출이 필요
- 누구에게나 항상 같은 내용을 보여줄 때
- 잦은 업데이트
