[FE] CSR과 SSR

📌 SPA vs MPA

• SPA(Single Page Application)
  - 하나의 HTML을 기반으로 JavaScript를 이용해 동적으로 화면의 컨텐츠를 바꾸는 방식이다.
• MPA(Multiple Page Application)
  - 새로운 페이지를 요청할 때마다 웹 서버가 요청한 UI와 데이터를 HTML로 파싱하여 보여주는 방식이다.
  

📌 CSR

• CSR(Client Side Rendering)
  - 서버로부터 처음에만 페이지를 받아오고 이후에는 JS를 이용하여 동적으로 렌더링을 함
  🔹 장점
  - 처음 로딩 시에만 시간이 걸리고, 동적으로 빠르게 렌더링 되기 때문에 사용자 경험(UX)가 좋다.
  - 서버 요청 횟수가 적어서 부담이 덜하다.
  🔹 단점
  - 모든 파일이 로드 될 때 까지 기다려야 한다.
  - SEO(검색엔진 최적화) 문제가 발생 할 수 있다.
  

📌 SSR

• SSR(Server Side Rendering)
  - 브라우저가 페이지를 요청할 때마다 새로고침이 일어나고 서버에 새로운 페이지(HTML, CSS, JS) 요청을 하는 방식이다.
  🔹 장점
  - 초기 로딩 속도가 빠르다.
  - 모든 검색엔진에 대한 SEO(검색엔진 최적화)가 가능하다.
  🔹 단점
  - 사용자 UX가 떨어진다.(매번 페이지 요청 때문)
  - 서버에 매번 요청을 하기 때문에 서버의 부담이 커짐
  

참조

CSR, SSR