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.Elementvalue passed to it and access theprops, we can then inject the props as adata-attribute to adiv, 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.tsfile 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
dataElementwith our injected data via a.getElementByIdcall, we can then use a type assertion to make theJSON.parsehave a valid type, we could also use something likezodhere 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
