[✨] manually preload a new route when you know you'll need it

[riencoertjens]

Is your feature request related to a problem?

discord thread

Describe the solution you'd like

I have this page, where I have an animation that I want to complete before doing the navigation, it would be nice if there was a way to already start preloading the next page

const Page = component$(() => {
  const submitting = useSignal(false);
  const navigate = useNavigation();

  const onChange = $((ev, el) => {
    submitting.value = true;
    const formData = new FormData(el);
    const url = new URL("/next-step");
    url.searchParams.append("some-value", formData.get("some-value"));
    setTimeout(() => navigate(url.toString()), 1000);
  });

  return (
    <form onChange$={onChange}>
      <input type="text" class={submitting.value ? "flicker-input-navigation-to-indicate-submission" : ""} />
    </form>
  );
});

Describe alternatives you've considered

It would be nice if I could do something this to

preload(url)
setTimeout(() => navigate(url.toString()), 1000);

sort of what happens when you hover over a link

Additional context

additionally and a more broader but similar feature would be to have different prefetch behaviour like in remix:

prefetch Defines the data and module prefetching behavior for the link.

<>
  <Link /> {/* defaults to "none" */}
  <Link prefetch="none" />
  <Link prefetch="intent" />
  <Link prefetch="render" />
  <Link prefetch="viewport" />
</>

none - default, no prefetching intent - prefetches when the user hovers or focuses the link render - prefetches when the link renders viewport - prefetches when the link is in the viewport, very useful for mobile

[samyung0]

Manual prefetching should be possible by exposing loadClientData function in use-endpoint.ts But there is a catch I can think of: if the user prefetches a route while authenticated, qwik-city will load the relevant q-data file with all the auth details, then if the user logouts without refreshing the page, then the user can visit the route still as an authed user since prefetching does not occur again.