Partial loader data caching

[msurdi]

Hi!

I have a use case where one of the keys for the data I'm returning from a loader is pretty big, example:

export const loader = async () =>
  json({
    example: "dynamic",
    data:  {...}
  });

Where the value for the data key is huge (for simplicity, image it's just inline data), so I want to avoid the browser having to download this data on every page navigation.

By following the Client Cache examples, I can easily cache the entire response, but as you can see in my example the example: "dynamic" value must not be cached.

Is there any recommended way to cache only part of the loader's response data while still fetching the rest of it?

Thanks.

[lili21]

how about splitint it to different route/loader

[msurdi]

Hey! thanks for answering. I've finally come up with this solution. I'm not sure if there's a better way but so far it seems to be working as I need it to.

[msurdi]

Although I'm not sure if there's any better way to solve this, here's what I've come up with that solves my problem:

(sorry if there's any typo, I'm writing all of this by extracting the core concept from the real thing)

// app/router.jsx
export const loader = async () => {

  // Find from the URL a custom query string parameter that will tell us if this is a client request or a SSR (first render) one
  const url = new URL(request.url);
  const isSsr = url.searchParams.get("client") !== "1";

  // This is some common data that we always need to send, both on full page reloads and on client side navigations that just refresh data
  const commonData = {
    user: session.get("user"),
  };
 
  // These values should only be sent on full page reloads and not on every client side navigation. It should be present only embedded in the HTML contnet of the first render.
  const ssrOnlyData = {
     data: BIG_DATA,
  };

  json({
    ...commonData,
    ...(isSsr ? ssrOnlyData : {}),
  });
}


// Client side cached data
let cached = null;
export const clientLoader = async ({ serverLoader }) => {

  // On first page render (due to clientLoader.hydrate below) cache the SSR provided data.
  if (!cached) {
    cached = await serverLoader();
    return cached;
  }

  // This code only runs on client navigation. Fetch the up to date values , signaling this is a client request so that the heavy payload is not sent.
  const loaderDataResponse = await fetch("/api/root?client=1");

  const loaderData = await loaderDataResponse.json();

  // Return the updated data, merging in the cached data.
  return {
    ...cached,
    ...loaderData,
  };
};

clientLoader.hydrate = true;

// app/routes/api.root.js

// Just expose the root loader to be used as an API endpoint.
export { loader } from "../root.jsx";