[ FrontEnd ] CSR 이란?

CSR

CSR (Client-Side Rendering, 클라이언트 사이드 렌더링)은 웹 애플리케이션의 렌더링 작업이 클라이언트 측에서 이루어지는 방식입니다.

이 방식은 웹 페이지의 내용을 서버에서 렌더링하지 않고, 클라이언트(일반적으로 웹 브라우저)에서 JavaScript를 실행하여 동적으로 페이지를 구성하고 렌더링합니다.

CSR의 장단점

장점:

• 서버 부하 감소
  • 렌더링 작업이 클라이언트에서 수행되므로 서버의 부하가 줄어듭니다.
• 사용자 경험 개선
  • 한 번 페이지가 로드되면, 클라이언트에서 즉시 페이지의 내용을 변경할 수 있어 사용자 경험이 개선됩니다. 페이지 전환 시 서버에 추가 요청을 보낼 필요가 없으므로 빠른 응답이 가능합니다.

    단점

• 초기 페이지 로드 시간이 길어질 수 있습니다
  • 클라이언트에서 JavaScript를 다운로드하고 실행해야 하기 때문에 초기 페이지 로드 시간이 길어질 수 있습니다.
• SEO 문제
  • 검색 엔진 크롤러가 JavaScript를 완벽하게 실행하지 못하는 경우, 동적으로 생성된 페이지의 내용이 색인화되지 않을 수 있습니다. 이로 인해 SEO에 문제가 발생할 수 있습니다.
• 클라이언트의 리소스 사용 증가
  • 렌더링 작업이 클라이언트에서 이루어지므로, 사용자의 장치의 CPU와 메모리 사용량이 증가할 수 있습니다. 이는 저성능 장치에서 성능 저하로 이어질 수 있습니다.

React, Angular, Vue 등의 프런트엔드 프레임워크를 사용하면, CSR 방식의 웹 애플리케이션을 쉽게 구축할 수 있습니다. 이러한 프레임워크는 데이터 바인딩, 컴포넌트 기반 아키텍처, 라우팅 등 다양한 기능을 제공하여 웹 애플리케이션 개발을 쉽게 만들어 줍니다.

CSR과 SSR을 혼합하여 사용하는 방법도 있습니다. 이를 Universal (Isomorphic) 애플리케이션 이라고 하며, 초기 페이지 로드에는 SSR을 사용하고 이후의 동작에는 CSR을 사용하여 사용자 경험과 SEO 문제를 모두 해결할 수 있습니다. Next.js와 Nuxt.js 등의 프레임워크는 이러한 방식을 쉽게 구현할 수 있습니다.

이렇게 SSR과 CSR을 함께 사용하면 웹 애플리케이션의 초기 로딩 시간을 최소화하면서도 동적인 사용자 인터페이스를 제공할 수 있어 좋은 사용자 경험을 만들 수 있으며, 또한, 초기 페이지 로드 시 서버에서 렌더링된 완전한 HTML을 제공함으로써 검색 엔진 최적화(SEO)에도 유리합니다.