クライアントサイドレンダリング(CSR)
Client-Side Rendering (CSR) is a web development technique where the browser downloads a minimal HTML page and uses JavaScript to render the content and interface dynamically. While this creates a smooth "app-like" feel, it can cause significant SEO challenges if search bots fail to execute JavaScript properly.
The SEO Challenge of JavaScript-Heavy Sites
Many modern sites (React, Vue, Angular) use CSR by default. The problem: when Googlebot requests your page, it gets an empty <div id="root"></div> and must execute JavaScript to see content. If bots don't wait long enough, fail to render, or encounter errors, your pages get indexed as blank. For multilingual sites, this is catastrophic—language versions might never get crawled. Solutions include switching to SSR (Next.js), using Dynamic Rendering (serve pre-rendered HTML to bots), or employing prerendering services like MultiLipi that generate static HTML snapshots for crawlers.
CSR Speed vs. SEO Tradeoffs
現実世界の影響
E-commerce site built with React CSR only
Google indexes 20% of product pages (JS errors)
Massive SEO visibility loss
Add prerendering solution for Googlebot
Bots receive pre-rendered HTML, JS works for users
Indexation jumps to 98%, traffic +250%