entry.client.md

title	toc
entry.client	false

entry.client

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 that was 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.

RemixBrowser

The RemixBrowser component is the top-level component of your Remix application - and will render from the root component down for the matched routes.

routes prop

RemixBrowser accepts a single optional routes prop that can be used with Remix SPA Mode if you have not yet moved your routes to use the file-based routing convention or the routes config. The routes passed via this prop will be appended as additional children of your root route.

Routes defined this way are strictly client-side, so your loader/action will be internally converted to Remix clientLoader/clientAction's.

This is not intended to be used as a primary method of definin routes, and is intended to be used as a migration path from a React Router RouterProvider application.

If any collisions are detected from routes on the file system then a warning will be logged and the routes prop will be ignored.

import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";

const routes = [
  {
    index: true,
    loader: indexLoader,
    Component: Index,
  },
  {
    path: "/parent",
    loader: parentLoader,
    Component: Parent,
    children: [
      {
        path: "child",
        loader: childLoader,
        Component: Child,
      },
    ],
  },
];

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