Preloading

Anchors in Solid Router will preload routes by default on link hover/focus to improve perceived performance.

To enhance preloading, you can define the preload function on your route definition. When on a SolidStart application, this function can also run on the server during the initial page load to start fetching data before rendering. When in a Single-Page Application (SPA), it will load the route's component and its preload function when the user hovers or focuses on a link.

user action	route behavior
hover	with a 300ms delay to avoid excessive preloading
focus	immediately

---

Imperative Preloading

You can also use the usePreloadRoute helper to preload routes programmatically in response to events other than link hover/focus, such as button clicks or timers. This helper will load only the route's component by default, but it can receive a configuration object to also load the data.

---

Preloading and Lazy Loading

When a route has nested lazy components, such components will not be part of the route hierarchy, so they will not be preloaded with the route. To preload such components, you can use the preload() function returned from calling the lazy() component API.

To learn more about lazy loading components, see the lazy documentation.