Free to explore: filter winning sites by DR, traffic and niche  ·  Try the live explorer →

Server-side rendering and SEO

Code on a monitor in a dark office

Is server side rendering better for SEO? Compared with rendering everything in the browser, yes. Compared with generating pages at build time, not necessarily. The debate is usually framed as server against client, when the useful question is narrower: does the page’s content exist in the HTML before any JavaScript runs?

The Next.js documentation puts it in one sentence: “The most important thing for SEO is that page data and metadata is available on page load without JavaScript.” Every rendering choice below either meets that test or does not.

The four rendering strategies

The Next.js guide to SEO rendering strategies describes four approaches. The names come from that framework, but the ideas apply to most modern JavaScript stacks.

StrategyWhen the HTML is generatedSEO position
Static site generation (SSG)At build time“Pre-rendered”; content is in the HTML
Server-side rendering (SSR)At request timePre-rendered; content is in the HTML
Incremental static regeneration (ISR)At build, then updated after the buildStatic pages that can be refreshed
Client-side rendering (CSR)In the browserInitial HTML has “little to no content”; “Not recommended for optimal SEO”

Three of the four deliver finished HTML. Only client-side rendering sends a page that is empty until a script fills it.

An almost empty HTML shell

Client-side rendering SEO: what goes wrong

A client-side rendered page typically arrives looking something like this:

The title, the body copy, the links and often the canonical tag only exist once that script has downloaded, run and fetched its data. Anything reading the raw HTML, which includes many crawlers and social preview tools, sees an empty shell.

A fully rendered page in a browser

Is client side rendering bad for SEO, then? It is not invisible. Google can render JavaScript, and our guide to JavaScript SEO covers what that process involves and where it falls down. But rendering adds a dependency and a delay. Your content now relies on the script loading, executing without errors and finishing its data requests in time, and on the search engine choosing to do that work at all.

That is the core trade. With pre-rendered HTML, the content is simply there. With client-side rendering, it is there if everything goes right. The distinction between a page being reachable and being understood is the subject of our guide to crawlability versus indexability, and a blank shell is a clear example of a page that can be crawled without its content being seen.

Does server-side rendering improve SEO?

Moving a content site from client-side rendering to SSR usually does help, because it removes that dependency. Every request returns the full page: headings, copy, internal links, structured data and metadata, all readable without running a line of JavaScript.

A build pipeline diagram

What SSR does not do is make a page rank on its own. It makes the content reliably available; whether that content deserves to rank is a separate question. If a site already serves its content in the initial HTML, switching rendering method will not change much.

Metadata deserves particular attention. The Next.js sentence names “page data and metadata”, and the second half is easy to overlook. A page can render its body copy on the server but still set its title, meta description, canonical tag or robots directives with a script after load. Those tags tell search engines how to treat the page, so they should be in the first response, not patched in later. If a framework lets you declare metadata per route on the server, use that rather than a client-side helper.

The page still becomes interactive in the usual way. Server-rendered or static HTML is sent first, then the JavaScript loads and attaches behaviour to it. Visitors get readable content sooner, and search engines get the same content whether or not they run the script.

SSR also has a cost. Generating HTML on every request means the server does work each time, which can slow the response. Our guide to time to first byte covers why that matters: a slow server response delays everything that follows. Caching rendered pages reduces the cost, but at that point you are close to static generation anyway.

Why static generation is often the better choice

For pages whose content does not change per visitor, such as articles, guides, product descriptions and category pages, static generation gives you the SEO benefit of SSR without the per-request work. The HTML is built once, can be served from a CDN, and arrives complete.

A JavaScript bundle in an editor

The usual objection is freshness: a static page is out of date the moment the underlying data changes. Incremental static regeneration exists for exactly that, updating static pages after the build without rebuilding the whole site. For stock levels, prices or anything that must be correct per request, SSR is the safer choice.

Mixing strategies page by page

The practical answer is rarely one strategy for the whole site. Next.js notes that rendering can be mixed per page, and most frameworks now support the same idea. Choose for each page type based on two questions: does it need to rank, and how often does its content change?

A dashboard web app

Marketing pages, articles and documentation suit static generation. Product and listing pages that change often suit SSR or ISR. Dashboards, account settings and anything behind a login suit client-side rendering, and Next.js says as much: CSR is fine for pages like these, because they are not meant to be found in search anyway. Rendering them in the browser costs nothing in SEO terms.

A team choosing a framework

Watch for one hybrid trap. A page can be server-rendered but load its main content later through a client-side request, such as reviews or the next batch of products. That later content has the same dependency as full client-side rendering. Our guide to infinite scroll and SEO covers the most common version of that pattern.

To check what a page delivers, view its source rather than inspecting the rendered page in developer tools. The source is the initial HTML. If the main copy, title, meta description and internal links are in it, the rendering strategy is doing its job for search. If they are not, they depend on JavaScript.

One limitation is worth stating. Nobody outside Google can say exactly how long its rendering takes for a given site, or how often a client-side page is indexed with missing content. The case for pre-rendering rests on removing a risk, not on a measured ranking gain, and a well-built client-side site can still perform. It is simply harder to be sure.

Frequently asked questions

Is server-side rendering better for SEO?

Better than client-side rendering, because the content and metadata arrive in the initial HTML. Static generation offers the same benefit and is often simpler for content pages.

Is client-side rendering bad for SEO?

It is not invisible, since Google can render JavaScript, but Next.js describes it as not recommended for optimal SEO. It adds a dependency and a delay.

When is client-side rendering fine?

For pages that do not need to rank, such as dashboards and account pages behind a login.

Can I mix rendering strategies?

Yes. Rendering can be chosen per page, so you can statically generate articles, server-render fast-changing pages and client-render the app.

The takeaway Make sure every page that needs to rank has its content and metadata in the first HTML response. Static generation, SSR or ISR all do that; choose per page.