3. CSR의 단점
클라이언트 사이드 렌더링(CSR)은 대표적으로 아래와 같은 단점이 있음
1. 낮은 SEO(Search Engine Optimization)
초기 페이지 요청 시 아래의 코드만 가진 HTML을 응답받기 때문에 SEO에 최적화되지 않음
💡
Tip
Next.js가 없을 때 SEO 처리의 대안은 React helmet
index.html
<html lang="en">
<head>
<title>React SPA Example</title>
</head>
<body>
<div id="root"></div>
<script src="main.js"></script>
</body>
</html>결과적으로 검색 엔진 크롤링 봇이 SEO를 위해 인덱싱하는 과정에서 필요한 내용들이 불충분하여 SEO에 불리해짐
→ 기본적으로 검색엔진 봇은 .html만 분석하며, .js 번들까지 다운 받아서 분석하진 않음
또한 컴포넌트의 위계가 깊은 UI를 처리하기 위한 요청이 급증할 경우, 크롤러가 인덱싱할 수 있을만큼 빠르게 렌더링되지 않을 수 있음
2. 느린 초기 페이지 로딩 속도
데이터 fetching, JS를 통한 동적인 렌더링 처리(UI 연산), HTML을 인터랙티브하게 만드는 작업 등 브라우저가 처리해야 할 부분이 점점 늘어나게 되면서,
사용자는 페이지 로딩까지 비어있는 화면을 보는 시간이 길어짐
브라우저의 부담이 증가하기 때문에 사용자 디바이스의 스펙에 따라 렌더링 성능이 저하될 수 있음
이후 새로운 기능이 추가될수록 JS 번들 사이즈는 그만큼 더 커지고, 사용자의 대기 시간도 자연스럽게 더 길어짐
Last updated on