SSR vs CSR 알아보기

게시 2022/10/20

By 7 분읽는 시간

SPA & MPA

SPA(Single Page Application) : 하나의 페이지로 구성된 Web 어플리케이션으로 어플리케이션을 실행할 때 헤더는 고정되어 있고 하위의 요소들이 변경되는 것
MPA(Multi Page Application) : 탭을 이동할때마다 서버로부터 새로운 HTML을 받아 새롭게 렌더링하는 전통적인 방식

AJAX의 등장 이후 SPA가 유행하기 시작함

MPA의 단점

매번 새로운 HTML을 받아온다.
탭이나 화면 전환신 깜빡임 현상

SPA & MPA의 방식

SPA

SPA는 일방적으로 SSR방식을 사용한다.

웹 어플리케이션의 필요한 정적 리소스를 초반에 한번에 받아오고 이후 새로운 요청이 있을때마다 필요한 데이터만 전달을 받아서 클라이언트에서 페이지를 갱신하기 때문에 CSR방식을 사용

React, Vue, Angular 의 경우 CSR

MPA

MPA는 일방적으로 SSR방식을 사용

MPA는 새로운 요청이 있을때 마다 서버에서 이미 렌더링된 정적리소스를 받기 때문에 SSR방식을 사용

PHP, JSP의 경우 SSR

❗️SPA & MPA 의 주의 사항

CSR과 SSR은 페이지를 얼마나 보내느냐와 렌더링을 어디서 하느냐에 따라 달라지는 개념이므로 같은 개념은 아니다

CSR (Client Side Rendering)

클라이언트 측에서 렌더링하는 방식

CSR의 동작 방식

유저의 사이트 방문

클라이언트가 서버에 요청

서버가 클라이언트에 빈 뼈대만 있는 HTML을 응답

클라이언트가 연결된 JS링크를 통해 JS 파일을 받는다.

클라이언트는 응답받은 JS를 통해 동적 페이지를 생성한다

CSR의 특징

CSR의 경우 JS를 다운로드 받고 동적 DOM 생성에 시간이 걸리기 때문에 초기 로딩속도가 느리다. 초기에만 느리고 이후에 로딩속도가 빠르다.
서버가 빈 뼈대인 HTML 만 넘겨주면 되므로 서버측의 부하가 적다.
클라이언트측에서 연산 라우팅등을 직접 처리하므로 반응속도가 빠르다.
TTI 와 TTV 가 동일하다.

SEO에서는 손해인 CSR

웹 크롤러는 브라우저들이 가지는 HTML을 통해 검생가능 색인을 만든다. CSR에서 HTML을 크롤링 하다면 색인할 컨텐츠가 존재하지 않고 빈 깡통 HTML 페이지만 가지고 있게 된다.

때문에 검색엔진 최적화에 불리하다.

SSR (Server Side Rendering)

서버 측에서 렌더링을 하는 방식

SSR의 동작 방식

유저의 사이트 방문

클라이언트가 서버에 요청

서버에서는 클라이언트에 넘겨줄 페이지에 필요한 데이터를 삽입, CSS를 적용하여, 렌더링된 HTML, JS 코드를 응답으로 전달

클라이언트는 전달 받은 HTML 을 렌더링

이후 클라이언트는 전달 받은 JS를 렌더링한 HTML을 연결 한다.

SSR의 특징

서버에서 모든 데이터가 담긴채로 전달하기에 SEO에 유리하다
JS를 연결하기 전에 HTML로 렌더링 형태가 먼저 나오기 때문에 초기 구동 속도가 빠름
형태가 나온다고 해서 JS가 연결되지는 않았기 때문에 버튼클릭과 같은 동작은 불가능한 단점이 생긴다.
TTI 와 TTV 와 차이가 생긴다.

SSG(Static Site Generate)

Static Rendering이라고도 함, 서버측에서 HTML을 보내준다는 점을 SSR과 동일하지만, SSR은 요청시 서버에서 HTML을 하는 형식이기에, 데이터가 달라져서 미리 만들기 어려운 페이지에 적합, SSG는 보내줄 페이지들을 미리 만들어두고 요청시에 해당 페이지를 응답하는 형식 캐싱해두기 좋은 페이지 쪽에 사용하기 적합함

CSR과 SSR의 장단점

CSR

CSR 장점
- 화면 깜빡임 없음
- 초기 로딩이후 구동 속도가 빠름
- TTI 와 TTV의 차이가 없음
- 서버 부하가 적음
CSR 단점
- 초기 로딩속도가 느림
- SEO에 불리함

SSR

SSR 장점
- 초기 구동 속도가 빠름
- SEO에 유리함
SSR 단점
- 화면깜빡임 발생
- TTI 와 TTV 가 차이가 생긴다.
- 서버 부하

CSR 단점 보완 방법

code splitting, tree-shaking, chunk 분리를 통해 초기 로딩 속도 보완
pre-rendering을 통해 사전에 HTML을 미리 만들어 SEO에 불리한점 해결
CSR을 SSR / SSG 같이 사용할것

CSR + SSR / SSG 같이 사용하는 법

프레임 워크 없이 사용하기

프레임워크 없이 하려면 NEST.JS를 이용하여 구현해주면되지만, 초기설정 및 구동 세팅이 복잡함

프레임워크 사용하기
React의 경우)
- NEXT.js 를 사용하여 페이지별로 SSR 이나 SSG 선택 가능
- Gatsby는 SSG에 최적화된 리액트 기반 프레임어크 ( SSR,CSR, 등 다양한 프레임워크 지원)
Vue 의 경우)
- NUXT를 사용하면된다.
단점) CSR에 비해 코드 복잡도 가 올라간다.

참고

우아한Tech https://www.youtube.com/watch?v=YuqB8D6eCKE

드림코딩 https://www.youtube.com/watch?v=iZ9csAfU5Os

얄팍한 코딩사전 https://www.youtube.com/watch?v=5ILR9Vd_Vos

개념