Add preload flag to clientLoader

[dadamssg]

tl;dr

export async function clientLoader({ serverLoader }: Route.ClientLoaderArgs) {
  // Resolves data from single-fetch request because of `preload` flag.
  // Does not initiate new request.
  let serverData = await serverLoader()
  return {
    rows: enrichWithClientData(serverData.rows)
  }
}
clientLoader.preload = true // new flag

Background

Currently, having a clientLoader defined in a route module automatically opts it out of single-fetch and requires a separate request because the clientLoader could end up not calling the serverLoader(). This is perfect for use-cases like debouncing requests.

However, often times clientLoaders solely exist to enrich the server data with data only available on the client. Some examples include:

• formatting datetimes to the user's timezone
• enriching server data with client-only sources (client APIs, localStorage)

In these cases, the serverLoader will always be called and reducing network requests would be ideal. This is more impactful now that middleware has landed since it wouldn't be running again in a separate request.

Proposal

A new preload flag to be optionally added to clientLoaders, similar to the hydrate flag. If this is set, the route loader will always participate in single-fetch. The serverLoader() would return the data from the single-fetch request instead of initiating a new fetch to get the loader data.

Alternatives

Currently, if you want the route to participate in single-fetch and enrich with client data you would need to do that in the route component.

export default function SomeRoute({ loaderData }: Route.ComponentProps) {
  let [rows] = useState(() => {
    return enrichWithClientData(loaderData.rows)
  }, [loaderData])

 // ...
}

Alternatively, this was discussed from the team previously:

One thing we briefly considered during initial implementation is detecting if you called it in the same microtask and lumping it back into the main call - but it felt super inexplicit/fragile - Matt

async function clientLoader({ serverLoader }) {
  // If you call it synchronously here the "single fetch" hasn't left 
  // yet so we could opt this call back into it
  let data = await serverLoader();
  // ...
}

async function clientLoader({ serverLoader }) {
  let cached = await getCache();
  if (cached) return cached;
  // But if you call it here the "single fetch" has already left so this 
  // has no choice but to be a new one
  let data = await serverLoader();
  // ...
}

[sergiodxa]

In your first example

export async function clientLoader({ serverLoader }: Route.ClientLoaderArgs) {
  // Resolves data from single-fetch request because of `preload` flag.
  // Does not initiate new request.
  let serverData = serverLoader()
  return {
    rows: enrichWithClientData(serverData.rows)
  }
}
clientLoader.preload = true // new flag

Here serverLoader returns sync? IMO it should still return a Promise. Not only to simplify types, but returning a promise could allow the clientLoader to start before the single fetch request runs.

This could let you start doing work before the server loader is requested, but at any moment await the result from the single fetch, kinda like this.

// this doesn't block the client loader
let serverLoaderPromise = callServerLoader({ request, params });
let result = await callClientLoader({
  request,
  params,
  context,
  serverLoader: () => serverLoaderPromise
});

[dadamssg]

ah, that was unintentional. good catch. I'll fix the snippet

[brophdawg11]

Thanks to @dadamssg for a sample POC implementation here: #14635

If this moves forward we can re-open that or use it as a starting point 👍