仕事で Next.js の prefetch がどういった場合に動作するか調査する必要があったので内容をまとめる。

公式 document を見てみると以下のように記載されている。

prefetch - Prefetch the page in the background. Defaults to true. Any  that is in the viewport (initially or through scroll) will be preloaded. Prefetch can be disabled by passing prefetch={false}. Pages using Static Generation will preload JSON files with the data for faster page transitions

静的生成を使用しているページは、ページ遷移を高速化するために、データで JSON ファイルをプリロードします。

この説明だけでも動作のイメージはできるが念のため実際に動かしながら検証してみた。

※以下の検証はすべて Next.js v10 系でおこなっています。

getServerSideProps を使う場合

prefetch されるのは遷移先で必要になる js のみで、getServerSideProps 内で記載されている処理は prefetch の段階では動かない。

// prefetchでは実行されない
export const getServerSideProps = async ({
  query,
}: GetServerSidePropsContext) => {
  try {
    // 何らかのデータ取得非同期処理
    return { props: { data } };
  } catch (error) {
    return {};
  }
};

※getServerSideProps が実装されているページ に next/link で遷移した場合は、Next.js はサーバに API リクエストを送信して getServerSideProps を実行した結果を含む json を返す。
getServerSideProps の処理は SSR の初回表示のときにだけ動くわけではないので注意が必要。
こちらもドキュメントに記載があるが、 getServerSideProps という字面から SSR 時にしか動かないと勘違いしていた。

getStaticProps で静的に生成されたページの場合

遷移先で必要になる js とgetStaticProps で事前に生成されている json が prefetch される。

つまりこのような処理が書かれている場合、

export async function getStaticProps({ params }) {
  const post = await getPost();
  return {
    props: {
      post,
    },
  };
}

getServerSideProps とは異なり以下の json が prefetch される。

{
  "pageProps": {
    "post": {
      // 省略
    }
  },
  "__N_SSG": true
}

まとめ

以上をまとめると

• getServerSideProps
  • prefetch 時には実行されない
• getStaticProps
  • 事前に生成されていた json を prefetch 時に取得する

となる。