【Next.js】next/linkの画面遷移（CSR）から画面反映までの流れの図解解説

Next.jsのページのレンダリングはデフォルトでPre-rendering、つまりSSR（Server-side Rendering）もしくはSG（Static Site Generation）です。¹
しかし、Next.jsのルータ機能を利用するとクライアントサイドによる画面遷移、つまりCSRを実現できます。Next.jsのルータ機能にはnext/linkとnext/routerがあります。

今回はnext/linkを利用して画面を遷移してから最終的な画面が表示されるまでの過程について紹介します。

next/linkによる画面遷移の全体像

next/linkを利用した画面遷移の流れを図で表現すると以下のようになります。

以下ではそれぞれの過程について解説をします。

Linkコンポーネント経由で画面遷移する

next/linkのLinkコンポーネントを利用してリンクを作成し、クリックによって画面遷移をします。

なお、本番環境のNext.jsではこの時（ブラウザのビューポートにLinkコンポーネントが表示された時）、バックグラウンドでリンク先のページを自動的にプリフェッチします。そのため、next/linkによる画面遷移はほぼ瞬時に行われることになります。²

PropsをサーバサイドからJSON形式で取得する

レンダリングに必要なPropsをサーバサイドからJSON形式で取得します。

画面の遷移先がSSRのページの場合はgetServerSideProps()によってPropsの取得とJSONの作成が行われます。³
一方、SGのページ場合はビルド時にgetStaticProps()によってHTMLページとあわせてJSONが事前に生成されています。⁴

ブラウザ上でCSRを実行する

ブラウザのJavaScriptと取得したJSONをもとにCSRを実行します。

なお、next/linkを利用した画面遷移ではレンダリング時にCookieやWindow関数といったブラウザの機能を参照できます。
例えば、以下のページコンポーネントのwindow.alert()はSSRやSGではサーバエラーになりますが、next/linkを利用すると画面遷移時に警告ダイアログが正常に表示されます。

import type { NextPage } from "next";

const Example: NextPage = () => {

  // next/link経由で画面遷移してきた場合: 警告ダイアログが正常に表示される
  // SSR・SGで画面表示した場合（リロードなど）: サーバエラー（window is not defined）になる
  window.alert()

  return (
    ...
  );
};

export default Example;

レンダリング結果をマウントする

レンダリング結果をマウントします。マウント後、レンダリング結果が画面に反映されます。

マウント後、ブラウザ上で副作用を実行する

副作用とは「JSXあるいはTSXからUIを構築する処理」以外に関する処理のことをいいます。

React.jsによって構築されたUIが画面に表示され、DOMにアクセスできる状態になったタイミングで副作用を実行します。
副作用の実行は、関数コンポーネントであれば副作用フックと呼ばれるuseEffectやuseSWR、クラスコンポーネントであればcomponentDidMount・componentDidUpdate・componentWillUnmountで行います。

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！