Google 如何在索引過程中處理 JavaScript：Vercel 深度解析

### Introduction: The Tension Between Modern Web Development and SEO In modern web development, JavaScript (used in frameworks like React, Vue, and Next.js) has become the cornerstone of building dynamic user experiences. However, this creates challenges for search engine optimization (SEO). In this article, Vercel provides an in-depth analysis of the underlying mechanisms by which Google's search crawler (Googlebot) processes JavaScript during indexing, helping developers understand how to optimize their sites for the best possible search rankings. ### Googlebot's "Two-Stage Indexing" Mechanism Google's processing of JavaScript-driven websites is not instantaneous — it unfolds in two main phases: 1. **Phase One: Crawl & Initial Indexing** Googlebot first downloads the page's initial HTML file. If the site uses pure client-side rendering (CSR), this HTML typically contains nothing more than an empty ` ` tag and links to JavaScript scripts. Googlebot will index this "pre-JS-execution" initial HTML first. 2. **Phase Two: Rendering & Final Indexing** Because executing JavaScript requires significant computational resources, Googlebot places the page into a "Rendering Queue." Only when Google's Web Rendering Service (WRS, based on the latest version of headless Chrome) has available capacity does it execute the JavaScript, process API requests, and generate the full DOM. Googlebot then performs a second round of indexing on the fully rendered content. ### The Challenges of JavaScript Indexing Although Google claims its rendering capability is highly robust, JavaScript-heavy sites still face the following bottlenecks in practice: * **Rendering Delay**: After a page enters the rendering queue, it may take hours or even days to be rendered. For news sites, e-commerce platforms, and other content that needs to be updated in real time, this delay can severely impact search visibility. * **Render Budget & Timeouts**: Googlebot's time for executing JavaScript is limited. If a site's JavaScript files are too large, take too long to execute, or if API responses are too slow, Googlebot may stop rendering before all content has loaded, causing key content to go unindexed. * **Robots.txt Blocking**: If developers accidentally block critical JavaScript files or API endpoints in `robots.txt`, Googlebot will be unable to render the page correctly. ### Developer Best Practices To ensure that site content can be indexed by Google quickly and completely, Vercel recommends the following strategies: 1. **Use Server-Side Rendering (SSR) or Static Site Generation (SSG)**: By using frontend frameworks like Next.js to pre-generate complete HTML on the server side or at build time, Googlebot can immediately read and index all content during Phase One, completely bypassing the rendering queue delay. 2. **Optimize JavaScript Performance**: Reduce JS bundle sizes, avoid long-running scripts that block rendering, and ensure strong Core Web Vitals scores. 3. **Ensure Resource Accessibility**: Review `robots.txt` to confirm that Googlebot can freely access all CSS, JS files, and backend APIs used to render the page.