Server-side renderingSSR

How does server-side rendering work?#

Server-side rendering works by running the page’s code on the server, per request or at build time, so the HTML that arrives already contains the text, links and metadata — instead of an empty shell that JavaScript fills in later in the browser.

In a client-side rendered (CSR) app, the server sends a near-empty HTML document plus a bundle of JavaScript; the browser runs the script, fetches the data and builds the page. A person never notices. A crawler that reads only the first response sees the shell. Server rendering moves that work to the server, and the browser then hydrates the page — attaches the JavaScript that makes it interactive — without changing what the HTML already said.

Frameworks such as Next.js, Nuxt, SvelteKit, Astro and Remix support server rendering or static generation out of the box, and traditional platforms like WordPress and Shopify build HTML on the server. The risk sits mainly with single-page apps built on plain React, Vue or Angular, and with pages that load their main copy through a widget or API call after the page arrives.

Do AI crawlers render JavaScript?#

Most AI crawlers do not render JavaScript: OpenAI’s, Anthropic’s and Perplexity’s bots read the raw HTML response, so text that appears only after scripts run is invisible to them. Googlebot, which also feeds Gemini and AI Overviews, does render JavaScript, and so does Applebot.

In August 2025 Glenn Gabe tested ChatGPT, Claude and Perplexity against client-rendered URLs and all three failed to read them, while server-rendered pages worked. Google hedges too: its own JavaScript guide says server-side or pre-rendering “is still a great idea” because “not all bots can run JavaScript.” See AI crawlers for what each bot is for.

Server-side rendering vs client-side rendering: what's the difference for SEO?#

Client-side rendering asks every crawler to execute JavaScript before it can read the page, while server-side rendering hands over finished HTML. For Google the gap is speed and reliability, because rendering is queued; for most AI engines it is the difference between being readable and not existing.

Googlebot crawls a URL, then queues it for rendering in an evergreen, headless Chromium. Google says a page “may stay on this queue for a few seconds, but it can take longer than that,” and the renderer is stateless: it clears local storage and session data between requests. Copy that depends on a cookie-banner click, a logged-in state or a scroll event may never appear to it.

Two limits apply even to Google. Googlebot fetches only the first 2 MB of a page’s HTML, and bytes past the cut-off are “not fetched… not rendered… not indexed.” And a noindex in the initial HTML can stop rendering entirely, so JavaScript written to remove it may never run.

The practical split: keep interactive widgets client-side if you like, but make sure the server HTML already carries everything a crawler needs — the title tag, meta description, canonical tag, robots meta, the main text, internal links as real <a href> elements, visible dates and any JSON-LD.

How do you check whether a page is server-side rendered?#

Check server-side rendering by fetching the raw HTML the way a non-rendering crawler does — with curl or View Source, not the browser’s inspector — and searching it for a sentence from the page’s main content. If the sentence is missing, AI crawlers can’t see it either.

# What ChatGPT's search crawler receives. Use a real bot user agent:
# a firewall can serve bots something different from browsers.
curl -s -A "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko); compatible; OAI-SearchBot/1.4; +https://openai.com/searchbot" \
  https://yoursite.com/pricing | grep -c "Plans start at"
 
# The same check as Claude's live fetcher
curl -s -A "Claude-User" https://yoursite.com/pricing | grep -c "Plans start at"
 
# 0 = the text is rendered client-side, or a WAF served a challenge

1. Use View Source, not Inspect. The element inspector shows the page after JavaScript ran; view-source: shows what a crawler receives.
2. Disable JavaScript in your browser’s developer tools and reload. What’s left is roughly what a non-rendering bot reads.
3. Compare with Google’s view in Search Console: URL Inspection → View crawled page shows the rendered HTML Googlebot indexed.
4. Test each template, not one page. Blog posts, pricing, docs and comparison pages often take different rendering paths.

Common mistakes with server-side rendering#

The most common server-side rendering mistakes are assuming Google’s rendering covers every engine, serving prerendered pages only to bots, and server-rendering the body while still injecting canonicals, schema and links with JavaScript.

Related terms#

• AI crawlersAI crawlersAutomated bots run by AI companies that fetch web pages for one of three jobs — training models, building an AI search index, or retrieving a page live for a user’s question — and because each job uses its own user agent, each can be allowed or blocked separately.Read the entry
• Technical SEOIndexingThe step in which a search engine processes a crawled page and stores it in its searchable database; only indexed pages can rank, or be retrieved for AI answers built on that index, and being crawled does not guarantee being indexed.Read the entry
• AI crawlersOAI-SearchBotOpenAI’s search crawler, the bot that surfaces websites in ChatGPT search answers, which makes it the OpenAI user agent to allow for ChatGPT visibility — unlike GPTBot, which collects content only for model training.Read the entry
• AI crawlersClaudeBotAnthropic’s crawler for collecting web content that may be used to train Claude models, one of three Anthropic bots alongside Claude-SearchBot, which indexes pages for Claude’s search results, and Claude-User, which fetches pages when a user asks.Read the entry
• AI crawlersPerplexityBotPerplexity’s crawler for indexing web pages so they can be surfaced and cited in Perplexity’s answers — Perplexity says it is not used to train foundation models — while a separate agent, Perplexity-User, fetches pages live when a user asks.Read the entry
• CWVTechnical SEOCore Web VitalsGoogle’s three field metrics for page experience — Largest Contentful Paint for loading, Interaction to Next Paint for responsiveness and Cumulative Layout Shift for visual stability — measured from real Chrome users and used as a modest ranking signal.Read the entry