React Server-side Rendering

How it works

Server rendering can produce initial HTML from React components before browser JavaScript runs. renderToString is a synchronous teaching API; it is not a complete production framework, streaming architecture or Server Components implementation. This lab shares a small component written with createElement so Node can import it without a JSX loader. A Node script renders that component to standard output. The browser entry renders the same component normally.

Run the code

Use a separate empty lab folder with Node 22.12+ in the 22 series. Save the files below using their displayed paths; browsers may download only the basename, so create src, public or tests folders as listed. The pinned project uses React and React DOM 19.3.1 with Vite 7.3.1. Run npm install, then npm run dev and open the local address Vite prints. React examples do not run in Bhylu’s current playground.

Run node server.mjs to inspect the separately rendered HTML. No Apache, MySQL or change to Bhylu’s server configuration is needed. These are local teaching projects, not a publishing package. Keep generated dependencies and lockfiles in your own lab. Review the project setup.

• package.json
• index.html
• src/main.jsx
• src/style.css
• vite.config.mjs
• src/Notice.js
• server.mjs

Example

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './style.css';

import { Notice } from './Notice.js';
function App() {
  return <Notice />;
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Expected result

node server.mjs prints a main element containing the notice, a button and “Reads: 0”. The browser button works after client rendering.

The server script imports renderToString from react-dom/server and React from its package. No HTTP endpoint is opened, no user data is fetched and effects do not run on the server. This isolates the rendering contract from hosting and request handling. Production systems should use a maintained framework or carefully designed server layer rather than treating this small stdout script as a deployable service.

Supporting files for this lab

import React, { useState } from 'react';
export function Notice() {
  const [count, setCount] = useState(0);
  return React.createElement(
    'main',
    null,
    React.createElement('h1', null, 'Collection notice'),
    React.createElement('p', null, 'Saturday, 10:00–12:00'),
    React.createElement(
      'button',
      { onClick: () => setCount((value) => value + 1) },
      'Read notice',
    ),
    React.createElement('output', null, 'Reads: ' + count),
  );
}

import React from 'react';
import { renderToString } from 'react-dom/server';
import { Notice } from './src/Notice.js';
console.log(renderToString(React.createElement(Notice)));