このページは Cloud Translation API によって翻訳されました。

クイックリンクで React のナビゲーションを高速化

React のシングルページアプリケーションのクイックリンクを使用して、ビューポート内のリンクを自動的にプリフェッチします。

Addy Osmani

Anton Karlovskiy

Demián Renzulli

プリフェッチは、次のページのリソースを事前にダウンロードすることでナビゲーションを高速化する手法です。Quicklink は、ビューに入ったリンクを自動的にプリフェッチすることで、この手法を大規模に実装できるライブラリです。

マルチページアプリでは、ライブラリがビューポート内のリンクのドキュメント（/article.html など）をプリフェッチして、ユーザーがこれらのリンクをクリックしたときに、HTTP キャッシュから取得できるようにします。

シングルページアプリでは通常、ルートベースのコード分割と呼ばれる手法が使用されます。これにより、ユーザーが特定のルートに移動したときにのみ、そのルートのコードを読み込むことができます。これらのファイル（JS、CSS）は一般に「チャンク」と呼ばれます。

とは言え、これらのサイトでは、ドキュメントをプリフェッチするのではなく、ページで必要になる前にチャンクをプリフェッチすることで、最大のパフォーマンス向上が得られます。

これを実現するには、次のような課題があります。

特定のルート（/article など）にどのチャンク（article.chunk.js など）が関連付けられているかを、そのルートに到着する前に判断することは容易ではありません。
最新のモジュールバンドラは通常、バージョニングに長期ハッシュを使用するため、これらのチャンクの最終ページ URL 名は予測できません（例: article.chunk.46e51.js）。

このガイドでは、これらの課題を Quicklink で解決し、React のシングルページアプリで大規模にプリフェッチを実現する方法について説明します。

各ルートに関連付けられたチャンクの特定

quicklink のコアコンポーネントの 1 つに、ルートとチャンクの JSON 辞書を生成できる webpack プラグインである webpack-route-manifest があります。これにより、ライブラリはアプリケーションの各ルートで必要になるファイルを把握し、ルートがビューに入ったときにそれらのファイルをプリフェッチできます。

プロジェクトにプラグインを統合すると、各ルートを対応するチャンクと関連付けた JSON マニフェストファイルが生成されます。

{
  '/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',
    },
  ],
}

このマニフェストファイルは、次の 2 つの方法でリクエストできます。

URL（例: https://site_url/rmanifest.json）。
window.__rmanifest の window オブジェクト経由。

ビューポート内のルートのチャンクをプリフェッチする

マニフェストファイルが使用可能になったら、次のステップとして npm install quicklink を実行して Quicklink をインストールします。

次に、高次コンポーネント（HOC）の withQuicklink() を使用して、リンクがビューに入ったときに特定のルートをプリフェッチするよう指示できます。

次のコードは、4 つのリンクを含むトップメニューをレンダリングする React アプリの App コンポーネントに属します。

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>
);

これらのルートがビューに追加されたときにプリフェッチするよう Quicklink に伝えるには:

コンポーネントの先頭で quicklink HOC をインポートします。
各ルートを withQuicklink() HOC でラップし、ページコンポーネントとオプションパラメータを渡します。

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>
);

withQuicklink() HOC は、ルートのパスをキーとして使用して、関連するチャンクを rmanifest.json から取得します。内部でリンクがビューに入ると、ライブラリは各チャンクの <link rel="prefetch"> タグをページに挿入して、プリフェッチできるようにします。プリフェッチされたリソースは、ブラウザによって最も低い優先度でリクエストされ、HTTP キャッシュに 5 分間保持されます。その後、リソースの cache-control ルールが適用されます。その結果、ユーザーがリンクをクリックして特定のルートに移動すると、キャッシュからチャンクが取得され、そのルートのレンダリングにかかる時間が大幅に短縮されます。

おわりに

プリフェッチにより、今後のナビゲーションの読み込み時間を大幅に短縮できます。React のシングルページアプリでは、各ルートに関連付けられたチャンクを、ユーザーが到達する前に読み込むことでこれを実現できます。React SPA 用の Quicklink のソリューションは、リンクがビューに入ったときにプリフェッチするファイルを決定するために、webpack-route-manifest を使用してルートとチャンクのマップを作成します。サイト全体にこの手法を実装することで、ナビゲーションを大幅に改善し、即座に表示されるようにすることができます。