Package Exports

preload-next
preload-next/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (preload-next) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Preload Link NextJS

A variant of the Link component in NextJS that will execute a preload function that is attached to the page to allow for preloading data on hover. Providing the illusion of a faster page load as the data is loaded when the user hovers over the link.

Demo

https://preload-next-example.vercel.app

Installation

yarn install preload-next

npm install preload-next

Usage

pages/index.tsx

export const Header = () => {
  return (
    <div>
      <h1>Header</h1>
      <nav>
        <LinkPreload prefetch={false} href="/pokemon">
          Pokemon
        </LinkPreload>
      </nav>
    </div>
  );
};
const Home = () => {
  return (
    <div>
      <Header />
      <h2>Hello</h2>
    </div>
  );
};

pages/pokemon.tsx

import dynamic from "next/dynamic";
import { NextPageContext } from "next/types";
import { useQuery } from "react-query";
import { PreloadContext } from "link-preload";

type Pokemon = {
  name: string;
};

const getPokemons = async (): Promise<Pokemon[]> => {
  return new Promise((resolve) => {
    setTimeout(async () => {
      const response = await fetch("https://pokeapi.co/api/v2/pokemon");
      resolve((await response.json()).results);
    }, 500);
  });
};

const PokemonPage = () => {
  const { data: pokemons, isLoading } = useQuery("pokemon", getPokemons);

  return (
    <div>
      <h2>Pokemon</h2>

      <ul>
        {pokemons &&
          pokemons.map((pokemon: any) => (
            <li key={pokemon.name}>{pokemon.name}</li>
          ))}

        {isLoading && <li>Loading...</li>}
      </ul>
    </div>
  );
};

const preload = async ({ queryClient }: PreloadContext) => {
  if (!queryClient.getQueryCache().find("pokemon")) {
    queryClient.prefetchQuery("pokemon", getPokemons);
  }
};

const getInitialProps = async (ctx: NextPageContext) => {
  if (typeof window === "undefined") {
    const { QueryClient, dehydrate } = await import("react-query");
    const queryClient = new QueryClient();
    await queryClient.prefetchQuery("pokemon", getPokemons);

    return {
      dehydratedState: dehydrate(queryClient),
    };
  }

  return {};
};

const PPage = dynamic(() => Promise.resolve(PokemonPage), {
  ssr: false,
}) as any;

PPage.preload = preload;
PPage.getInitialProps = getInitialProps;

export default PPage;