[매일메일] SSR vs CSR, SPA vs MPA란? (BE.250122)

SSR이란?

• 서버 측에서 렌더링하는 방식.
  • 클라이언트가 서버에 컨텐츠를 요청할 때마다, 서버는 완성된 페이지를 생성해서 클라이언트에 제공함.
  • CSS를 모두 적용하고 렌더링 준비를 마친 HTML과 JS 코드를 응답함.
  • 브라우저에서는 JS 코드를 다운로드하고, HTML에 JS를 연결함.
• 모든 데이터가 HTML에 이미 담겨있기 때문에 SEO(검색 엔진 최적화)에 유리함.
• JS 코드를 다운로드 받고 실행하기 전에 사용자가 이미 렌더링된 HTML을 볼 수 있음(초기 로딩 속도 빠름)

 

CSR이란?

• 클라이언트 측에서 렌더링 하는 방식.
  • 클라이언트가 서버에 컨텐츠를 요청하면, 서버는 빈 뼈대만 있는 HTML을 응답함.
  • 클라이언트는 연결된 JS 링크를 통해 서버로부터 다시 JS 파일을 다운로드 받음
  • JS를 통해 동적으로 페이지를 만들어 브라우저에 보여줌.
• 빈 뼈대만 있는 HTML을 받아오기 때문에 웹 크롤러가 컨텐츠를 감지하기 어려움. (SEO 불리함.)
  • 반대로, 서버는 HTML 뼈대만 넘겨주기 떄문에 서버 측의 부하가 적음.
• 브라우저가 JS 파일을 다운로드하고, 동적으로 DOM을 생성하는 시간을 기다려야 함. (초기 로딩 속도 느림.)
• 초기 로딩 이후에는 페이지를 일부 변경할 때 서버에 해당 데이터만 요청하면 되므로 구동 속도 빠름.
  
  • 클라이언트 측에서 연산과 라우팅을 직접 처리하므로 반응속도가 빠르고 UX가 우수함.

 

SPA(Single Page Applicatoin)

• 하나의 HTML 페이지로 시작하고, 이후 페이지 전환은 클라이언트에서 자바스크립트를 통해 동적으로 이루어짐.
• 페이지가 한 번 로딩된 이후 데이터를 조회/수정할 때 페이지가 새로고침되지 않고, 다른 페이지로 전환하지 않음.

MPA(Multi Page Application)

• 여러 개의 HTML로 구성되어 있고, 페이지 전환 시마다 서버에 요청을 보내 새로운 HTML을 로드함.

 

---

 

SPA와 CSR은 동치가 아니고, MPA와 SSR은 동치가 아니다.

• SPA는 하나의 HTML 페이지 시작. 데이터가 수정되고 조회하게 만들기 위해 CSR 방식을 채택함.
• MPA는 상황에 맞게 새로운 페이지를 받아와서 보여주기 위해 SSR 방식을 채택함.
• SPA, MPA: 어플리케이션 구조를 나타냄.
• CSR, SSR: 렌더링을 수행하는 방식을 나타냄.

---

 

출처

[1] 매일메일. 250122. 서버 사이드 렌더링과 클라이언트 사이드 렌더링의 차이점은 무엇인가요? 103번. https://maeil-mail.kr

[2] CSR, SSR, SPA, MPA? 상사한테 혼나기 전에 알아야 하는 것. (제목이 좀 웃프다...ㅋㅋㅋ)

https://blog.the-compass.kr/csr-ssr-spa-mpa-ede7b55c5f6f

[3] gpt에게 CSR SSR SPA MPA에 대해 묻다