@curi/route-prefetch

GitHub logoGitHub RepoNPM logoNPM Package

Installation

npm install @curi/route-prefetch

Prefer inline scripts? A full (.umd.js) and minified (.min.js) script is available for every version through Unpkg. You can access the package's exports using window.CuriRoutePrefetch.

About

The prefetch route interaction can be used fetch data for a route prior to navigating. The interaction will call a route's resolve functions (if they exist on the route).

Prefetching data means results in faster renders after navigation because you don't have to wait for the data to load.

Note:

Prefetching resolve function calls is only beneficial if you cache the results because the function will be re-called when the user navigates to that route. Functions wrapped by the once wrapper (from @curi/helpers) will automatically re-use the results from their first call.

API

prefetch

A function to create the prefetch route interaction. When you create your router, the result is passed to the router using the route option, which will add a prefetch function to the router's route interactions.

import { prepareRoutes, createRouter } from "@curi/router";
import prefetch from '@curi/route-prefetch';

const routes = prepareRoutes(
  routes,
  interactions: [prefetch()]
)

const router = createRouter(browser, routes);

router.route.prefetch("Some Route");

Arguments

name

The name of the route to prefetch.

optional

A route's resolve function is called with two arguments: the match object for the matched route and an externalvalue. You can provide filler values for these with the optional object argument.

const router = createRouter(browser, routes, {
  external
});

router.route.prefetch("Some Route", {
  match: { params: {...} },
  external: router.external
});
match

An object of "match" properties for the resolve function. The possible properties are name, params, location, and partials.

external

Any external values passed to the resolve function.

To access the external values set on the router when it was created, you can use router.external.

const router = createRouter(browser, routes, {
  external: {...}
});

router.route.prefetch(
  "Some Route",
  { external: router.external }
);
Note:

This route interaction will only register routes that have a resolve function. If you try calling this for any routes without a resolve function, prefetch will resolve an object with an error property and a null resolved property.