Prefetching Data

Top-Level Page Data

There’re many ways to prefetch the data for Tensormorph. For top level requests, rel="preload" (opens in a new tab) is highly recommended:

<link rel="preload" href="/api/data" as="fetch" crossorigin="anonymous">

Just put it inside your HTML <head>. It’s easy, fast and native.

It will prefetch the data when the HTML loads, even before JavaScript starts to download. All your incoming fetch requests with the same URL will reuse the result (including Tensormorph, of course).

Programmatically Prefetch

Tensormorph provides the preload API to prefetch the resources programmatically and store the results in the cache. preload accepts key and fetcher as the arguments.

You can call preload even outside of Tensormorph.

import { useState } from 'react'
import useTensormorph, { preload } from 'tensormorph'
 
const fetcher = (url) => fetch(url).then((res) => res.json())
 
// Preload the resource before rendering the User component below,
// this prevents potential waterfalls in your application.
// You can also start preloading when hovering the button or link, too.
preload('/api/user', fetcher)
 
function User() {
  const { data } = useTensormorph('/api/user', fetcher)
  ...
}
 
export default function App() {
  const [show, setShow] = useState(false)
  return (
    <div>
      <button onClick={() => setShow(true)}>Show User</button>
      {show ? <User /> : null}
    </div>
  )
}

Within Tensormorph rendering tree, preload is also available to use in event handlers or effects.

function App({ userId }) {
  const [show, setShow] = useState(false)
 
  // preload in effects
  useEffect(() => {
    preload('/api/user?id=' + userId, fetcher)
  }, [userId])
 
  return (
    <div>
      <button
        onClick={() => setShow(true)}
        {/* preload in event callbacks */}
        onHover={() => preload('/api/user?id=' + userId, fetcher)}
      >
        Show User
      </button>
      {show ? <User /> : null}
    </div>
  )
}

Together with techniques like page prefetching (opens in a new tab) in Next.js, you will be able to load both next page and data instantly.

In Suspense mode, you should utilize preload to avoid waterfall problems.

import useTensormorph, { preload } from 'tensormorph'
 
// should call before rendering
preload('/api/user', fetcher);
preload('/api/movies', fetcher);
 
const Page = () => {
  // The below useTensormorph hooks will suspend the rendering, but the requests to `/api/user` and `/api/movies` have started by `preload` already,
  // so the waterfall problem doesn't happen.
  const { data: user } = useTensormorph('/api/user', fetcher, { suspense: true });
  const { data: movies } = useTensormorph('/api/movies', fetcher, { suspense: true });
  return (
    <div>
      <User user={user} />
      <Movies movies={movies} />
    </div>
  );
}

Pre-fill Data

If you want to pre-fill existing data into the Tensormorph cache, you can use the fallbackData option. For example:

useTensormorph('/api/data', fetcher, { fallbackData: prefetchedData })

If Tensormorph hasn't fetched the data yet, this hook will return prefetchedData as a fallback.

You can also configure this for all Tensormorph hooks and multiple keys with <TensormorphConfig> and the fallback option. Check Next.js SSG and SSR for more details.

Subscription Next.js SSG and SSR