[web] SSR(Server Side Rendering) vs CSR(Client Side Rendering)

 

SPA와 MPA

 

SPA(Single Page Application)

• 하나의 HTML파일을 기반으로 화면을 자바스크립트를 이용하여 컨텐츠를 동적으로 변화하는 웹 어플리케이션 방식이다.

 

MPA(Multiple Page Appliecation)

• 사용자가 페이지를 요청할 때마다, 웹 서버가 요청한 UI와 요청한 데이터를 HTML파일로 파싱해서 보여주는 웹 어플리케이션 방식이다.

 

 

여기서 일반적인 전통방식으로 접근하면 SPA의 렌더링 방식은 CSR에 속하고 MPA의 렌더링 방식은 SSR에 속하게 된다.

 

 

 

CSR(Client Side Rendering)

 

 

 

CSR(Client Side Rendering)

 

• 브라우저가 서버에 HTML과 JS를 요청한 후 요청파일이 모두 로드가 되면 사용자의 상호작용에 따라 동적으로 렌더링한다.

 

이미지출처

 

👍장점

 

• 서버에 요청하는 횟수가 적다. 즉, 불필요한 서버 요청이 없기 때문에 서버 부하가 덜 하다.
• 처음 로딩만 기다리면 동적으로 빠르게 렌더링 된다. 즉, 사용자 경험(UX)이 좋다.

 

👎단점

• 처음에 로드될 때 모든 스크립트 파일이 로드될때까지 기다려야 한다.
• 검색 엔진 최적화의 문제가 있다.

 

 

 

SSR(Server Side Rendering)

 

SSR(Server Side Rendering)

• 사용자가 페이지를 요청할때 마다 웹 서버에서는 그 요청한 html, css, javascript파일과 데이터들을 불러와서 렌더링한다.

이미지출처

 

👍장점

• 초기 페이지를 로드할 때 사용자가 컨텐츠를 더 빠르게 확인 할 수 있다.
• 검색 엔진 최적화가 되어있다.

 

 

👎단점

• 서버에 요청해야하기 때문에 서버에 부하가 크다.
• 페이지를 요청할때마다 새로고침이 되기 때문에 SPA와 비교했을 때 사용자 경험(UX)이 좋지 않다.

 

 

 

 

참고

 

[주니어탈출기] 서버사이드렌더링(SSR) & 클라이언트사이드렌더링(CSR)