By default, Remix will handle hydrating your app on the client for you. If you want to customize this behavior, you can run npx remix reveal
to generate a app/entry.client.tsx
(or .jsx
) that will take precedence. This file is the entry point for the browser and is responsible for hydrating the markup generated by the server in your server entry module; however, you can also initialize any other client-side code here.
Typically, this module uses ReactDOM.hydrateRoot
to hydrate the markup already generated on the server in your server entry module.
Here's a basic example:
import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
startTransition(() => {
hydrateRoot(
document,
<StrictMode>
<RemixBrowser />
</StrictMode>
);
});
This is the first piece of code that runs in the browser. You can initialize client side libraries, add client-only providers, etc.