Make prefetch functionality work when both loaders are defined

[jakubszpil]

Hi,
is there any posssibility that link prefetch functionality will work when both loaders are defined (client and server)?

For example routes/search.tsx

export async function loader({}: LoaderFunctionArgs) {
   ...
}

export async function clientLoader({ serverLoader }: ClientLoaderFunctionArgs) {
   const data = await serverLoader<typeof loader>()
   ...
}

clientLoader.hydrate = true;

export default function Search() {
   const data = useLoaderData<typeof clientLoader>()
   
   return <h1>Search</h1>
}

For this scenario, calling /search won't prefetch any of defined loaders

<Link to="/search" prefetch="intent">Go to the search</Link>

It would be nice if at least serverLoader was prefetched

[sergiodxa]

The problem is that your clientLoader may never call your serverLoader, so how does the framework know if you're going to use it? Maybe you don't want to use the server loader after SSR, and only use clientLoader from that point.

[jakubszpil]

Ok, that makes sense. It might be worth trying the same tactics as hydration? I mean clientLoader.hydrate=true

So it will be sth like:

export const clientLoader = () => { ... }

clientLoader.prefetch = true;