서버 사이드 렌더링 VS 클라이언트 사이드 렌더링 비교

서버 사이드 렌더링,클라이언트 사이드 렌더링에 대한 이해 없이 개발을 시작하는 경우가 많다.

무거운 페이지가 아니라면 피부로 느낄 정도는 아닐 수 있다고 개인적으로 생각한다.

하지만 전체적인 구성으로 봤을 때는 중요한 개념이다.

특히나 속도를 중요하게 여기는 사용자나, 속도는 괜찮지만 다른 목적이 더 중요하게 여긴다면, 이 두개념의 차이점을 알고 개발언어를 선택하는 것이 좋다.

서버 사이드 렌더링

서버 사이드 렌더링(SSR)은 ‘Server-Side Rendering’라는 의미로,

웹 페이지가 서버 측에서 렌더링되고 완전히 형성된 HTML을 클라이언트, 즉 웹 브라우저에 전송하는 방식을 말한다.

이 방법은 사용자가 웹 페이지에 접근할 때 서버가 즉시 페이지의 모든 콘텐츠를 생성하고, 브라우저는 해당 HTML을 받아서 보는 방식이다.

이렇기 때문에 서버 사이드 렌더링의 경우는 초기 로딩 시간이 개선에 가장 우수하다. 서버에서 완전히 렌더링 된 페이지를 사용자에게 제공하기 때문이다.

스크립트 실행이 많거나 렌더링이 많은 무거운 사이트들은 서버 사이드 렌더링을 선호하는 경우가 많다.

그리고 검색 엔진(SEO)에 최적화되어 있다. 서버에서 렌더링된 HTML 콘텐츠의 경우 인덱싱이 잘 되는 경우가 많다.

마지막으로 호환성 개선 부분에서도 큰 장점을 가지고 있다. 클라이언트 측 스크립트 실행이 제한된 환경에서도 페이지가 올바르게 표시되어 부분의 오류로 페이지가 동작하는 경우를 막을 수 있다.

하지만 서버 사이드 렌더링의 경우에도 단점은 존재한다.

모든 렌더링이 서버에서 담당하기 때문에 서버 부하가 증가할 수 있다. 이는 서버에 전적으로 렌더링을 의존하기 때문에 스펙이 좋지 않은 서버를 사용하면 서버 사이드 렌더링의 이점을 볼 수 없다.

또한 서버에 의존도가 높아 전체적인 아키텍처와 코드 구조의 복잡성을 가질 수 있다. 그리고 클라이언트와 서버 간의 상태 동기화가 필요할 수 있으므로, 상태 관리는 서버 사이드 렌더링 환경에서 더 어려워질 수 있다.

클라이언트 사이드 렌더링

클라이언트 사이드 렌더링(CSR)은 ‘Client-Side Rendering’의 약자로, 웹 페이지가 클라이언트, 즉 웹 브라우저 측에서 렌더링되는 방식을 의미한다.

이 방법은 웹 페이지의 기본 HTML 구조는 간단하게 유지되고, 페이지 콘텐츠와 상호작용은 JavaScript를 통해 클라이언트 측에서 동적으로 처리됩니다.

쉽게 말하자면 클라이언트 사이드 렌더링 방식은 서버가 필요없이 오로지 코드로만 동작하는 방식이라고 생각하면 된다.

보통의 경우 처음 개발을 접하는 사람들은 클라이언트 사이드 렌더링 방식을 이용한다.

가볍게 빠르고 직관적으로 결과값을 볼 수 있어서 초기 개발에 입문하는 사람들이 처음 접해볼 것이다.

클라이언트 사이드 렌더링 방식의 특징을 보자면, 동적인 이터랙션의 구조이다.

클라이언트 측에서 렌더링이 이루어지므로, 사용자와의 상호작용이 빠르고 동적으로 처리된다. 애니메이션이나 실시간 업데이트 같은 동적 기능이 강조된다.

주로 단일 페이지 애플리케이션(SPA)에서 사용되는데, 이는 사용자가 페이지 간 이동할 때 전체 페이지를 다시 로드할 필요 없이 부분적으로 업데이트가 가능한 웹 애플리케이션이다.

클라이언트 사이드 렌더링은 서버를 사용하지 않기 때문에 서버 측의 부하가 감소하고 서버 인프라를 더 효율적으로 사용할 수 있다.

사용분야

각 기능들은 장단점이 명확하기 때문에 목적에 따라 그 쓰임이 다르다. 목적에 맞게 사용한다면 좀 더 효율성 있는 개발 결과물을 만들어 낼 수 있다.

서버 사이드 렌더링(SSR)

검색 엔진(SEO)와 사용자에게 페이지를 빠르게 제공할 수 있는 분야에서 사용된다.

블로그와 뉴스 웹사이트, 그리고 전자상거래에도 많은 사용이된다.

그리고 기업용 사이트의 경우도 검색 엔진 최적화와 페이지 속도에 중점을 두어야 하니 공식 웹사이트, 랜딩 페이지, 포트폴리오 사이트 등에서도 많이 사용되고 있다.

클라이언트 사이드 렌더링(CSR)

주로 단일 페이지에 클라리언트 사이드 렌더링에 사용된다.

예시로 Gmail, Trello, Slack과 같이 페이지 전체를 다시 로드하지 않고도 동적이고 빠른 사용자에게 정보를 제공하기 위함이다.

동적 기능과 실시간 데이터 업데이트가 중요한 곳에서도 사용된다. 주로 실시간 채팅 앱이나 대시보드가 있다.