CSR

Client Side Rendering
렌더링 주체가 클라이언트인 렌더링 기법
CSR, SSG, ISR과 반대로 빌드시에 Javascript가 담긴 html을 만들어 클라이언트가 요청할 때 보내는 것이 아니라, 빌드시에 비어있는 html과 자바스크립트 번들파일을 생성해 클라이언트(브라우저)에게 전달하고 전달받은 html과 자바스크립트 번들파일을 합쳐 렌더링하는 기법이다.

특징

• 동적으로 페이지를 렌더링한다.
• interaction(input, button onClick 등)이 일어나는 부분을 처리할 수 있다.
• CSR과 반대로 CSR은 서버로 다시 접근을 하지 않아도 되기 때문에 속도가 빠르다.
• 첫 페이지 로딩시 TTV가 길 수 있다.
• 처음 비어있는 html을 받고 Javascript를 조합하는데까지 SEO에 불리하다.

예시

• 이메일 서비스
  - 페이지 로딩 시 최소한의 HTML/JS만 받아온 뒤, 클라이언트 측 스크립트가 이메일 목록과 본문을 동적으로 불러온다.
  - 새로운 메일이 오면 전체 페이지 새로고침 없이 즉시 반영되어 빠르고 부드러운 interaction이 가능하다.
  - 한 번 진입하면 리프레시 없이 다양한 기능을 수행할 수 있어 사용자 경험이 크게 향상된다.
  
• 온라인 쇼핑몰
  - 최초에 최소한의 HTML/JS만 받아오고, 상품 목록과 상세 정보는 API로 동적으로 불러온다.
  - 검색, 필터링, 장바구니 업데이트 등의 인터랙션이 전체 페이지 새로고침 없이 실시간으로 이루어져 빠른 반응을 제공한다.
  - 이 방식은 실제 쇼핑 환경에서 부드러운 사용자 경험과 즉각적인 피드백을 가능하게한다.