CSR, SSR 이란? (Client-Side-Rendering, Server-Side-Rendering)

렌더링 (Rendering)

웹 페이지를 접속할 때, 그 페이지를 화면에 그려주는 것

 

MPA(Multi Page Application) 과 SPA(Single Page Application)

MPA는 다수의 페이지로 구성되어 요청마다 정해진 페이지를 반환하는 방식이라고 한다.

반면, SPA는 단일 페이지로 구성되어 해당 페이지 자체에서 요청에 따라 화면을 재구성한다고 한다.

MPA는 SSR의 방식으로, SPA는 CSR 방식으로 HTML을 렌더링한다.

하지만 MPA = SSR / SPA = CSR 는 아니라고 한다.

MAP와 SPA는 웹 어플리케이션을 구성하는 형태이고 SSR과 CSR은 렌더링 방식이다.

 

SSR (Server-Side-Rendering)

페이지 렌더링 할 때마다 서버에 새로운 페이지에 대한 요청을 한다. (새로고침)

서버에서 요청한 HTML파일 렌더링을 마친 후에 응답한다 ➡️ 로딩시간이 상대적으로 짧다.

이미 렌더링된 HTML 문서가 전달되어서 SEO이 CSR방식에 비해 우수하다

사용자 정보를 서버측 세션으로 관리하기 용이해서 CSR방식에 비해 보안이 우수하다고 한다.

 

하지만, 페이지별로 새로고침 현상 및, 매번 로딩시간이 필요하다는 단점이 있다.

서버 부하에 영향을 미칠 위험도 있다고 한다.

 

 

CSR (Client-Side-Rendering)

초기에 화면에 필요한 요소들을 모두 받아온 뒤 클라이언트 사이드에서 HTML 문서를 렌더링한다

하나 또는 여러개의 chunk 파일로 거대한 js파일로 번들링한다. SPA에서는 번들링된 js를 전달받아 Single Page Application을 구축하게 되는 것이다.

번들링이 완료된 js 파일을 모두 로드하기 전에는 첫페이지를 로드할 수 없다.

첫 페이지는 이미 로드 되었지만, 로드된 페이지는 빈 HTML파일이다.

<div id="app"> </div>로 로드 되어서 빈화면을 바라보기 때문에 SEO 최적화도 어렵다.

 

하지만 초기 로딩 속도를 제외하면 나머지 부분은 매우 빠른 속도로 볼 수 있다.

이미 다운받은 번들링된 js 파일에 렌더링이 필요한 모든 로직이 들어있기 때문이다.

새로고침이 일어나지 않고, 서버가 클라이언트 뷰단에서 처리할 일을 더이상 신경쓰지 않아도 된다.

SPA 형태에 SSR을 지원하도록 한 프레임워크로

Vue의 경우, Nuxt.js

React의 경우 Next.js가 있다.

 

첫 페이지 로딩은 SSR방식으로 기존 CSR방식보다 빠르게 문서를 받아옴과 동시에

서버측에서 렌더링이 가능하므로 SEO적용도 가능하다.

 

 

 

참고한 블로그

https://goodgid.github.io/Server-Side-Rendering-and-Client-Side-Rendering/

서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)

https://velog.io/@longroadhome/FE-CSRClient-Side-Rendering-vs-SSRServer-Side-Rendering-feat.-React%EB%A5%BC-%EC%A4%91%EC%A0%90%EC%9C%BC%EB%A1%9C

[FE] CSR(Client-Side-Rendering) vs SSR(Server-Side-Rendering) (feat. React를 중점으로)