MPA vs SPA vs CSR vs SSR

1. MPA (Multi Page Application)

• 개요

  • 전통적인 웹 애플리케이션 구조로 각 페이지가 독립적인 HTML 파일로 구성.
  • 페이지 전환 시마다 서버로부터 새로운 HTML 파일 요청.

• 장점

  1. SEO 친화적: 각 페이지가 고유 URL을 가지며 검색 엔진 크롤링에 용이.
  2. 기술적 복잡도 낮음: 클라이언트 상태 관리 및 복잡한 라우팅 불필요.
  3. 보안 강화: 서버 중심 모델, 민감 데이터 클라이언트에 저장되지 않음.
  4. 단순한 페이지 관리: 독립적 페이지 구조, 유지보수 용이.

• 단점

  1. 느린 사용자 경험: 페이지 전환 시 전체 HTML 새로고침.
  2. 중복된 리소스 요청: 공통 CSS/JS 반복 로드로 네트워크 부하.
  3. 상태 관리 어려움: 페이지 전환 시 상태 초기화 문제.
  4. 개발 속도 저하: 중복 코드 및 반복 작업 증가.

• 관련 공식 문서

  • MDN Web Docs - Server-side Web Frameworks
  • Express.js 공식 문서

2. SPA (Single Page Application)

• 개요

  • 단일 HTML 로드 후, JavaScript로 동적 콘텐츠 업데이트.

• 장점

  1. 향상된 사용자 경험: 빠르고 부드러운 탐색.
  2. 서버 부하 감소: 데이터만 교환, 효율적인 네트워크 사용.
  3. 풍부한 상호작용성: 동적이고 인터랙티브한 UI 제공.

• 단점

  1. SEO 문제: 동적 렌더링으로 크롤링 어려움.
  2. 초기 로드 시간 증가: 모든 리소스 로드 필요.
  3. JavaScript 의존성: 비활성화 시 앱 사용 불가.

• 관련 공식 문서

  • React SPA 공식 문서

3. CSR (Client-Side Rendering)

• 개요

  • 서버에서 기본 HTML 제공 후 클라이언트에서 JavaScript로 렌더링.

• 장점

  1. 향상된 사용자 경험: 반응적 UI 제공.
  2. 효율적 업데이트: 전체 페이지 재로드 불필요.
  3. 서버 부하 감소: 렌더링 부담 클라이언트 이동.

• 단점

  1. SEO 문제: 콘텐츠 크롤링 어려움.
  2. JavaScript 의존성: 비활성화 시 문제 발생.
  3. 초기 로드 시간 증가: JavaScript 다운로드 및 실행 필요.

• 관련 공식 문서

  • React CSR 공식 문서

4. SSR (Server-Side Rendering)

• 개요

  • 서버에서 HTML 렌더링 후 클라이언트에 전송.

• 장점

  1. SEO 친화적: 완전 렌더링된 콘텐츠 제공.
  2. 빠른 초기 로드: HTML이 완전히 렌더링되어 제공.
  3. 저성능 장치에서의 성능 개선: 클라이언트 부담 감소.

• 단점

  1. 서버 부하 증가: 각 요청 시 HTML 렌더링 필요.
  2. 느린 탐색: 전체 페이지 새로고침.
  3. 구현 복잡성 증가: 추가 인프라 및 설정 필요.

• 관련 공식 문서

  • Next.js SSR 공식 문서

5. 비교표

결론

• 각 방식은 요구 사항에 따라 선택.
  • SEO가 중요 → SSR
  • 빠른 사용자 경험 → SPA/CSR
  • 낮은 기술 복잡도 → MPA