[코딩기초] SSR vs CSR

1. MPA vs SPA

• MPA(Multi Page Application)
  • 여러 페이지로 구성된 웹 어플리케이션이다.
  • 사용자의 클릭과 같이 인터렉션이 발생할 때마다 새로운 Html을 받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 웹 페이지 구성 방식이다.
  • 첫 로딩이 짧고 서버 렌더링에 따른 부하가 걸릴 수 있다.
• SPA(Single Page Application)
  • 하나의 페이지로 구성된 웹 어플리케이션이다.
  • 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 데이터를 바인딩하는 방식이다.
  • 사용자 경험이 자연스럽고, 컴포넌트별 개발이 용이하다.
  • 보안 이슈가 있을 수 있다.

---

2. SSR vs CSR

• SSR(Server Side Rendering)
  • MPA의 방식이다.
  • 검색엔진이 웹을 크롤링 하면서 페이지에 컨텐츠 색인을 생성하는 과정이다.
  • 서버측에서 렌더링을 하기 때문에 서버측 부하가 증가한다.
  • 새로운 요청이 생길때마다 바뀌지 않아도 되는 부분도 렌더링이 되기 때문에 사용자 경험이 부자연스럽다.
  • 페이지마다 데이터가 자주 바뀌거나,  누구에게나 동일한 내용을 노출하면 SSR방식이 좋다.

• CSR(Client Side Rendering)
  • SPA의 방식이다.
  • 초기로딩이 오래걸리지만 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식이다.
  • 사용자 경험이 자연스럽고, 서버 부하가 적다.
  • 개인정보 데이터를 기준으로 구성되거나, 데이터 보호가 더 중요하면 CSR방식이 좋다.