Next.js or plain React: when server-side rendering changes everything

React is a library for building interfaces; Next.js is a framework built around React, which adds server-side rendering, routing and image optimization in particular. This difference, often misunderstood, has direct consequences on SEO, perceived speed and even hosting: it should guide the choice between the two.

What plain React does

A classic React application (created today with a tool like Vite) builds the page entirely in the browser: on first load, the visitor receives an almost empty page, then JavaScript takes over to display everything. It is perfectly suited to an application used after login (dashboard, customer area, business tool), where SEO is not a concern and the user stays on the same interface for a long time.

Next.js rendering modes

• Server-side rendering: the page is built on the server on every visit, with always up-to-date data.
• Static generation: the page is built once, at deployment, and served instantly.
• Periodic regeneration: a static page rebuilt automatically, for example every hour, for content that changes from time to time (catalog, articles).
• Client-side rendering: like plain React, for interactive or private parts.

The choice is made page by page: the home page can be static, the product page regenerated every hour, and the customer area rendered in the browser.

For example, a page listing products, built on the server and refreshed every hour:

export default async function Products() {
  const products = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 },
  }).then((r) => r.json());

  return (
    <ul>
      {products.map((p) => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

Visitors and Google receive the list directly as HTML, without waiting for JavaScript.

Why it matters for SEO

Google can run JavaScript, but a page built only in the browser is crawled in two passes, more slowly and less reliably. With a page that is already built, the content, title and tags are readable immediately. For a public site that needs to attract visitors from Google, that is a clear advantage.

The hosting difference

A plain React application is made of static files: it can be hosted anywhere, even on simple shared hosting. Next.js, as soon as it uses server-side rendering, needs a running Node.js server (a VPS, or a specialized platform such as Vercel). If the site can be fully static, Next.js can also produce static files, but you then lose server-side rendering.

Side by side

The deciding factor: who needs to see the page

An anonymous visitor coming from Google does not have the same needs as a logged-in user who comes back every day. Business website, store, blog, public pages of a platform: Next.js. Dashboard, back office, internal application: plain React is enough and stays simpler. And a project that mixes both often benefits from doing everything with Next.js, rendering the private part on the client.

Going further: my expertise: JavaScript developer React, Next.js, Angular · read also: What to check before choosing a JavaScript framework