Option to preload scripts but not render component.

[kevincox]

Is your feature request related to a problem? Please describe.
I have some components that can't be fully per-rendered for various reasons. Maybe they show pop-up notifications or the amount of data that they fetch is too high for preloading. I would like an option to preload the route but not render the actual component.

This can be particularly helpful when rendering a long list of the same type of things, but the user is likely to click only one. You can load the /orders/[id] route but avoid fetching the data for any (or all) of the actual orders.

Describe the solution you'd like
An option to preload the route but not mount it. I can see a few ways to provide this.

Maybe the component itself could declare that it isn't suitable for pre-rendering.

<!-- routify:options preload-instantiate=false -->

Or maybe the preload helper could take a parameter such as preload("/user/[name]", {instantiate: false}).

Describe alternatives you've considered

1. Just skipping preloading. This works but makes navigation slower.
2. Just render the first element in the list. Works but can be annoying to write and is only a mitigation anyways.
3. Just render a fake node like preload("/orders/0"). This is easier to write than 2 but is wasteful as the loaded data is useless and may cause confusing errors due to background requests for invalid IDs.

[jakobrosenberg]

I could create a small plugin to handle this.

Main question is the syntax since we have the following variables:

• when: always, proximity and hover. (proximity would preload the node if it's linked on the current page, hover is the same as proximity but doesn't happen until the link is hovered)
• weight: the priority of each preload if multiple nodes should be preloaded
• scope: component, load or all. (load could present some issues since it's not currently cached, but that could solved)

Gotta run now, but will have a look at this when I get back.

[jakobrosenberg]

There's a new prefetch feature that might solve this.

<header data-routify-prefetch-data="hover">
  <a href="/some/where/1">1</a>
  <a href="/some/where/2">2</a>
</header>

The documentation is in the pipeline. Let me know if this works for you. 🙂

[kevincox]

I couldn't get this to work. I'm on 2.18.12 and tried putting it on a container element and the link itself. Do I need to be using a pre-release or doing something else to enable this?

[jakobrosenberg]

@kevincox the new feature is for Routify 3.

https://v3.routify.dev/

[kevincox]

Ah, of course. I'll need to try updating at some point.