SSR, CSR, SPA, MPA

웹 애플리케이션 구조: MPA 와 SPA

MPA (Multi Page Application)

• 전통적인 웹사이트 방식
• 사용자가 어떤 링크를 클릭하면 서버에 요청을 보내고, 서버가 새로운 HTML 페이지를 만들어서 브라우저에 전달
• 페이지 이동 시마다 서버에 새 요청 -> 서버가 새 HTML 생성 -> 브라우저가 전체 새로고침
• 기본 철학: 서버가 모든 것을 처리하고, 클라이언트(브라우저)는 결과만 보여줌.
• 장점: SEO(검색엔진 최적화)에 유리, 보안 및 유지보수 용이.
• 단점: 페이지 이동 시마다 새로고침이 일어나 느리고 부자연스러움.
• 화면이 그려지는 과정:
  1. [클라이언트] 사용자가 URL 입력/클릭 + 서버에 HTTP 요청 전송
  2. [서버] 요청받은 URL에 맞는 HTML 전체 페이지를 생성/전송 + 정적 리소스(CSS,JS,이미지)경로 전달
  3. [클라이언트] 응답받은 HTML, CSS, JS를 새로 로드(페이지 전체 새로고침)
  4. [클라이언트] 새 페이지 렌더링

SPA (Single Page Application)

• 한 개의 HTML 페이지에서 모든 기능을 처리
• 페이지 이동이 필요할 때, 필요한 데이터만 서버에서 받아와서 화면 일부만 동적으로 바꿈
• 전체 페이지 새로고침 없이 부드럽게 동작
• 최초 1회만 전체 리소스(HTML, JS, CSS) 로드
• 서버는 index.html과 JS/CSS 번들만 제공.
• 실제 각 페이지의 HTML은 JS가 브라우저에서 동적으로 생성 (브라우저 새로고침 없음)
• 대표적인 예: React, Vue, Angular 등으로 만든 웹앱.
• 등장 배경: MPA의 느린 사용자 경험을 개선하기 위해 등장.
• 장점: 앱처럼 부드럽고 빠른 UX를 제공하고자 함.
• 단점: 초기 로딩이 느릴 수 있고, SEO에 불리함(검색엔진이 자바스크립트 렌더링을 잘 못함).
• 화면이 그려지는 과정:
  1. [클라이언트] 사용자가 URL 입력/클릭 + 서버에 HTTP 요청 전송
  2. [서버]SPA의 기본 HTML, CSS, JS 번들을 전송 (대부분 빈 HTML + JS)
  3. [클라이언트] 뼈대 렌더링
  4. [클라이언트] JS실행되어 실제화면 생성 및 렌더링
     렌더링 과정 : HTML 파싱->DOM트리 생성->최초 렌더링

렌더링 방식: SSR 과 CSR

SSR (Server Side Rendering)

• 서버에서 HTML을 미리 만들어서 클라이언트에 전달.
• 사용자는 즉시 완성된 화면을 볼 수 있음.
• 이후에는 SPA처럼 동작할 수 있음(예: Next.js, Nuxt.js).
• 렌더링 과정:
  1.  **서버**가 자바스크립트(혹은 템플릿 엔진 등)를 실행해서,
  2. 서버에서 **API 요청**을 보내 데이터를 받아오고,
  3. 받은 데이터를 이용해 **서버에서 HTML을 만듭니다**.
  4. 만들어진 HTML을 브라우저에 보내주면,
  5. 브라우저는 받은 HTML을 바로 보여줍니다
• 등장 배경: SPA/CSR의 단점(초기 로딩 속도, SEO 문제)를 보완하기 위해 등장.
• 장점: 초기 화면을 빠르게 보여주고, 검색엔진에도 잘 노출되도록 함.
• 단점: 서버에 부하가 더 걸릴 수 있음, 구현이 복잡해질 수 있음.

CSR(Client Side Rendering)

• 브라우저(클라이언트)에서 자바스크립트로 화면을 그리는 방식.
• 서버는 데이터(API)만 제공하고, 실제 화면은 클라이언트가 만듦.
• SSR은 CSR에서 브라우저가 하던 "API로 데이터 받아서 화면을 그리는" 작업을 서버가 대신해서, 완성된 HTML을 브라우저에 보내주는 방식
• 등장 배경: SPA의 구현 방식으로, 서버의 부담을 줄이고, 클라이언트의 성능을 활용.
• 단점: 초기 로딩 시 자바스크립트 파일을 모두 받아야 하므로 느릴 수 있음. SEO에 불리.

MPA,SPA,SSR, CSR 개념 관계

1) MPA와 SPA는 애플리케이션 구조에 대한 분류
MPA: 여러 페이지(HTML)로 구성
SPA: 한 페이지(HTML)에서 동적으로 화면 전환
2) SSR과 CSR은 렌더링 방식에 대한 분류
SSR: 서버에서 HTML 생성
CSR: 클라이언트에서 HTML 생성

활용 방식

1) MPA ↔ SSR/CSR
MPA는 전통적으로 SSR과 함께 사용됨.
각 페이지 요청 시 서버가 HTML을 만들어서 내려줌.
하지만, MPA에서도 일부 CSR(자바스크립트로 동적 UI)을 사용할 수 있음.
예: jQuery로 일부 동적 UI 구현
2) SPA ↔ SSR/CSR
SPA는 전통적으로 CSR과 함께 사용됨.
최초에 빈 HTML과 JS를 받아오고, 이후 화면은 JS가 만듦.
하지만, 최근에는 SPA에서도 SSR을 지원하는 프레임워크가 많음.
예: Next.js(React 기반), Nuxt.js(Vue 기반) 등
서버에서 초기 HTML을 렌더링해서 보내고, 이후에는 CSR로 동작