Server-Side Rendering (SSR): Why It Matters for AI Search

Connor Lahey

Definition

Server-side rendering (SSR)Server-side rendering (SSR) means the server builds a page's full HTML before sending it, so the content is there in the first response. With client-side rendering (CSR), the browser gets a near-empty page and JavaScript builds the content afterward. Crawlers that don't run JavaScript, including most AI crawlers, see only what's in that first response.

How Searchable measures this

Searchable's page audits crawl each page in your sitemap and fail a page with almost no readable text instead of scoring its markup, and flag pages that block crawlers. The AI Crawlers view then shows which AI bots request those pages, so you can spot content that bots fetch but can't read.

How server-side rendering works

When a browser or crawler requests a server-rendered page, the server runs the page's code and sends back finished HTML. Everything a reader sees is in that first response. JavaScript then loads to make the page interactive, a step called hydration.

With client-side rendering, the server sends a small HTML shell and a JavaScript bundle. The browser then runs the script to build the content. A person sees the same page either way. A crawler that doesn't run the script sees only the shell.

SSR vs CSR vs static generation

There are three common ways to build a page, and modern frameworks let you mix them page by page:

ApproachWhen the HTML is builtWhat a non-JavaScript crawler sees
Server-side rendering (SSR)On the server, for each requestThe full content
Static site generation (SSG)Once, at build timeThe full content
Client-side rendering (CSR)In the browser, after JavaScript runsA mostly empty shell

Static generation is often the simplest choice for content that rarely changes, such as blog posts and glossary pages. SSR suits pages that change often, such as pricing or stock levels.

Why rendering matters for AI crawlers

Google renders JavaScript, so client-side pages can still rank. Most AI crawlers don't. Vercel's analysis of AI crawler traffic found that GPTBot and ClaudeBot fetch JavaScript files but don't execute them.

So a page can look complete to a person and to Google while looking empty to the crawlers that feed ChatGPT and Claude. If the crawler can't read the content, the engine can't retrieve it, and it can't cite it.

Google's AI Overviews and AI Mode use Google's own crawling and rendering, so this problem mostly affects other AI engines.

How to check whether AI crawlers can read your page

Check the raw HTML the server sends:

  1. View the page source. Open View Page Source in your browser and search for a sentence from the page. If it isn't there, it's built by JavaScript. Inspect shows the page after scripts run, so it won't tell you.
  2. Fetch it without JavaScript. Run curl on the URL, or turn off JavaScript in your browser, and check what's left.
  3. Check the content that matters most. Prices and FAQ answers are the kind of detail engines quote. Make sure those are in the HTML, including text inside tabs and accordions.

Server logs help too. A crawler that requests a page and gets a 200 response has still read nothing if the HTML was empty.

How to fix client-side rendered content

The fix depends on how the site is built:

  • Use the framework's server or static rendering. Next.js and Nuxt both support it, often by default.
  • Prerender key pages if the app has to stay client-side, serving finished HTML to crawlers.
  • Move important text out of scripts. Content loaded after the page opens, or hidden in client-only widgets, should be in the initial HTML.

Some sites go further and serve a separate text version to AI crawlers. We describe our own setup in building a dual-served content system for AI crawlers.

Frequently asked questions

Usually, yes. Google can render JavaScript, but rendering can be delayed and can fail. Server-rendered HTML gives every crawler the content on the first request, which is safer for Google and necessary for most AI crawlers.

See how AI engines talk about your brand

Get a free report on where ChatGPT, Perplexity, and Google AI name and cite you.

Get your free visibility report

Related terms

AI crawlersAI crawlers are bots run by AI companies that fetch web pages. Some collect training data for future models, some build the search index an AI engine retrieves from, and some fetch a page on demand when a user asks a question. Each type has its own user agent, so robots.txt can allow one and block another.llms.txtllms.txt is a proposed standard for a markdown file at a website's root (example.com/llms.txt) that summarizes the site and links to its most useful pages for language models. Jeremy Howard of Answer.AI proposed it in September 2024. Google says its search ignores the file, and no other major AI search engine has said it uses one.
Structured dataCode, usually schema.org JSON-LD, that labels what a page contains, such as a product or an FAQ, in a format machines can parse.
AI citationsAI citations are the links an AI engine attaches to its answer to show which web pages the information came from. Each citation credits a specific URL. A brand mention is different: the engine names a company in the text, even when it doesn't link to that company's site.XML sitemapA file that lists the URLs on a site you want search engines to crawl, often with the date each was last changed.Content chunkingContent chunking is the way AI search systems split a web page into smaller passages so each one can be retrieved and quoted on its own. The term also describes writing pages in clear, self-contained sections, so any passage an engine pulls out still makes sense without the rest of the page.

Browse the full AI search glossary