Any way to access the server data from a client loader?

[davidbielik]

My app does a server-side request that asks for cached data only.

If there is a cache miss, I'd like the client loader to make a request instead, so the rest of the page has time to render in parallel.

How could I accomplish this?

I can't figure out if it's actually possible to access the serverData (see: #12851)

I also don't want to always call serverLoader since that would make the request twice every page load.

import type { Route } from './+types/my-route';

export const loader = async({
    context,
    request,
    params,
}: Route.LoaderArgs) => {
   const cached_only = true;
   return getData( cached_only );
}

export const clientLoader = async ({
   request,
   params,
   serverLoader,
}: Route.ClientLoaderArgs) => {
  if ( somehow serverData is empty) { 👈 
     return serverLoader();
  }
};

[gustavopch]

That serverData is the data returned by serverLoader(), so you'll always need to call serverLoader() first and then be able to check if what it returned is empty or not. But maybe I didn't fully understand the question. 🤔

[davidbielik]

I don't see serverData in the available ClientLoaderFunctionArgs or Route.ClientLoaderArgs - (hence my related issue: #12851). Should that type exist on the ClientLoader?

Property 'loaderData' does not exist on type 'ClientLoaderArgs'.
Property 'serverData' does not exist on type 'ClientLoaderArgs'.

So I want the loader (server) to run once, and then use that data to determine if the clientLoader should run on that initial pageload or not.

[gustavopch]

That's because serverData is usually the name you give to the return of serverLoader, as in:

export const clientLoader = async ({ serverLoader }: Route.ClientLoaderArgs) => {
  const serverData = await serverLoader()
  return serverData
}

See: https://reactrouter.com/start/framework/route-module#clientloader

When you don't export a custom client loader, React Router will use a default one that works like the snippet above, calling the server loader for you.

When you export a custom client loader, you take control and it's up to you to decide whether you'll call the server loader or not. It seems you're expecting the server loader to run automatically even when you export a custom client loader, but that's not how it works.

To be clear, the loader that you're exporting is the same thing that the serverLoader() function runs. And there's also some different behavior depending on whether you set clientLoader.hydrate = true or not.

[davidbielik]

Thanks! It wasn't clear that when both exist, clientLoader will run, giving me the option to call the serverLoader and run logic after the initial render.