SSR vs CSR 의 장단점

브라우저 렌더링이란?

브라우저 렌더링이란 웹 브라우저가 웹 서버로부터 받은 데이터와 코드를 사용자의 화면(view)에 보이는 페이지로 변환하는 것이다.

간단히 말해, 렌더링은 웹 페이지가 사용자의 화면에 그려지기까지의 전체 과정을 의미한다.

예를 들어, 크롬 브라우저에 접속해 주소창에 www.naver.com 을 입력한다면 브라우저는 네이버 서버로부터 네이버 웹사이트에 대한 정보를 받아 브라우저 화면에 네이버 홈페이지를 그려주게 되는 것이다.

이러한 렌더링은 SSR(Server-Side Rendering, 서버 사이드 렌더링)과 CSR(Client-Side Rendering, 클라이언트 사이드 렌더링)으로 나누어진다.

서버 사이드 렌더링은 클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식이다. 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면(View)를 만들어 제공하는 것이다. 즉, 서버가 화면(View)을 그리는 주체가 된다.

SEO 최적화: 서버 사이드에서 전체 페이지를 렌더링하기 때문에 검색 엔진이 페이지 내용을 쉽게 인덱싱할 수 있다. 이는 검색 엔진 최적화(SEO)에 매우 유리하다.
초기 로딩 속도: 사용자가 처음 페이지에 접근할 때, 완전히 렌더링된 페이지를 받기 때문에 초기 콘텐츠 표시 속도가 빠릅니다. 이는 사용자 경험을 개선할 수 있다.

서버 부하: 모든 페이지 요청에 대해 서버가 새로운 페이지를 렌더링해야 하므로 서버에 부하가 많이 간다. 이는 고트래픽 상황에서 성능 저하로 이어질 수 있다.
페이지 전환 지연: 사용자가 사이트 내 다른 페이지로 이동할 때마다 새로운 요청이 서버로 가고 완전한 페이지를 다시 로딩해야 하므로 페이지 전환에 시간이 걸릴 수 있다.

웹사이트에 접속하는 순간, 예를 들어 뉴스 웹사이트나 블로그 같은 곳에서, 당신이 볼 수 있는 모든 글, 이미지, 레이아웃은 서버에서 이미 처리되어 완성된 형태로 당신의 웹 브라우저로 전송된다.

웹 브라우저는 받은 데이터를 화면에 표시하기만 하면 된다.

이 방식은 초기에는 빠르게 콘텐츠를 볼 수 있지만, 새로운 페이지로 이동할 때마다 서버에 다시 요청을 보내고 응답을 받아야 하기 때문에 각 페이지 이동마다 로딩 시간이 걸릴 수 있다.

전통적인 웹사이트 구조에서 많이 보이는 방식입니다.

클라이언트 사이드 렌더링은 클라이언트인 브라우저가 렌더링을 처리하는 방식이다. 즉 서버에서 받은 데이터를 통해 브라우저가 화면(View)을 그리는 주체가 되는 것이다.

빠른 페이지 전환: 필요한 데이터만 서버로부터 받아오고 페이지 전환은 클라이언트 사이드에서 처리하기 때문에, 사용자가 사이트 내에서 다른 페이지로 이동할 때 매우 빠르다.
서버 부하 감소: 초기 로드 이후에는 클라이언트 사이드에서 대부분의 작업이 이루어지기 때문에, 서버에 가해지는 부하가 줄어들고 서버 리소스를 절약할 수 있다.

SEO 문제: 클라이언트 사이드에서 콘텐츠가 렌더링되므로 검색 엔진이 페이지의 콘텐츠를 제대로 크롤링하지 못할 수 있어 SEO에 불리할 수 있다.
초기 로딩 지연: 자바스크립트와 필요한 데이터를 모두 로드하고 실행해야 첫 화면이 사용자에게 보여지기 때문에 초기에는 SSR에 비해 느릴 수 있다. 이는 특히 자바스크립트 파일이 크거나 복잡할 때 더욱 두드러진다.

웹 애플리케이션(예: Gmail, Facebook)에 접속할 때 주로 사용된다.

초기에 웹 페이지의 구조와 필요한 자바스크립트 등의 리소스를 로드한 후, 사용자의 상호작용에 따라 필요한 데이터만 서버로부터 요청하고 그 데이터를 바탕으로 클라이언트 측에서 화면을 업데이트한다.

이 방식은 페이지를 전환할 때마다 전체 페이지를 새로 로드할 필요가 없어서 매우 빠른 경험을 제공하지만,

초기 로드에는 SSR보다 더 많은 시간이 소요될 수 있다.

SPA(Single Page Application) 방식의 현대적 웹 애플리케이션에서 자주 볼 수 있는 방식이다.

도메인이란?도메인 모델? (1)	2024.02.29