CSR(Client-side Rendering)이란? (+SSR 비교)

🤔 CSR(Client-side Rendering)이란?

Client-side Rendering(CSR)은 웹 페이지의 콘텐츠를 클라이언트(브라우저)에서 렌더링하는 방식이다. 서버에서 HTML, CSS, JavaScript 파일을 클라이언트로 보내고, 클라이언트에서 JavaScript를 실행하여 동적인 웹 페이지를 생성하게 된다. 이로 인해 서버의 부하가 감소하고, 많은 인터랙티브한 기능을 제공할 수 있게 된다. 자주 사용되는 웹 프레임워크로는 React, Angular, Vue.js 등이 있다.

 

😎 장점

✅ 인터랙션 향상

CSR은 사용자 경험(UX) 측면에서 이점을 가지고 있다. 페이지의 동작에 따라 실시간으로 콘텐츠가 변경되어 사용자가 웹사이트를 더 쉽게 이용할 수 있다. 예를 들면, 기존 웹에서 페이지 이동 할 때 생기는 깜빡임같은 것을 어플을 이용하는것 같이 부드럽게 이동함으로써 사용성을 증대시켜준다.

✅ 서버 부하 감소

클라이언트에서 콘텐츠를 렌더링하기 때문에, 서버의 부하가 줄어들고 서버가 더 많은 요청을 처리할 수 있게 된다.

 

😂 단점

✅ SEO 문제

실시간으로 콘텐츠가 생성되기 때문에, 검색 엔진이 페이지의 내용을 제대로 크롤링하기 어려워 SEO에 영향을 줄 수 있다. 하지만 현대 검색 엔진들은 점점 JavaScript를 해석하는 능력이 향상되고 있다. 리액트로 개발 후 light-house를 사용하여 체크해봤을 때 SEO가 0점이 나오는 극단적인 결과는 나오지 않았다.

 

✅ 초기 로딩 속도

초기 로딩과 관련하여 필요한 JavaScript 파일과 CSS 파일을 모두 받아와야 실행해야 하므로 처음 방문하는 사용자의 로딩 속도가 느릴 수 있다. 이로 인해 첫 방문시 사용자는 모든 리소스를 다운로드해야 하며, 완료되기 전까지 화면이 비어 있을 수 있다.

 

클라이언트에서 JavaScript 실행을 통한 페이지 렌더링이 이루어진다. 이 과정에서도 처리 시간이 추가로 소요되어 페이지 로딩 속도가 더욱 느려질 수 있다.

 

하지만, CSR 방식에서 한 번 로딩한 후에는 다음 페이지 이동이나 상호 작용에서 빠른 응답 시간을 제공할 수 있다. 이는 이미 클라이언트에 다운로드된 JavaScript 파일을 활용하므로 서버에 새로운 요청을 보낼 필요가 없기 때문인데 이러한 점 때문에 CSR은 초기 로딩 속도가 느리지만 이후의 동작에서 빠른 반응성을 제공하여 사용자 경험을 향상시킬 수 있다. 이 점을 고려하여 프로젝트에 맞는 최적의 렌더링 전략을 선택하면 좋을거 같다.

 

✅ 자원 사용 증가

클라이언트에서 렌더링을 수행하기 때문에 사용자의 기기에 따라 성능 저하가 발생할 수 있다. 저사양 또는 구형 기기에서는 속도 문제가 있을 수 있다.

 

💪 단점을 극복하기 위해 생긴 SSR?!

먼저 SPA(Single Page Application)에 대해 간단히 얘기하자면, SPA(Single Page Application)는 CSR(Client-side Rendering)만을 사용하여 프론트엔드에서 렌더링되는 방식이다. SPA는 서버에서 전체 페이지가 아닌 필요한 데이터만 전송받아 화면을 구성하기 때문에 페이지 이동간의 로딩 시간이 짧아지고, 빠른 인터페이스를 제공한다.

 

하지만, 위에 알아본 바와 같이 CSR 기반의 SPA에서는 페이지의 초기 로딩속도가 느리다는 단점이 있다. 이러한 초기 로딩속도 문제를 해결하기 위해 SSR(Server-side Rendering)을 사용할 수 있다. SSR을 사용하면 서버에서 해당 페이지의 HTML, CSS 및 JavaScript를 렌더링하고, 최종 HTML 코드를 클라이언트에 제공한다. 이를 통해 초기 로딩속도가 개선되고, 검색 엔진 최적화(SEO) 또한 가능합니다. 또한, SPA에서는 일반적으로 사용자 인증(Authentication)과 같은 보안 기능을 처리하기 위해 API를 호출하는데, CSR만 사용할 경우 세션 관리에 대한 처리가 복잡해지는 단점이 있다. 이를 해결하기 위해서도 SSR을 사용하여 서버에서 세션 관리 등을 처리할 수 있다.(Next.js를 예를 들자면 next-auth를 사용할 경우 너무나 쉽게 기능 및 토큰관리를 할 수 있다.) 따라서, SPA에서는 SSR을 이용하여 초기 로딩 속도 개선과 검색 엔진 최적화, 보안 기능 처리 등을 수행하여 사용자 경험을 개선할 수 있다. 단, SSR을 사용할 때는 서버의 부하가 높아질 수 있으므로, 서버의 성능과 부하를 고려해야 한다.

👀 예시

✅ CSR이 적합한 사이트

소셜 미디어 플랫폼 소셜 미디어 플랫폼(예: Facebook)은 사용자 간의 상호작용이 많고 웹 페이지의 콘텐츠가 동적으로 변경되는 경우가 많다. 사용자가 플랫폼 내에서 게시물을 작성, 좋아요, 댓글을 달거나 페이지를 탐색할 때마다 페이지가 실시간으로 업데이트되어야 한다. 이렇게 사용자 간의 상호작용 및 웹 페이지의 내용이 자주 바뀌며 초기 로딩 속도와 SEO 문제가 상대적으로 덜 중요한 경우, 사용자 경험(UX)를 중요시하는 프로젝트  사이트에서는 CSR(Client-side Rendering)이 적합하다.

 

CSR을 사용하면 빠른 상호작용을 제공하고 서버 부하를 줄이는 동시에 사용자 경험을 향상시킬 수 있다. 물론 페이지 로딩 시간과 SEO의 문제가 있지만, 이런 플랫폼은 대개 이미 로그인된 사용자를 위한 서비스이기 때문에 검색 엔진에 크롤링되는 것은 덜 중요하며, 초기 로딩 속도의 문제는 적절한 최적화를 통해 완화할 수 있어 사용하기 적합해 보인다.

 

✅ SSR이 적합한 사이트

쇼핑몰 웹사이트 쇼핑몰 웹사이트(예: 아마존)의 경우 사용자들이 상품 정보를 검색하고 상품페이지에 접속하여 결제를 진행한다. 상품페이지를 네비게이션할 때마다 빠른 로딩 속도가 필요하며, 상품 검색 결과의 SEO 최적화가 매우 중요한 요소다. 이 경우에는 CSR이 불리할 수 있다 생각한다. 초기 로딩 속도의 문제로 사용자가 웹 사이트를 사용하는 동안 불편함을 느낄 수 있으며, SEO 문제로 검색 엔진 최적화가 어려워져 웹사이트를 찾아주는 고객의 수가 줄어들 수 있기 때문이다.

 

이런 웹사이트에서는 SSR(Server-side Rendering) 방식을 사용하여 검색 엔진이 쉽게 크롤링할 수 있는 페이지를 생성하고 최적의 페이지 로딩 속도를 제공하는 것이 더 적합할 수 있다고 생각한다.

 

✨ 결론

CSR은 인터랙티브한 웹사이트를 만들기에 적합한 방식이지만, SEO와 초기 로딩 속도에 주의해야 한다. 웹사이트의 목적과 필요성에 따라 SSR(Server-side Rendering)과 같은 다른 렌더링 방식과 함께 고려하며 적절한 기술을 선택하는 것이 중요합니다.