Advanced

SSR Control

Turn server rendering off for browser-only components

ssr={false}

Key concepts

The same component is rendered twice here, once with ssr={true} and once with ssr={false}. Everything else about them is identical — the contrast is the whole point.

SSR.jsx

import React from "react";

export function SSR({ text }) {
  return <div className="rounded-md border px-4 py-2">{text}</div>;
}

How it works

With ssr={true} (the default), the server renders the component to HTML on the first response, so its content is present before any JavaScript runs and visible to a client with JS disabled or slow to load. React then hydrates that markup in the browser.

With ssr={false}, the server sends only an empty placeholder; the component exists nowhere until React mounts it in the browser. Reach for this for anything that only makes sense client-side — a component that touches window, a third-party widget with no server-safe render path, or anything where paying for SSR buys nothing.