Next.js SEO · Part 5 · CSR vs. SSR

Client-side vs. server-side rendering

Where a page's HTML is created, in the browser or on the server, what that means for crawlers, and where Next.js fits in.

What is rendering

Rendering means turning code and data into something people can see on a web page.

Imagine a simple website that displays:

Learn JavaScript

Start learning JavaScript with simple examples.

There are different ways to produce this page. This note covers two: Client-Side Rendering (CSR) and Server-Side Rendering (SSR).

Client-side rendering (CSR)

In CSR, JavaScript running in the browser creates much of the page's content.

1.How CSR works

Imagine a React application. The server might first send this HTML:

HTML from the server

<html>
  <body>
    <div id="root"></div>
    <script src="/app.js"></script>
  </body>
</html>

Notice that there is no heading or paragraph yet. The browser downloads app.js, runs it, and JavaScript creates the content.

Server

Sends HTML with an empty root element

Browser

Downloads and runs the JavaScript

Learn JavaScript

Start learning JavaScript with simple examples.

A simplified example of client-side rendering.

2.The SEO concern

A crawler that only reads the initial HTML might see just:

<div id="root"></div>

It might not see the heading or paragraph that JavaScript generates. Google can render many JavaScript pages, but not every crawler runs JavaScript, so CSR can make content harder to discover for some crawlers.

Server-side rendering (SSR)

With SSR, the server generates the page's HTML before sending it to the browser.

1.How SSR works

For the same website, the server could send:

HTML from the server

<html>
  <body>
    <h1>Learn JavaScript</h1>
    <p>
      Start learning JavaScript with simple examples.
    </p>
  </body>
</html>

Now the heading and paragraph are already in the HTML response.

Server

Generates HTML with the page content

Browser

Receives HTML that already contains the content

Learn JavaScript

Start learning JavaScript with simple examples.

A simplified example of server-side rendering.

2.Why it helps SEO

A crawler can find the page's important text directly in the returned HTML. It doesn't need to run JavaScript to discover that text.

CSR and SSR compared

	CSR	SSR
Where the main HTML is generated	Browser	Server
Initial HTML	May contain little content	Usually contains the page content
Needs JavaScript to show generated content	Often yes	Not for the initial HTML
Reachable by HTML-only crawlers	Can be limited	Generally better
Guarantees good SEO	No	No

Where Next.js fits in

React can create interactive websites. Next.js is a React framework that supports rendering pages on the server as well as in the browser.

In the Next.js App Router, Server Components are the default, and Next.js can send HTML that contains the page content.