RFC: serialization of route loaders data

[Varixo]

What is it about?

Reducing the size of the initial rendered HTML, by being smarter at which data to serialize from the route loaders.

What's the motivation for this proposal?

Problems you are trying to solve:

Let's say we have the following route loader:

export const useProductDetails = routeLoader$(async (requestEvent) => {
  const res = await fetch(
    `https://.../products/${requestEvent.params.productId}`
  );
  const product = await res.json();
  return product as Product;
});

Currently we are able to tree shake (or "Data Shake" ™) route loaders data in some simple cases, for example if only a portion of that data is being used.

Example:

export default component$(() => {
  const data = useProductDetails();

  return (
    <>
      Product name: {data.value.product.name} // 👈 the rest of this data will get "data shaken" and not serialized
    </>
  );
});

But when the component has a condition which affects its rendering, there is no way for Qwik to know whether its data will be required by one of the children of that component (or grandchildren), so the optimizer marks a component as dynamic and all loaders data are serialized, even if the data are not required later.

export default component$(() => {
  const data = useProductDetails();
  const condition = useSignal(false);
  return (
    <>
      Product name: {data.value.product.name}
      <button onClick$={() => (condition.value = !condition.value)}>
        Toggle
      </button>
      {condition.value ? <Child /> : <div />}  // 👈 this is the line which marks this entire component as "dynamic"
    </> 
  );
});

Due to the {condition.value ? <Child /> : <div/>} condition, the component is marked as dynamic. This is because we don't know if the <Child /> component calls the useProductDetails(). In that case, we need the data for the <Child /> component.

Goals you are trying to achieve:

• Create a solution without serializing the route loader data
• Create a simple, easy to understand and to explain solution

Any other context or information you want to share:

---

Proposed Solution / Feature

What do you propose?

The loader data will never serialized from context. After SSR, the data will always be discarded if it is not "captured".

If a child component uses the route loader again, we will lazy load the data as needed.
Additionally, provide an option persist: boolean to routeLoader$ to serialize the state anyway if developers want it.

export interface CommonLoaderActionOptions {
  readonly id?: string;
  readonly validation?: DataValidator[];
+  readonly persist?: boolean;
}

Code examples

1. Default behavior - data are not serialized

export const useProductDetails = routeLoader$(async (requestEvent) => {
  const res = await fetch(
    `https://.../products/${requestEvent.params.productId}`
  );
  const product = await res.json();
  return product as Product;
});

export default component$(() => {
  const data = useProductDetails();
  const condition = useSignal(false);
  return (
    <>
      Product name: {data.value.product.name}
      <button onClick$={() => (condition.value = !condition.value)}>
        Toggle
      </button>
      {condition.value ? <Child /> : <div />}
    </>
  );
});

export const Child = component$(() => {
  const data = useProductDetails();
  return (
    <div>
      Foo
      {data.value.product.name}
    </div>
  );
});

In above example the useProductDetails data are not serialized.
If the Child component is rendered, the data are lazy loaded through the server.

2. Persist option - data are serialized

export const useProductDetails = routeLoader$(
  async (requestEvent) => {
    const res = await fetch(
      `https://.../products/${requestEvent.params.productId}`
    );
    const product = await res.json();
    return product as Product;
  },
  {
    persist: true,
  }
);

export default component$(() => {
  const data = useProductDetails();
  const condition = useSignal(false);
  return (
    <>
      Product name: {data.value.product.name}
      <button onClick$={() => (condition.value = !condition.value)}>
        Toggle
      </button>
      {condition.value ? <Child /> : <div />}
    </>
  );
});

export const Child = component$(() => {
  const data = useProductDetails();
  return (
    <div>
      Foo
      {data.value.product.name}
    </div>
  );
});

In above example the useProductDetails data are serialized, because persist option is passed.
If the Child component is rendered, the data are reused from state.

---

Links / References

No response

[ianlet]

Would it affect the "prefetching" strategy? If the data is lazy loaded, it will introduce an extra delay visible to the user while the data is fetched, which will affect negatively the user experience.

It would have to be tested/benchmarked, but my feeling is that the extra time it takes to serialize data that is unused is less affecting the UX than a whole new server call (extra delays on user interaction) to fetch the data when needed.

Also, should it be the other way around? By default it's serialized (like it is right now) when we can make sure data won't be needed, but you can pass an option (e.g. eager: false) to fetch the data later.

[Varixo]

It would work just like partial SPA. If you don't want that behavior you can pass the persist option

[Varixo]

We want to serialize less data, so we can't make the persist: true as default.
Basically serializing sometimes unnecessary few MB of data is a huge problem.

It is worth mentioning that this behavior only occurs if you have a component that uses route loader data and is rendered on the browser side