REACT SEO PLAYGROUND
See the difference in the first HTML response.
Compare server-rendered HTML (SSR) with client-side rendering (CSR). Edit the example, then switch JavaScript off in the simulation to see which content remains available before client rendering.
Server-side rendering
The response already contains the title and page content. It remains readable when client rendering is disabled.
A useful page about React SEO
This content explains a topic before any client-side JavaScript runs.
Example initial response
<!doctype html>
<html lang="en">
<head><title>A useful page about React SEO</title></head>
<body><div id="root">
<h1>A useful page about React SEO</h1>
<p>This content explains a topic before any client-side JavaScript runs.</p>
</div></body>
</html>Client-side rendering
The initial response contains an empty app container. JavaScript must run to add the example’s title and content.
No page content has been rendered yet.
Example initial response
<!doctype html>
<html lang="en">
<head><title>React app</title></head>
<body><div id="root"></div>
<script src="app.js"></script>
</body>
</html>This is a local teaching example, not a live website audit or benchmark. Static generation can also send complete initial HTML. Search engines may render JavaScript; this example does not predict crawling, indexing, rankings, or page-speed scores.