entry.client.tsx

Framework

Summary

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

This is the first piece of code that runs in the browser. You can initialize any other client-side code here, such as client side libraries, add client only providers, etc.

import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import { HydratedRouter } from "react-router/dom";

startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <HydratedRouter />
    </StrictMode>
  );
});

Generating entry.client.tsx

By default, React Router will handle hydrating your app on the client for you. You can reveal the default entry client file with the following:

npx react-router reveal