docs: add HydrateFallback to the data-loading doc #12601
Conversation
|
| @@ -9,6 +9,8 @@ Data is provided to the route component from `loader` and `clientLoader`. | |||
|
|
|||
| Loader data is automatically serialized from loaders and deserialized in components. In addition to primitive values like strings and numbers, loaders can return promises, maps, sets, dates and more. | |||
|
|
|||
| The type for the `loaderData` prop is [automatically generated][type-safety]. | |||
|
|
|||
| ## Client Data Loading | |||
|
|
|||
| `clientLoader` is used to fetch data on the client. This is useful for pages or full projects that you'd prefer to fetch data from the browser only. | |||
There was a problem hiding this comment.
I might introduce HydrateFallback here since it can/should be used for this scenario where you have only a clientLoader, and no loader. In that scenario, clientLoader.hydrate defaults to true because we have to run it on hydration if we have no loaderData from the server.
Then below you can mention:
- When you provide a server
loaderin addition to aclientLoader, we can render the during SSR using the server loader data - If if we do not want to render the route with only server loaderData, then set
clientLoader.hydrate=trueto run on hydration and provide aHydrateFallbackto render untilclientLoadercompletes
| const serverData = await serverLoader(); | ||
| const res = await fetch(`/api/products/${params.pid}`); |
There was a problem hiding this comment.
This feels redundant? In remix we showed off the common use cases in a dedicated page so maybe we pick what we think is the most common (presumably "skip the hop") and inline it into this doc but then we copy over the Remix doc and link off to it for advanced use cases?
There was a problem hiding this comment.
Yeah agreed. Initially I was combining that doc with the full stack data doc we had, but then realize we already had this doc
I think a dedicated advanced data loading explanation or how-to is a good idea. I’ll try to put something together, even if it’s just a starting point we can improve upon later
We didn't really have any info on
HydrateFallbackor whatclientLoader.hydrate = truedoes, so hopefully this helps fill in the gap