SSR과 CSR은 무엇인가?

SSR과 CSR은 웹 페이지의 렌더링 방식에 대한 두 가지 주요 접근 방식이다.

웹 페이지를 렌더링 할 때는 서버에서 클라이언트(브라우저)로 리소스를 전달하고, 클라이언트는 해당 리소스로 페이지를 표시한다.

 

 

브라우저 렌더링 과정

렌더링이란 웹 페이지를 사용자에게 표시하는 과정이다.

기본적으로 다음과 같은 순서로 렌더링 된다.

1. HTML 파싱

2. CSS 파싱

3. JavaScript 실행

4. 렌더트리 구축

5. 레이아웃

6. 페인팅

 

SSR과 CSR은 1번 HTML 파싱과 3번 JavaScript 실행 부분에서 차이가 발생한다.

 

브라우저 렌더링 과정에 대해 자세히 살펴보고 싶으면 다음 포스팅을 참고하면 된다.

https://duyaan.tistory.com/84

브라우저 렌더링

 

 

SSR (Server-Side Rendering)

SSR은 말 그대로 서버 측에서 렌더링을 진행한다는 것이다.

 

브라우저 렌더링 과정의 1번은 HTML 파싱인데, 이 과정에서는 클라이언트가 HTTP를 요청하고, 서버에서 HTML을 응답한다.

이때 SSR 방식을 사용하게 되면, 서버에서 보내는 HTML은 클라이언트가 요청한 페이지에 필요한 모든 데이터를 담고 있는 HTML인 것이다.

즉, 서버 측에서 미리 HTML을 렌더링 하여 클라이언트에게 보내게 된다.

 

SSR 방식의 장점

1. 초기 로딩 시간이 빠르다. 서버에서 미리 HTML을 렌더링 하기 때문에 클라이언트는 즉시 HTML을 표시할 수 있다.

2. SEO에 최적화되어 있다. 검색 엔진이 완전한 HTML을 인덱싱할 수 있어 SEO에 유리하다. 즉, 네이버나 구글 같은 검색 사이트에 노출되기 쉽기에 효과적으로 사용자를 모을 수 있다.

 

SSR 방식의 단점

1. 서버 부하가 증가한다. 서버가 모든 페이지를 렌더링해야 하므로 서버의 리소스 사용량이 증가한다.

2. 사용자가 새로운 페이지를 요청할 때마다 서버는 매번 새로운 HTML을 렌더링해야 하므로, 사용자의 페이지 이동이 조금 느려질 수 있다.

 

 

CSR (Client-Side Rendering)

CSR은 말 그대로 클라이언트 측에서 렌더링을 진행한다는 것이다.

 

SSR 방식에서는 브라우저 렌더링 과정의 1번에서 서버로부터 완전한 HTML을 받는다면,

CSR 방식에서는 최소한의 HTML 골격만 받는다.

이후, 클라이언트가 원하는 페이지의 데이터들은 브라우저 렌더링 과정의 3번에서 진행한다.

JavaScript를 실행하여 필요한 데이터를 서버에서 가져오고, 이 데이터를 사용해 페이지의 나머지 콘텐츠를 생성하고 렌더링 한다.

 

즉, 서버에서는 비어 있는 HTML을 받고, 이후 클라이언트 측에서 JavaScript를 이용해 화면을 표시한다.

 

CSR 방식의 장점

1. 페이지 간 이동이 빠르다. 초기 로딩에서 모든 리소스를 받기 때문에 페이지 간 이동 시 서버 요청 없이 자바스크립트로 처리할 수 있다.

2. 서버 부하가 감소한다. 클라이언트에서 대부분의 렌더링이 이루어지므로 서버 부하가 감소한다.

 

CSR 방식의 단점

1. 초기 로딩이 느리다. SSR 방식에 비하여 자바스크립트의 용량이 크기 때문에 초기에 페이지를 표시하는 과정이 조금 느릴 수 있다.

2. SSR보다 SEO에 최적화되기 어렵다. 자바스크립트를 실행하지 않으면 검색 엔진은 제대로 된 콘텐츠를 인덱싱 하지 못할 수 있다.

 

 

 

MPA, SPA와 SSR, CSR

https://duyaan.tistory.com/90

MPA와 SPA가 무엇인가?

 

일반적으로 MPA(Multi Page Application)는 SSR 방식을 사용하고, SPA(Single Page Application)는 CSR 방식을 사용한다.

MPA는 각 페이지마다 HTML을 만들기에 SSR 방식이 적합하며, SPA는 하나의 HTML로 처리하기 때문에 CSR 방식이 적합하다.

하지만, MPA이지만 CSR 방식을 사용하는 경우도 있으며 SPA이지만 SSR 방식을 사용하는 경우도 있다.

 

 

 

참고 자료

[간단정리] CSR vs SSR 특징 및 차이

https://hahahoho5915.tistory.com/52

이제는 알아야겠다! CSR과 SSR의 차이점과 장단점 (SPA, MPA, SSG, Universal Rendering 까지)

https://dev-ellachoi.tistory.com/28

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

https://velog.io/@jhyun_k/서버사이드렌더링-vs-클라이언트-사이드렌더링-SSR과-CSR

 

 

 

 

 

글 내용 중, 잘못됐거나 더 알아야 하는 지식이 있다면 댓글로 남겨주시면 감사하겠습니다!

모두 좋은 하루 보내세요:)