CSR(Client-side Rendering)이란 무었인가?

React를 사용하다 보면 CSR(Client-side Rendering) 에 대해 많이 듣게 된다. 관련된 내용을 알고는 있지만 설명을 할 수 없을 정도의 지식을 가지고 있어 원티드 사전 과제에 CSR에 대해 알아보는 과제가 있어 CSR에 대해 알아보고 장점과 단점을 정리 하려고 한다.

 

CSR이란?

CSR(클라이언트측 렌더링)은 웹 페이지 렌더링이 서버가 아닌 클라이언트의 웹 브라우저에서 주로 처리되는 웹 개발 접근 방식입니다. CSR에서 서버는 주로 필요한 데이터와 자산을 클라이언트에 보내고 클라이언트 측 JavaScript 프레임워크 또는 라이브러리는 HTML을 동적으로 생성하고 브라우저에서 렌더링합니다.

 

CSR의 장점 

• 사용자 경험
  
  • CSR을 통해 시각적으로 매력적인 대화형 사용자 인터페이스를 만들 수 있습니다. 복잡한 애니메이션, 전환 및 시각 효과를 클라이언트 측에서 쉽게 구현하여 부드럽고 매력적인 사용자 경험을 제공할 수 있습니다.
• 코드 재사용성
  • 코드 재사용성이 증가한다. 여러 화면에서 사용하는 UI를 하나의 컴포넌트로 만들어 여러곳에서 사용하게 만들어 줄 수 있다.
• 확장성
  • CSR은 서버에 과도한 부담을 주지 않으면서 많은 양의 데이터를 처리할 수 있습니다. 서버는 주로 데이터 제공에 중점을 두는 반면 렌더링 및 처리의 무거운 작업은 클라이언트의 브라우저에서 수행됩니다.

 

CSR의 단점

• 초기 페이지 로드
  
  • CSR은 페이지를 렌더링하기 전에 다른 자산과 함께 JavaScript 프레임워크 또는 라이브러리를 다운로드해야 합니다. 이 초기 로드 시간은 특히 대규모 애플리케이션의 경우 SSR(서버 측 렌더링)에 비해 더 길 수 있습니다. 감지되는 페이지 로드 속도가 느려지고 잠재적으로 SEO에 영향을 미칠 수 있습니다.
• SEO 문제
  • 검색 엔진 크롤러는 클라이언트가 렌더링한 콘텐츠를 이해하고 인덱싱하는 데 어려움을 겪는 경우가 많습니다. SEO가 중요한 요소인 경우 검색 엔진이 콘텐츠를 적절하게 인덱싱할 수 있도록 서버 측 렌더링 또는 사전 렌더링과 같은 추가 단계가 필요할 수 있습니다.
• 제한된 초기 콘텐츠
  • 콘텐츠가 클라이언트 측에서 동적으로 생성되기 때문에 콘텐츠가 사용자에게 표시되기까지 약간의 지연이 있을 수 있습니다. "흰색 화면" 효과로 알려진 이 지연은 로딩 표시기 또는 스켈레톤 화면을 표시하여 완화할 수 있지만 인지 성능에 여전히 영향을 미칠 수 있습니다.