Rendering

01 / Rendering

Rendering is the process of turning HTML, CSS, and JavaScript into the page a visitor sees. On JavaScript websites, the HTML the server sends can be very different from the DOM after scripts run, and search engines and AI crawlers only benefit from content they can actually render.

Earlier lessons covered crawling and indexing. This lesson adds the missing step between them: how Googlebot uses the Web Rendering Service, how client-side rendering, server-side rendering, static site generation, and hydration differ, and how to compare raw HTML with rendered HTML during an audit.

1. Raw HTML versus rendered HTML

Every JavaScript audit starts with two versions of the same URL:

<!-- Raw HTML from a client-side rendered app -->
<body>
  <div id="root"></div>
  <script src="/static/js/main.4f2a.js"></script>
</body>

In this example the raw HTML contains no heading, no text, and no links. Everything depends on the JavaScript bundle executing successfully.

2. How Google renders JavaScript

Google processes JavaScript pages in three phases: crawling, rendering, and indexing.

1. CrawlGooglebot fetches the URL and reads the raw HTML. Links found in the raw HTML can be queued immediately.
2. Render queueThe page waits for the Web Rendering Service, which uses an evergreen version of Chromium.
3. RenderThe service executes JavaScript, loads resources that are not blocked by robots.txt, and builds the DOM.
4. IndexGoogle indexes the rendered content and extracts any new links for crawling.

Rendering usually happens quickly, but it is still an extra step with limits. The renderer does not click buttons, scroll like a user, or keep state between page loads. Resources blocked in robots.txt cannot be loaded, and scripts that time out or throw errors can leave the page empty.

3. Rendering strategies

Frameworks such as Next.js, Nuxt, SvelteKit, Astro, and Angular Universal support SSR or SSG. A React or Vue single-page application without them usually relies on CSR.

4. Rendering costs and failures

5. Comparing raw and rendered versions

The most useful JavaScript SEO check is a side by side comparison of the key elements in each version.

6. Rendering and AI crawlers

Most AI crawlers, including those used to train models and fetch pages for answers, read the raw HTML and do not execute JavaScript. A client-side rendered page may rank in Google while being blank to these systems. Serving meaningful HTML from the server is the most reliable way to be understood by both. See checking crawlability for Google, Bing, and AI bots and why AI agents are asking for markdown.

7. Testing rendering in SiteAuditLint

1. Crawl without renderingRecord the raw HTML signals for every URL.
2. Crawl with JavaScript renderingEnable rendering in the crawl settings and repeat the crawl.
3. Compare key elementsLook for titles, headings, canonicals, and links that only exist after rendering.
4. Check resource errorsReview blocked or failing scripts and API calls.
5. Confirm in Search ConsoleUse URL Inspection to view Google's rendered HTML for sample pages.

The JavaScript rendering guide explains the rendering options, wait times, and when to use them.

8. Practical exercise: Compare five templates

Choose five page templates, such as the homepage, a category, a product or article, a blog listing, and a landing page. For each one, compare the raw and rendered HTML.

Key takeaways

• Raw HTML is what the server sends. Rendered HTML is what exists after JavaScript runs.
• Google crawls, renders, then indexes, so JavaScript-only content depends on an extra step.
• SSR and SSG put content in the raw HTML. CSR relies on successful rendering.
• Blocked resources, script errors, and slow APIs cause rendering failures.
• Many AI crawlers do not execute JavaScript, so server-rendered content matters for AI visibility.
• Compare raw and rendered versions of each template during an audit.

Knowledge check

Next, learn how JavaScript affects link discovery in the JavaScript links lesson, or review the guide to website crawlers.