Server-side rendering (SSR)

What is server-side rendering?

Server-side rendering (SSR) is a way of building web pages where the server produces the complete HTML for each request and sends it to the browser. The content, links and metadata are in the first response, so a browser can show the page straight away and a crawler can read it without running JavaScript.

Most modern JavaScript frameworks support SSR. Next.js, Nuxt, SvelteKit, Remix and Angular can all render components on the server, then send JavaScript that “hydrates” the page in the browser so it becomes interactive. Traditional server-rendered stacks such as WordPress, Rails, Django or Laravel have always worked this way.

SSR sits alongside related approaches. Static site generation (SSG) renders pages once at build time and serves the same HTML to everyone, which is fast and cheap but needs a rebuild when content changes. Incremental or on-demand regeneration mixes the two. Client-side rendering is the opposite: the server sends a shell and the browser builds the page.

Why server-side rendering matters for SEO

SSR removes the biggest risk in JavaScript SEO. Google does not have to wait for its rendering step to see your content, and crawlers that never run JavaScript, including many AI crawlers, still see the full page.

It usually helps speed too. Because the HTML arrives complete, the browser can paint the main content sooner, which tends to improve Largest Contentful Paint. The trade-off is server work: rendering on every request can raise time to first byte if the server is slow or the page waits on slow data, so caching matters.

How to check if a page is server-rendered

1. Open the page and view the source (Ctrl+U or Cmd+Option+U). If you can read the main text, headings and links in the source, the page is server-rendered or statically generated.
2. Fetch the URL without JavaScript, for example with curl or by turning JavaScript off in the browser, and see what is left.
3. Check that the title, meta description, canonical and robots tags are in the source and match what the rendered page shows.
4. If the server is slow, cache rendered pages at the server or on a CDN, or move pages that rarely change to static generation.

Server-side rendering example

<!doctype html>
<html lang="en">
  <head>
    <title>Trail running shoes | Example</title>
    <link rel="canonical" href="https://example.com/shoes/trail">
  </head>
  <body>
    <h1>Trail running shoes</h1>
    <p>Grippy, light shoes for muddy and rocky paths.</p>
    <a href="/shoes/trail/waterproof">Waterproof trail shoes</a>
    <script src="/app.js" defer></script>
  </body>
</html>