📌 SPA랑 MPA, CSR이랑 SSR 개념 한 번에 정리 해봄

React로 프론트엔드 개발을 공부하면서 자꾸 듣게 되는 용어들이 있다.

바로 SPA, MPA, CSR, SSR.

처음엔 “뭔 차이야…?” 싶었는데, 알고 보면 웹 구조와 렌더링 방식에 대한 개념 차이였다.
이해해두면 프레임워크를 고를 때나 프로젝트 구조를 설계할 때 정말 유용할 것 같아서
개념 + 차이점 + 장단점을 한 번 정리해보았다!

1️⃣ SPA vs MPA

✅ SPA (Single Page Application)

SPA는 말 그대로 "단일 페이지 애플리케이션"이다.
하나의 HTML 안에서 필요한 화면만 부분적으로 바꾸는 방식으로 동작한다.

처음에 한 번만 HTML과 JavaScript 번들을 로드하고,
이후에는 페이지 이동이나 인터랙션이 발생하더라도 전체 페이지를 다시 요청하지 않는다.
대신, JavaScript가 필요한 데이터만 서버에서 받아와 화면의 일부분만 갱신한다.

대표적인 SPA 프레임워크로는 React, Vue, Angular 등이 있다.

장점

• 페이지 전환 시 전체를 새로고침하지 않기 때문에, 화면 전환이 빠르고 부드럽다.
• 앱(App)처럼 **사용자 경험(UX)**이 자연스럽고 몰입감 있다.
• 프론트엔드에서 다양한 인터랙션(예: 비동기 폼 처리, 실시간 반응 등)을 구현하기 용이하다.

단점

• 초기 로딩 속도가 느릴 수 있다.
  큰 JavaScript 번들을 한 번에 내려받아야 하기 때문에, 특히 모바일 환경에서 첫 진입이 느릴 수 있다.
• SEO(검색 엔진 최적화)에 불리하다.
  CSR 방식에서는 HTML이 <div id="root"></div>처럼 비어 있는 상태로 전달되고,
  실제 콘텐츠는 JavaScript가 브라우저에서 실행된 뒤에야 화면에 나타난다.
  검색엔진 크롤러가 JavaScript를 제대로 실행하지 못하면, 페이지 내용을 인식하지 못할 수 있다.
  Google은 JS 실행이 가능하긴 하지만, 완전히 보장되는 건 아니며, 크롤링 시점이 지연되거나 누락될 위험이 있다.

✅ MPA (Multi Page Application)

MPA는 "멀티 페이지 애플리케이션"으로, 전통적인 웹사이트 구조와 동일하다.
페이지마다 각각 독립적인 HTML 파일이 존재하며, 사용자가 페이지를 이동할 때마다 새로운 요청이 서버로 보내진다.
서버는 해당 요청에 맞는 데이터를 DB에서 조회하고, 이를 기반으로 HTML을 생성해 다시 클라이언트에 전달한다.

예전부터 널리 사용되어온 방식이며, 대표적인 예로는 JSP, PHP, Spring MVC 기반의 서버 애플리케이션이 있다.

장점

• 서버에서 완성된 HTML을 그대로 전달하므로,
  검색엔진이 페이지에 접근했을 때 바로 콘텐츠를 파악할 수 있어 SEO에 매우 유리하다.
• 페이지마다 필요한 리소스만 로드하기 때문에,
  초기 화면이 빠르게 렌더링된다. 특히 정보 중심의 정적인 페이지에서 강점을 가진다.

단점

• 페이지 이동 시마다 전체 페이지가 새로 로딩되므로, 새로고침이 발생한다.
  이로 인해 화면이 깜빡이는 Flicker 현상이 생길 수 있고, 사용자 경험이 끊기는 느낌을 줄 수 있다.
• 부드러운 UX를 구현하기 어렵고,
  버튼 클릭이나 폼 제출 등의 동작에서 전체 페이지가 다시 렌더링되므로 비효율적일 수 있다.

🔍 SPA vs MPA 비교 표

항목	SPA	MPA
구조	하나의 HTML로 구성	여러 HTML로 구성
전환 방식	JavaScript로 화면 일부 갱신	이동 시 전체 페이지 새로고침
UX	부드럽고 빠름	깜빡임 발생 가능
SEO	불리함	유리함
초기 로딩	느릴 수 있음	빠름

2️⃣ React는 어떻게 SPA를 구현할까?

✅ 핵심은 상태(State)와 리렌더링!

React는 내부적으로 state(상태)를 감지하고, 그 상태가 바뀌면 해당 상태를 사용하는 컴포넌트만 다시 렌더링한다.

🌱 작동 방식 요약

1. 상태 변경 함수 실행
2. React가 상태 변경 감지
3. 해당 상태를 사용하는 컴포넌트만 리렌더링
4. 전체 페이지 새로고침 없이 화면 일부만 바뀜

const [text, setText] = useState("Hello");

setText()로 값이 바뀌면 오직 text를 사용하는 부분만 업데이트됨!

✅ React SPA 장점 요약

• 빠르고 자연스러운 화면 전환
• 불필요한 렌더링을 줄여 성능 최적화
• 하나의 페이지 안에서 다양한 화면을 구성 가능

3️⃣ CSR vs SSR 

✅ CSR (Client Side Rendering)

CSR은 클라이언트 사이드 렌더링 방식으로, 브라우저(클라이언트)에서 직접 화면을 구성하는 렌더링 방식이다.
서버는 기본적으로 HTML 뼈대와 JavaScript 번들 파일만을 전달하고,
브라우저가 이 JavaScript를 실행하여 필요한 데이터를 받아오고, 그에 따라 화면을 렌더링한다.

대표적으로 React, Vue, Svelte 등 SPA 프레임워크에서 기본값으로 사용되는 렌더링 방식이다.

장점

• 화면 전환 시 전체 페이지를 다시 로드하지 않고,
  필요한 데이터만 받아와 화면 일부만 갱신하기 때문에 속도가 매우 빠르다.
• 마치 모바일 앱처럼 **자연스럽고 부드러운 사용자 경험(UX)**을 제공할 수 있다.
• 한 번 로딩된 페이지는 이후에 캐시된 JS로 빠르게 이동 가능하다.

단점

• 초기에 전달되는 HTML은 <div id="root"></div> 같은 빈 HTML 구조에 가깝기 때문에,
  브라우저에서 JavaScript가 실행되기 전까지는 실제 화면이 보이지 않는다.
• 이로 인해 SEO에 불리한 구조가 된다.
  검색엔진 크롤러는 HTML 기반으로 콘텐츠를 수집하는데,
  CSR 구조에서는 콘텐츠가 JS 실행 이후에야 렌더링되므로,
  검색엔진이 JS를 실행하지 못하거나 느리게 처리하는 경우, 페이지 정보를 제대로 수집하지 못할 수 있다.

✅ SSR (Server Side Rendering)

SSR은 서버 사이드 렌더링 방식으로, 사용자가 요청한 페이지를 서버에서 HTML로 미리 완성한 뒤 브라우저에 전달하는 구조다.
브라우저는 별도의 JavaScript 실행 없이도 즉시 콘텐츠가 포함된 HTML을 렌더링할 수 있어,
빠른 첫 화면과 높은 검색엔진 최적화 성능을 기대할 수 있다.

Next.js, Nuxt.js 등 현대 프레임워크들은 이 SSR 방식을 손쉽게 지원한다.

장점

• 서버가 HTML을 완성한 후 브라우저에 보내기 때문에,
  초기 로딩 속도가 빠르고 사용자에게 빈 화면을 보여주지 않는다.
• SEO(검색엔진 최적화)에 매우 유리하다.
  Google, Bing 등 검색엔진 크롤러는 HTML을 즉시 분석할 수 있으며,
  메타태그, 타이틀, 본문 내용 등을 빠짐없이 인식할 수 있다.
• 페이지 접근 시 서버 측에서 인증이나 리디렉션을 미리 처리할 수 있어 보안 처리에 유리하다.

단점

• 페이지 전환 시마다 서버에서 HTML을 새로 생성하고 전체 페이지를 다시 로딩해야 하므로,
  화면이 깜빡이는 Flicker 현상이 발생할 수 있다.
• 모든 페이지 요청에 대해 서버가 동적으로 HTML을 렌더링해야 하므로,
  서버에 부하가 커지고 성능 병목이 생길 수 있다.
  특히 트래픽이 많은 서비스에서는 캐싱 등 최적화가 필요하다.

🔍 CSR vs SSR 비교 표

항목	CSR (클라이언트 렌더링)	SSR (서버 렌더링)
렌더링 위치	브라우저	서버
초기 로딩	느림 (JS 실행 필요)	빠름 (HTML 즉시 렌더링)
SEO	불리함	유리함
페이지 전환	빠름 (앱처럼 자연스러움)	느림 (깜빡임 가능)
사용 예시	React 기본 구조	Next.js, Nuxt.js, JSP 등

🧠 정리 요약 한눈에 보기

분류	특징	장점	단점
SPA	하나의 HTML로 앱처럼 구성	빠른 전환, UX 향상	SEO 약함, 초기 느림
MPA	여러 HTML로 구성	SEO 유리, 초기 빠름	새로고침 발생
CSR	JS가 브라우저에서 렌더링	앱 같은 부드러움	초기 빈화면, SEO 약함
SSR	서버가 HTML 생성 후 전달	빠른 첫 화면, SEO 유리	깜빡임, 서버 부담