Harrison Malone - Server Rendering With Props

Something that I didn't discuss in the last post on hydration and server rendering is passing props.

In the aforementioned example I was just rendering

<Test />

but what if I want to render

<Test hello="Hi" />

The "Hi" string value can be thought of as something fetched from a database.

Here are the steps I followed:

The HTML template rendering logic on the server is able to look at the JSX.Element value passed to it and access the props, we can then inject the props as a data- attribute to a div, from a user point of view this data is invisible but the JS that runs post server rendering will be able to access it

<body className={"bg-sky-100 font-dm max-w-2xl mx-auto px-4"}>
	<main id="root">{props.body}</main>
	<div id="data" data-props={JSON.stringify(props.body.props)}></div>
</body>

As the props type will be used both server and client we want to store it in a types.ts file for shared access

type AboutProps = {
  hello: string;
}

In the top level client React file (where hydration happens) we want to do something like this, we get the dataElement with our injected data via a .getElementById call, we can then use a type assertion to make the JSON.parse have a valid type, we could also use something like zod here to get more confidence that the parsing has worked and the props type is valid

const rootElement = document.getElementById("root");

if (!rootElement) throw new Error("Root element not found");

const dataElement = document.getElementById("data");

if (!dataElement) throw new Error("Data element not found");

const props: AboutProps = JSON.parse(dataElement.dataset.props || "{}");

if (rootElement.innerHTML.trim().length) {
  // Could also spread the props here but being more verbose for the example
  hydrateRoot(rootElement, <Test hello={props.hello}  />);
} else {
  createRoot(rootElement).render(<Test hello={props.hello} />);
}

From here the client should behave like normal React but with slightly better perceived performance due to the server rendering, all of this stuff is handled much better in frameworks like Next.js but it's fun to tinker around with it in my own little projects

Tuesday, March 18, 2025

Server Rendering With Props