[자바스크립트] CSR

CSR(Client-Side Rendering)

• CSR는 웹 애플리케이션의 초기 로딩 시 클라이언트로 모든 필요한 파일(HTML, CSS, JavaScript 등)을
  전달하여 클라이언트에서 렌더링을 처리하는 방식
  
  
• 동작 방식
  1. 초기 요청
     • 사용자가 웹 페이지에 접속하면, 서버는 클라이언트에게 필요한 파일을 제공
     • HTML파일에는 렌더링에 필요한 기본적인 구조와 비어있는 콘텐츠가 포함
  2. 파일 다운로드
     • 클라이언트는 서버로부터 HTML, CSS, JS 파일 등을 다운로드
     • JS 파일은 주로 애플리케이션의 로직과 동적인 데이터 처리를 담당
  3. 렌더링
     • 클라이언트는 JS를 사용하여 다운로드한 파일을 해석
     • DOM(Document Object Model)을 구성하여 화면을 렌더링
     • 데이터 요청이 필요한 경우, AJAX나 API를 통해 서버에 데이터를 요청하고 응답을 화면에 반영
• 장점
  1. 사용자 경험
     
     • 초기 로딩 이후에는 클라이언트에서 데이터 요청과 처리가 이루어지기 때문에,
       페이지 저환시 부드로운 사용자 경험을 제공 가능
  2. 애플리케이션 성능
     
     • 필요한 데이터만 요청하여 가져와서 서버의 부하를 줄일 수 있다.
  3. 개발 용이성
     
     • 클라이언트와 서버의 역할이 분리되어 개발이 용이
     • 프론트엔드와 백엔드 개발자 간의 협업이 수월
• 단점
  1. 초기 로딩 속도
     
     • 초기에 필요한 파일들을 다운로드하고 클라이언트에서 렌더링을
       처리해야 하기 때문에, 초기 로딩 속도가 느릴 수 있다.
  2. SEO (Search Engine Optimization 검색 엔진 최적화) 문제
     
     • CSR은 초기에 비어있는 HTML을 전달하고, 클라이언트에서 동적으로
       콘텐츠를 생성하기 때문에 검색 엔진 최적화에 어려움이 있을 수 있다.
  3. 접근성 문제
     
     • JS를 비활성화한 상태에서는 애플리케이션의 기능을 이용할 수 없는 접근성 문제가 발생할 수 있다.
• 활용
  • 대화형 사용자 경험을 제공하는 실시간 채팅
  • 대규모의 데이터를 처리하거나 다양한 사용자 입력에 따라 동적으로 화면을 업데이트를 하는 경우
  • 대규모의 데이터를 다루거나 네트워크 대역폭이 제한된 환경
  • 네트워크 연결이 불안정한 경우가 많아 필요한 데이터만 요청하여
    데이터 통신이 가능해서 모바일 애플리케이션 개발에 적합
  • 사용자 경험과 동적인 기능에 중점을 둔 웹 애플리케이션에서 주로 사용되며,
    단일 페이지 애플리케이션(SPA)에서 특히 유용