HydrateFallback requires clientLoader.hydrate=true
HydrateFallback is only relevant when you are also setting clientLoader.hydrate=true on a given route.
React Router · Guides · all subjects
hydration
8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
HydrateFallback rendering scope
HydrateFallback is only rendered during initial document request and hydration. It will not be rendered on any subsequent client-side navigations.
clientLoader without server loader implies hydrate=true
If you have a clientLoader without a server loader, this implies clientLoader.hydrate=true since there is otherwise no loader data at all to return from useLoaderData.
HydrateFallback behavior when clientLoader omits hydrate but no server loader
If you have a clientLoader without a server loader and do not specify a HydrateFallback, React Router will not render your route component and will bubble up to any ancestor HydrateFallback component. This ensures that useLoaderData remains happy-path and does not return undefined in rendered route components.
Cannot render Outlet in HydrateFallback
You cannot render an Outlet in a HydrateFallback because children routes cannot be guaranteed to operate correctly. Their ancestor loader data may not yet be available if they are running clientLoader functions on hydration, such as when using useRouteLoaderData() or useMatches().
entry.client.tsx file purpose
entry.client.tsx is an optional client-side entry point used for hydration in React Router applications.
Client entry point with HydratedRouter
Create src/entry.client.tsx as the client entry point. Use ReactDOM.hydrateRoot instead of createRoot, and render HydratedRouter from react-router/dom instead of manually creating routes and rendering RouterProvider.
Entry client example with HydratedRouter
Example src/entry.client.tsx: ```tsx import React from "react"; import ReactDOM from "react-dom/client"; import { HydratedRouter } from "react-router/dom"; ReactDOM.hydrateRoot( document, <React.StrictMode> <HydratedRouter /> </React.StrictMode>, ); ```