SPA vs MPA 와 CSR vs SSR

카테고리 없음

SPA vs MPA 와 CSR vs SSR

jaeheon0520 2024. 2. 10. 19:47

MPA(Multiple Page Application)

여러 개(Multiple)의 페이지로 구성된 Application이다.
MPA는 SSR(Server Side Rendering) 방식으로 렌더링한다.
전통적인 웹사이트 구조
새로운 페이지를 요청할 때 마다 서버에서 렌더링 된 정적 리소스(HTML, CSS, JavaScript)가 다운로드 된다.
페이지를 이동하거나 새로고침하면 전체 페이지를 다시 렌더링한다.

장점

SEO 관점에서 유리하다.
=> MPA는 완성된 형태의 HTML 파일을 서버로부터 전달받는다. 따라서 검색엔진이 페이지를 크롤링하기에 적합하다.
첫 로딩 매우 짧다.
=> 서버에서 이미 렌더링해 가져오기 때문이다.
그러나 클라이언트가 JS 파일을 모두 다운로드하고 적용하기전 까지는 각각의 기능은 동작하지않는다.

단점

새로운 페이지를 이동하면 ‘깜빡’인다. (UX)
=> 매 페이지 요청마다 전체 페이지를 다시 렌더링하기 때문에 리로딩(새로고침) 발생.
페이지 이동시 불필요한 템플릿도 중복해서 로딩 (성능)
서버 렌더링에 따른 부하

SPA(Single Page Applications)

한 개(Single)의 페이지로 구성된 Applicaton이다.
SPA는 CSR(Client Side Rendering) 방식으로 렌더링한다.
단 한 번만 리소스(HTML, CSS, JavaScript)를 로딩한다. 그 후에는 데이터를 받아올 때만 서버와 통신한다.
즉, 첫 요청시 딱 한페이지만 불러오고 페이지 이동 시 기존 페이지 내부를 수정해서 보여주는 방식이다.
필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 빠르고 자연스러운 사용자 상호작용을 제공할 수 있다.
Reat, Angular, Vue 등 프론트엔드 기술들이 나오면서 크게 유행하고 있다.

그래서 SPA를 CSR방식으로, MPA를 SSR 방식으로 렌더링 한다고 말한다.

단, SPA방식이 모두 CSR인 것은 아니다.(선택 가능)

장점

자연스러운 사용자 경험 (UX)
=> 전체 페이지를 업데이트 할 필요가 없기 때문에 빠르고 ‘깜빡’ 거림이 없다.
필요한 리소스만 부분적으로 로딩 (성능)
SPA의 Application은 서버에게 정적 리소스를 한 번만 요청한다. 그리고 받은 데이터는 전부 저장해놓는다.
서버의 템플릿 연산을 클라이언트로 분산 (성능)
컴포넌트별 개발 용이 (생산성)

단점

JavaScript 파일을 번들링해서 한 번에 받기 때문에 초기 구동 속도가 느리다
검색엔진최적화(SEO)가 어려움 (SSR로 해결 가능)
=> 일반적인 SPA 앱을 검색로봇 입장에서 보면 모든 페이지의 소스가 아래와 같이 보이다.
검색엔진이 색인을 할 만한 컨텐츠가 존재하지 않는 것이다.
보안 이슈 (프론트엔드에 비즈니스 로직 최소화)
=> SSR에서는 사용자에 대한 정보를 서버측에서 세션으로 관리를 하지만 CSR 방식에서는 클라이언트측의 쿠키말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않다.

<html>
<head>
  <title>Single Page Application</title>
  <link rel="stylesheet" href="app.css" type="text/css">
</head>
<body>
  <div id="app"></div>
  <script src="app.js"></script>
</body>
</html>

MPA	SPA
각 페이지 별도의 HTML 파일	페이지 전환 없이 동적 컨텐츠 업데이트
서버사이드 렌더링	클라이언트 사이드 렌더링
각 페이지 로드 시 서버 부하	초기 로딩 시간이 길 수 있음
SEO 친화적	SEO 도전적

SPA의 라이프 사이클 관리

애플리케이션은 초기화, 뷰 렌더링, 이벤트 처리, 데이터 업데이트 등 여러 단계를 거침.
상태 관리는 사용자 인터페이스(UI)의 일관성을 유지하고 복잡한 데이터 흐름을 관리하는 데 중요함. FE 프레임워크 (React, Angular, Vue)는 이러한 과정을 용이하게 함.
라이프 사이클 관리는 애플리케이션의 성능 최적화와 사용자 경험 향상에 중요한 역할을 함. 예를 들어, 불필요한 데이터 로딩을 피하고, 사용자 상호작용에 빠르게 반응하는 등의 방법이 있음.

Client-Side Rendering(CSR)

: react나 vue 같은 라이브러리를 활용해서 웹페이지를 유저 브라우저에서 실시간으로 만들어 주는 것.

페이지 전환이 부드러워지고, 앱처럼 예쁜 사이트를 만들 수 있다.

단점!

1. 첫 페이지 로딩 속도가 느림

2. 구글 검색 노출이 잘 안됨

=> 사이트 수익성에 악영향

CSR은 클라이언트 측, 즉 브라우저에서 JavaScript를 사용하여 동적으로 페이지를 렌더링한다. 브라우저에서 JavaScript 파일을 다운로드하고 실행해야 하므로, 초기 로딩이 느리며 검색 엔진 최적화가 어려울 수 있다. 그러나 이후 페이지 전환이 빠르고 부드러운 사용자 경험을 제공할 수 있다.

Server-Side Rendering(SSR)

: HTML을 서버에서 미리 만들어서 보내는 것

유저에게 자바스크립트 코드를 많이 보낼 필요가 없어서 조금더 가볍고 구글 검색 노출도 잘됨

원하는 곳에서 client-side rendering 가능

SSR은 서버에서 페이지의 HTML을 생성하고 브라우저에 전송한다. 페이지를 요청할 때 서버에서 미리 렌더링된 HTML을 제공하므로 초기 페이지 로딩이 빠르며, 검색 엔진이 콘텐츠를 크롤링하고 인덱싱하기 쉽기 때문에 SEO에 유리하다. 하지만 이 점때문에 서버 부하가 상대적으로 높을 수 있다.