From route click to instant render: how it works

Prefetching downloads the resources for the next page ahead of time. Quicklink automates this at scale by prefetching links as they enter the viewport. In multi-page apps, it prefetches documents such as /article.html for in-viewport links, so a user click can be served from the HTTP cache.

Single-page apps commonly rely on route-based code splitting, loading a route's code only when the user navigates to it. Those files (JS, CSS) are typically called "chunks". For these apps, the biggest wins come from prefetching those chunks before the route is needed.

That intent runs into two obstacles:

  • It is not straightforward to know which chunks (e.g. article.chunk.js) belong to a given route (e.g. /article) before visiting it.
  • Final chunk file names can't be predicted in advance; modern module bundlers usually add long-term hashes like article.chunk.46e51.js for versioning.

A manifest that maps routes to chunks

One of quicklink's core pieces is webpack-route-manifest, a webpack plugin that generates a JSON dictionary of routes and chunks. That dictionary lets Quicklink know which files each route needs and prefetch them as the route comes into view.

After integrating the plugin into a project, it produces a JSON manifest file that pairs every route with its corresponding chunks:

{
  '/about': [
    {
      type: 'style',
      href: '/static/css/about.f6fd7d80.chunk.css',
    },
    {
      type: 'script',
      href: '/static/js/about.1cdfef3b.chunk.js',
    },
  ],
  '/blog': [
    {
      type: 'style',
      href: '/static/css/blog.85e80e75.chunk.css',
    },
    {
      type: 'script',
      href: '/static/js/blog.35421503.chunk.js',
    },
  ],
}

You can request that manifest in two ways:

  • By URL, e.g. https://site_url/rmanifest.json.
  • Through the window object, at window.__rmanifest.

Wiring prefetch into React routes

Install Quicklink by running npm install quicklink. Then use the higher order component (HOC) withQuicklink() to mark a route for prefetching when its link enters the viewport.

In a typical case, an App component renders a top menu with four links:

const App = () => (
  <div className={style.app}>
    <Hero />
    <main className={style.wrapper}>
      <Suspense fallback={<div>Loading…</div>}>
        <Route path="/" exact component={Home} />
        <Route path="/blog" exact component={Blog} />
        <Route path="/blog/:title" component={Article} />
        <Route path="/about" exact component={About} />
      </Suspense>
    </main>
    <Footer />
  </div>
);

To have Quicklink prefetch those routes:

  1. Import the quicklink HOC at the top of the component.
  2. Wrap each route with withQuicklink(), passing the page component and an options parameter.
const options = {
  origins: [],
};
const App = () => (
  <div className={style.app}>
    <Hero />
    <main className={style.wrapper}>
      <Suspense fallback={<div>Loading…</div>}>
        <Route path="/" exact component={withQuicklink(Home, options)} />
        <Route path="/blog" exact component={withQuicklink(Blog, options)} />
        <Route
          path="/blog/:title"
          component={withQuicklink(Article, options)}
        />
        <Route path="/about" exact component={withQuicklink(About, options)} />
      </Suspense>
    </main>
    <Footer />
  </div>
);

The withQuicklink() HOC uses the route's path as the key for looking up its chunks in rmanifest.json. Behind the scenes, as the links scroll into view, Quicklink injects a <link rel="prefetch"> tag into the page for each chunk. The browser requests prefetched resources at the lowest priority and keeps them in the HTTP cache for five minutes; after that, the resource's cache-control rules apply. When the user clicks a link and lands on that route, the chunks come straight from cache, which sharply cuts the time needed to render it.

Using webpack-route-manifest to map routes to chunks, Quicklink determines exactly which files to prefetch for React single-page apps. Applying this across a site can make subsequent navigations feel effectively instant.