UNPKG

react-router/docs/explanation/hydration.md

Version:

1.22 kB Markdown View Raw

1---
2title: Hydration
3hidden: true
4---
5
6There are a few nuances worth noting around the behavior of `HydrateFallback`:
7
8- It is only relevant on initial document request and hydration, and will not be rendered on any subsequent client-side navigations
9- It is only relevant when you are also setting [`clientLoader.hydrate=true`][hydrate-true] on a given route
10- It is also relevant if you do have a `clientLoader` without a server `loader`, as this implies `clientLoader.hydrate=true` since there is otherwise no loader data at all to return from `useLoaderData`
11  - Even if you do not specify a `HydrateFallback` in this case, React Router will not render your route component and will bubble up to any ancestor `HydrateFallback` component
12  - This is to ensure that `useLoaderData` remains "happy-path"
13  - Without a server `loader`, `useLoaderData` would return `undefined` in any rendered route components
14- You cannot render an `<Outlet/>` in a `HydrateFallback` because children routes can't be guaranteed to operate correctly since their ancestor loader data may not yet be available if they are running `clientLoader` functions on hydration (i.e., use cases such as `useRouteLoaderData()` or `useMatches()`)

1	`---`
2	`title: Hydration`
3	`hidden: true`
4	`---`
5
6	There are a few nuances worth noting around the behavior of `HydrateFallback`:
7
8	`- It is only relevant on initial document request and hydration, and will not be rendered on any subsequent client-side navigations`
9	- It is only relevant when you are also setting [`clientLoader.hydrate=true`][hydrate-true] on a given route
10	- It is also relevant if you do have a `clientLoader` without a server `loader`, as this implies `clientLoader.hydrate=true` since there is otherwise no loader data at all to return from `useLoaderData`
11	- Even if you do not specify a `HydrateFallback` in this case, React Router will not render your route component and will bubble up to any ancestor `HydrateFallback` component
12	- This is to ensure that `useLoaderData` remains "happy-path"
13	- Without a server `loader`, `useLoaderData` would return `undefined` in any rendered route components
14	- You cannot render an `<Outlet/>` in a `HydrateFallback` because children routes can't be guaranteed to operate correctly since their ancestor loader data may not yet be available if they are running `clientLoader` functions on hydration (i.e., use cases such as `useRouteLoaderData()` or `useMatches()`)