SSR vs CSR / 서버사이드렌더링 vs 클라이언트 사이드 렌더링

 

 

 

 

SSR

서버가 웹 화면을 그리는 주체가 된다.
관련 프레임워크 ex) Next.js, Flask

Static Sites 방식에 영감을 얻어 SSR방식이 도입된다.
서버에서 필요한 데이터 모두를 가져와서 서버 안에서 html을 만들고,

만들어진 html 파일을 동적으로 제어할 수 있는 소스코드와 함께 클라이언트에 보낸다.
클라이언트로 전달된 html문서는 바로 유저에게 보여줄 수 있게 된다.

 

통신 과정 

사용자가 클라이언트에 요청을 보냄
서버는 리소스를 확인하고 이를 해석하고 변환하는 컴파일링 과정을 통하여 즉시 렌더링 가능한 HTML 파일을 생성
클라이언트에 전달되는 순간 이미 렌더링 될 준비가 되어 있으므로 즉시 렌더링

이때 JS파일은 읽히기 전 이므로 사이트 자체의 조작은 불가능한 상태
클라이언트가 JS파일을 다운받음.
이때 브라우저에서는 사용자의 조작을 기억하고 있음 (클릭, 스크롤 등등)
브라우저가 다운로드된 JS 프레임워크를 실행
JS까지 성공적으로 컴파일링 된 후에는 기억된 사용자 조작이 실행되고, 상호작용 가능한 페이지가 된다.

 

특징

 

초기 로딩 성능: 

SSR은 서버에서 모든 렌더링을 처리하기 때문에 초기 페이지 로딩 시간이 빠르다.

이는 검색 엔진 최적화(SEO)에 유리하다. 검색 엔진이 미리 만들어진 문서를 보고 색인 처리를 하기 쉽기 때문이다.

서버 부하: 

모든 페이지 렌더링 요청이 서버로 직접 가기 때문에 서버 부하가 증가할 수 있다.

TTFB (Time to First Byte): 서버가 HTML을 생성하여 응답하는 데까지 걸리는 시간이 더 길 수 있다.

 

따라서 서 사이드 렌더링의 경우 초기 페이지 로딩 시간은 길지만

이후 다른 페이지로 이동시에는 csr에 비해 로딩 속도가 오래 걸린다.

 

 

CSR

클라이언트가 웹 화면을 그리는 주체가 된다.
모바일의 수요와 환경이 폭발적으로 증가함에 따라 모바일 웹브라우저에 대한 접근과 니즈가 증가하였고,


PC보다 사양이 부족한 모바일 환경에 맞추어 기존과는 다른 접근방식으로 등장한 SPA가 등장하게 되었다.
관련 프레임워크 ex) React.js, Angular.js, Vue.js

 

통신 과정

페이지를 처음 로딩할때 서버는 index.html 파일을 클라이언트에 전달.
전달받은 index.html파일 안에는 어플리케이션에 필요한 자바스크립트의 링크만 존재.
HTML의 빈 부분은 서버로부터 app.js 파일을 다운로드 받게 되는데,

어플리케이션에서 필요한 로직들을 포함하여 프레임워크, 라이브러리도 포함되어 있음

이때 유저는 빈 화면만을 보게됨
다운로드가 완료괸 JS파일이 실행되고, 데이터를 요청하기 위한 API가 호출

이때 사용자들은 대기 화면 (예 : skeleton UI)를 보게됨
서버에서 API 요청에 응답하여 데이터를 전송
클라이언트는 API에서 받아온 데이터를 placeholder 자리에 넣어주고,

상호작용이 가능한 페이지가 된다.

 

특징

브라우저 부하: 

초기 로딩에 필요한 모든 스크립트와 리소스를 클라이언트 측에서 처리하므로

초기 로딩 시간이 길어질 수 있습니다.

SEO 문제: 

검색 엔진이 JavaScript를 실행하여 컨텐츠를 렌더링하는 것이 어려울 수 있어 

SEO에 불리할 수 있습니다. 이는 구글 검색 엔진을 제외한 대부분의 검색 엔진에서 문제가 될 수 있습니다.

사용자 경험: 

초기 로딩이 완료된 후에는 페이지 간 이동이 매우 빠르고 부드럽습니다. 

SPA(Single Page Application)의 장점 중 하나입니다.

캐싱과 오프라인 기능: 서비스 워커와 같은 기술을 사용하여 효과적인 캐싱과 오프라인 경험을 제공할 수 있습니다.

SSR과 CSR의 조합: 최근에는 SSR과 CSR을 적절히 조합하여 사용하는 경우가 많습니다. 예를 들어, 초기 페이지 로드는 SSR로 처리하고, 이후의 동적인 상호 작용은 CSR로 처리하는 방식입니다. 이렇게 하면 초기 로딩 속도와 SEO 최적화의 이점을 SSR에서 얻고, 빠른 페이지 내비게이션과 부드러운 사용자 경험은 CSR에서 얻을 수 있습니다.