Preload Functions

Preload

Edit this page

With smart caches waterfalls are still possible with view logic and with lazy loaded code. With preload functions, fetching the data parallel to loading the route is possible to allow use of the data as soon as possible. The preload function can be called when the Route is loaded or eagerly when links are hovered.

As its only argument, the preload function is passed an object that can be used to access route information:

import { lazy } from "solid-js";
import { Route } from "@solidjs/router";


const User = lazy(() => import("./pages/users/[id].js"));


// preload function
function preloadUser({ params, location }) {
  // do preloading
}


// Pass it in the route definition
<Route path="/users/:id" component={User} preload={preloadUser} />;
keytypedescription
paramsobjectThe route parameters (same value as calling useParams() inside the route component)
location{ pathname, search, hash, query, state, key}An object that used to get more information about the path (corresponds to useLocation())
intent"initial", "navigate", "native", "preload"Indicates why this function is being called.
  • "initial" - the route is being initially shown (ie page load)
  • "native" - navigate originated from the browser (eg back/forward)
  • "navigate" - navigate originated from the router (eg call to navigate or anchor clicked)
  • "preload" - not navigating, just preloading (eg link hover)

A common pattern is to export the preload function and data wrappers that correspond to a route in a dedicated route.data.js file. This imports the data functions without loading anything else.

import { lazy } from "solid-js";
import { Route } from "@solidjs/router";
import preloadUser from "./pages/users/[id].data.js";
const User = lazy(() => import("/pages/users/[id].js"));


// In the Route definition
<Route path="/users/:id" component={User} preload={preloadUser} />;

The return value of the preload function is passed to the page component when called at anytime other than preload. This initializes things in there, or alternatively the following new Data APIs can be used.

Report an issue with this page