clientLoader and parent route

[wong2]

I have a route that includes a loader and a clientLoader, and it also has a parent route that only has a loader.
I'm expecting that when navigating to this route on the client side, only its clientLoader would run.
Now what I want to ask is, in this situation, will it still wait for the parent route's loader to execute?

[sergiodxa]

If the user navigates to a URL that match two routes it will trigger a fetch to the loaders for every matching route.

If one of those matching routes have a clientLoader it will skip the request to the loader of that route and instead run the clientLoader, but the parent route server loader will still be requested.

For the route with both loader and clientLoader to get the loader to run you need to call the serverLoader function in the clientLoader.

This means that if you have these routes

app/routes/parent.tsx <- this has a loader
app/routes/parent.child.tsx <- this has both loader and clientLoader

When navigating to /parent/child URL this will match both routes so Remix will send a request to the first route (the parent) loader and run the clientLoader of the second route (the child).

[jamalsoueidan]

export const clientLoader = async ({
  request,
  params,
  serverLoader,
}: ClientLoaderFunctionArgs) => {
  // call the server loader
  const serverData = await serverLoader(); 

  return data;
};