[1일 1CS] SSR 과 CSR 의 차이?

오늘은 SSR 과 CSR 의 차이에 대해서 알아보려고 한다. 실제 면접에서 받았던 질문이기도 하다.

 

 1. SSR

Server Side Rendering 의 약자로, 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식

SSR(Sever Siding Rendering)

구동 방식은 서버에서 렌더링을 하여 완성된 HTML 파일을 로드해준다.
클라이언트에게 요청을 할때마다 각 상황에 맞는 HTML 을 넘겨주기 때문에 페이지가 여러개이다.

 

- 장점

첫 페이지 로딩 속도가 CSR 에 비해 빠르다.

•  해당 첫 페이지에 해당하는 문서만 브라우저에게 전달하여 브라우저가 렌더링 하기때문에 초기 로딩 속도가 CSR 에 비해 빠르다.

검색엔진최적화(SEO)가 가능하다.

JS 가 다운로드 되는동안 사용자가 무언가를 보고 있을 수 있다.

 

- 단점

초기 로딩 이후 페이지 이동시 속도가 다소 느리다.

•  페이지 이동시마다 클라이언트가 서버에게 필요한 데이터를 요청하고 응답해주는 방식이다 보니 속도가 다소 느리다.

 2. CSR

Client Side Rendering 의 약자로, SSR과 달리 렌더링이 클라이언트 쪽에서 일어나 서버는 요청을 받으면 클라이언트에 HTML 과 JS를 보내준다. 클라이언트는 HTML 과 JS 를 받아 렌더링을 시작한다.

CSR

- 장점

네이티브 앱과 비슷한 빠른 인터렉션을 구현할 수 있다.

•  View 렌더링을 브라우저에게 담당함으로서 서버 트래픽을 감소시키고 사용자에게 빠른 인터렉션을 제공한다.
•  새로고침이 발생하지 않아 사용자가 네이티브 앱과 비슷한 경험이 가능하다.

 

- 단점

첫 페이지 로딩속도가 SSR 에 비해 다소 느리다.

•  서버에 첫 요청시 전체 페이지에 대한 모든 문서 파일을 받다보니 SSR에 비해 로딩 속도가 느리다.

SEO 에 대한 추가 보안 작업이 필요하다.