Server-side rendering and SEO
Your content can be brilliant, but if a search crawler receives a blank HTML shell and a bundle of JavaScript, none of it counts. Rendering strategy - where and when your HTML gets built - quietly decides whether Google sees a finished page or an empty stage. For anything that depends on organic traffic, this is the SEO decision that comes before keywords, links, or content. You can do everything else right and still be invisible if the crawler never sees your words.
The three rendering strategies
- CSR (client-side rendering): the server sends a near-empty HTML file plus a JavaScript bundle. The browser downloads, parses, and executes that JavaScript, which then builds the page. Fast to develop and cheap to host, but the initial HTML - the thing a crawler reads first - is essentially blank.
- SSR (server-side rendering): the server runs your application code and builds full HTML for each request, sending it ready to display. The browser paints it immediately, then "hydrates" it - attaching JavaScript to make it interactive.
- SSG (static site generation): pages are rendered to HTML once, at build time, and served as static files from a CDN. Fastest of all and nearly bulletproof to serve, but content is frozen until the next build and redeploy.
The distinction that matters for SEO is simple: SSR and SSG both hand crawlers complete HTML on the first request. CSR does not. With CSR, the meaningful content only exists after JavaScript runs - and whether that happens reliably, for every crawler, on every page, is out of your hands. That single fact is the root of every problem below. Everything else in this article is a consequence of it.
Why CSR hurts SEO in practice
Google can execute JavaScript, so people assume CSR is fine. In reality it's fragile, and the fragility is the whole problem. Google's indexing happens in two waves: it crawls the raw HTML first, then queues the page for a second, deferred rendering pass where JavaScript actually runs. That second pass can be delayed by days when crawl budget is tight, and if your content only exists after JS executes, it isn't indexed until - and unless - that pass completes.
And Google is the best-case crawler. The wider ecosystem is worse: many social preview bots (the ones that generate the card when someone shares your link), a number of AI crawlers, and Bing in various configurations handle JavaScript poorly or not at all. They see the blank shell and move on.
That fragility shows up as concrete, revenue-affecting symptoms:
- Delayed or inconsistent indexing of new pages - you publish, and nothing appears in search for weeks
- Missing or broken social previews when links are shared, tanking click-through
- Meta tags, canonical URLs, and structured data that never get read because they're injected by JavaScript
- Content that quietly ranks below server-rendered competitors who gave the crawler an easier job
When your rank - and the traffic that pays your bills - depends on it, "usually works" is not a strategy. This is precisely why we lean toward frameworks with first-class server rendering; it's part of the calculus in Next.js vs React and in how to choose a tech stack.
Choosing SSR vs SSG
Both are SEO-friendly - the crawler gets real HTML either way. Pick between them based on how often the content changes and whether it's personalized:
- SSG for content that's stable between deploys - marketing pages, landing pages, documentation, most blog posts (like this one). It's the fastest and cheapest to serve, scales infinitely from a CDN, and has almost no attack surface.
- SSR for content that's personalized or changes constantly - product pages with live inventory and pricing, search and filter results, anything user-specific with a public URL. You pay for a server render on every request, but the content is always fresh.
- ISR (incremental static regeneration), offered by frameworks like Next.js, blends the two: serve fast static HTML, but regenerate individual pages in the background on a schedule or on-demand when the data changes. This is the sweet spot for large content sites and e-commerce catalogs - thousands of pages that update periodically but don't need per-request rendering.
You don't have to pick one strategy for the whole site. The best setup usually mixes all three, chosen per route: static marketing pages, ISR for the product catalog, SSR for search.
It's about more than crawlers
Server rendering also improves the metrics real users feel - and that Google now measures directly. HTML that arrives ready to display produces a faster Largest Contentful Paint and far less layout shift than a page assembled from scratch in the browser after a JavaScript download. Users on slow phones and flaky networks - a large share of the web - feel this most, and they're the ones most likely to bounce from a blank screen.
Since Core Web Vitals are a ranking signal, SSR and SSG help you twice: crawlers see your content, and users get a measurably faster page, which lifts both rankings and conversion. The two goals point the same direction. Our Core Web Vitals guide covers how to measure and hit the thresholds, and if the payload itself is the bottleneck, caching strategies is the next lever.
What about AI search and social sharing?
SEO used to mean Google, and Google alone could eventually run your JavaScript. That's no longer the whole game. A growing share of discovery happens through AI assistants and answer engines that crawl the web to ground their responses, through social platforms generating link previews, and through Bing powering more surfaces than its raw market share suggests.
Many of these crawlers are less capable at JavaScript than Googlebot, not more - they read the raw HTML and stop. That shifts the calculus further toward server rendering. If you want your content quoted by an AI assistant, previewed correctly when shared, and indexed by every engine rather than just the most sophisticated one, the safe move is to put the actual content - text, metadata, structured data - in the HTML the server sends, every time.
Rendering strategy is now table stakes for being found at all, not just for ranking on Google.
Common mistakes even server-rendered sites make
Rendering on the server is necessary, not sufficient. We regularly audit "SSR" sites that still leak SEO:
- Hydration mismatches that throw the client-rendered output out of sync with the server HTML, sometimes blanking content after load.
- Meta tags and structured data set client-side, defeating the point - set them in the server response.
- Shipping a massive JS bundle anyway, so hydration is slow and the page is interactive long after it looks ready.
- Blocking crawlers in
robots.txtor with aggressive bot protection that also turns away Googlebot. - Soft-404s and client-side redirects that crawlers interpret as broken or missing pages.
How to see what the crawler actually sees
You don't have to guess. Check it directly, in order of effort:
- View source, not the DevTools inspector. The Elements panel shows the hydrated DOM after JavaScript runs - which always looks fine. Right-click and "View Page Source" (or
curlthe URL) to see the raw HTML the server actually sent. If your headline and body copy aren't in there, neither Googlebot's first pass nor a social bot will see them. - Use Google Search Console's URL Inspection tool. It shows the rendered HTML and screenshot Google produced, plus any indexing issues. This is the source of truth for what Google specifically got.
- Test the social preview by pasting your URL into a debugger (LinkedIn, Facebook, Slack all expose one). A broken card is an immediate sign your meta tags are rendered client-side.
- Disable JavaScript in your browser and reload. If the page goes blank, so does it for every crawler that doesn't run JS.
Run these before launch and after any framework or rendering change - regressions here are silent, and you often only discover them weeks later when traffic quietly fails to arrive.
The pragmatic rule
If a page needs to be found by search or shared on social, render it on the server or at build time - full stop. If a page lives behind a login and no crawler will ever see it, CSR is perfectly fine and often simpler; there's no SEO to lose.
Most real products are a deliberate mix: a server-rendered public shell - marketing, content, product pages - wrapping a client-rendered authenticated app where SEO is irrelevant.
If organic traffic matters to your product and you're not certain your current stack renders for crawlers correctly, talk to us - checking exactly what Googlebot receives is one of the first things we audit, and it's often the cheapest SEO win a site can make.
Originally published on the Doktouri Agency blog. We build web, mobile, SaaS, and AI products - let's talk.
Comments
No comments yet. Start the discussion.