CSR와 SSR의 장단점

<Do it! Vue.js 입문>을 기본으로 배운 내용입니다.

 

목차

• SPA - CSR

• MPA - SSR

 

---

페이지를 렌더링하는 방법에 따라 SPA와 SSR로 나눌 수 있다.

 

1. SPA

• 첫 요청시 딱 한 페이지만 불러오고 페이지 이동시 기존 페이지의 내부를 수정해서 보여주는 방식
• SPA(single page application)은 클라이언트 사이드 렌더링(CSR, client side rendering) 방식으로 어플리케이션 생명 주기 중에서 단 한 번만 리소스를 로딩하고, 그 후에는 데이터를 받아올 떄만 서버와 통신한다. 

장점	자연스러운 사용자 경험 필요한 리소스만 부분적으로 로딩 서버의 템플릿 연산을 클라이언트로 분산 컴포넌트별 개발 용이 모바일 앱 개발을 염두에 둔다면 동일한 API를 사용하도록 설계 가능
단점	JavaScript 파일을 번들링해서 한 번에 받기 때문에 초기 구동속도가 느림 => webpack의 code splitting으로 해결 검색엔진최적화(SEO)가 어려움 => SSR로 해결 보안 이슈(SPA에서는 필요한 데이터만 전달받고 많은 비즈니스 기능을 클라이언트에서 수행하기 때문에 핵심 로직이 노출될 수 있다 => 핵심로직은 서버에서 수행하도록 하고 중요한 유효성 검사는 양측 모두에서 수행함으로써 보안성을 유지해야한다.

 

 

2. MPA

MPA는 페이지를 이동할 때마다 새로운 페이지를 요청한다. 모든 템플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답한다. 이 과정을 서버 사이드 렌더링(SSR, server side rendering) 방식이라 한다.

장점	SSR의 경우 javascript코드가 동작하기 전에도 완성된 형태의 템플릿을 서버로부터 전달받기 때문에, javascipt를 구동하지 않는 검색 로봇이 페이지를 크롤링하기에 매우 적합하다.
단점	페이지 이동시 화면 깜빡임 페이지 이동시 불필요한 템플릿도 중복해서 로딩 서버 렌더링에 따른 부하 모바일 앱 개발시 추가적인 백엔드 작업 필요

 

 

 

 

 

 

참고한 사이트