설명
- CSR은 초기 요청 시에 서버로부터 빈 HTML 파일을 받아오고, 그 이후 클라이언트 측에서 JavaScript를 사용하여 동적으로 컨텐츠를 렌더링하는 방식이다.
- 클라이언트 측에서 JavaScript가 실행되어야 페이지가 완전히 렌더링된다.
- SPA를 구현하는 주요 방법 중 하나이다.
- SPA(Single-Page Application) : 클라이언트 측에서 동적으로 페이지를 업데이트하는 방식
장점
- 사용자 경험: 클라이언트 측에서 컨텐츠를 동적으로 렌더링하기 때문에 사용자 경험이 향상될 수 있다.
- 즉, 페이지 전환과 상호작용이 매끄럽게 이루어진다.
- 모든 로직, 데이터 가져오기, 템플릿, 라우팅은 서버가 아닌 클라이언트에서 처리된다.
- 서버의 적은 부담: 서버 측에서는 단순히 정적 파일을 제공하므로 서버 부담이 상대적으로 낮다.
- 캐싱: 이미 스크립트가 캐싱된 경우 인터넷 없이도 해당 CSR 웹 애플리케이션을 실행할 수 있다.
단점
- 초기 로딩 속도: 페이지 초기 요청 시에는 서버로부터 빈 HTML 파일만 전달받고, 이후 JavaScript 파일을 다운로드하고 실행해야 하므로 추가적인 시간이 소요된다.
- 서버에 첫 요청 시 전체 페이지에 대한 모든 문서 파일을 받기 때문에 SSR보다 로딩 속도가 느리다.
- 자바스크립트 번들 크기의 영향을 많이 받기 때문에 적극적인 코드 분할(code splitting)을 고려해야 한다.
- SEO (Search Engine Optimization): 초기 HTML에는 동적으로 생성되는 컨텐츠가 포함되지 않기 때문에, 검색 엔진은 페이지의 내용을 인식하기 어려울 수 있다.
- 포털사이트 검색엔진 크롤러가 웹사이트에 대한 데이터를 제대로 수집하지 못하는 경우가 발생할 수 있다.
- 구글의 검색엔진의 경우, 자바스크립트 엔진이 내장되어 있어 크롤링이 되지만 네이버, 다음의 경우에는 검색엔진이 제대로 크롤링하지 못하기 때문에 sitemap 문서 작성 등 별도의 보완작업이 필요하다.
- 특정 페이지에서 다른 페이지로 변할 경우, 이를 인지시키기 위해 각 페이지에 대한 메타 데이터를 설정해야 한다.