| title | 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 |
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.
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 usePreloadRoute helper in the parent component to load them when needed.
To learn more about lazy loading components, see the lazy documentation.