SWRのプリフェッチを利用してパフォーマンスとアクセシビリティをまとめて改善！

記事のアイキャッチ画像。「SWRのプリフェッチを利用してパフォーマンスとアクセシビリティをまとめて改善！」と書いてある。

こんにちは！SmartHRプロダクトエンジニアのhimiです。

SWRのプリフェッチ機能を利用してパフォーマンスとアクセシビリティを改善することができたので、その内容を簡単に紹介します。

SWRのプリフェッチ機能

SWRとは、キャッシュベースの状態管理ライブラリです。
swr.vercel.app
SWRを利用することで、フェッチ結果のレスポンスの状態管理を簡単に行うことができます。
同じような並びのライブラリとして、TanStack QueryやGraphQL向けのApollo Clientなどがあります。

SWRには、プリフェッチ機能が備わっています。プリフェッチ機能を使うと、必要になることがわかっているデータを事前にフェッチしておくことができます。
リンク先のページで必要になることがわかっているデータを事前にフェッチしておくことで、ページ遷移後のローディング表示の時間を短縮することができます¹。

利用方法はとても簡単で、以下のようにpreload関数を実行するだけです。
React のレンダリングツリー内で、イベントコールバックやuseEffectの中で実行することもできます。

import Link from 'next/link'
import { preload } from 'swr'

const fetcher = (url: string) => fetch(url).then((res) => res.json())
preload('/api/users', fetcher) // /usersページで必要になるデータを事前にフェッチする

const Page = () => (
  <div>
    <Link href="/users">ユーザーページへ</Link>
  </div>
)

プリフェッチ機能のメリット

ここからは、プリフェッチ機能による改善の事例を紹介します。

パフォーマンスの向上

ほとんどの場合、プリフェッチ機能の主目的はパフォーマンス改善になるはずです。
ページにリンクが設置してあるとき、遷移先のページで必要になるデータのフェッチを完了させておくことで、ページ遷移後のLoader表示のステップを無くすことができます。

プリフェッチ未実装の場合は遷移前と遷移後の間にLoaderのみが表示されている状態が存在するが、プリフェッチ実装済みの場合は遷移前と遷移後の間にLoader表示のステップは存在しない。 — プリフェッチ実装有無の比較

アクセシビリティの向上

「ページのタイトルにフェッチ結果を利用する」というシーンはよくあると思います。
例として、特定のユーザーの情報を表示するページ（/users/:user_id）で、ページのタイトルに「◯◯さんのページ」と設定するケースを考えてみます。

ページのタイトルに設定する「○○さん」の名前は、URLの:user_idを利用してフェッチしたレスポンスを元に設定します。
このとき、何もケアしない場合、フェッチが完了するまでtitleに「さんのページ」という不完全なタイトルが設定されてしまいます。

スクリーンリーダーユーザーは、ページ遷移直後にページタイトルの読み上げを聞き、今表示しているページを認識します。そのため、遷移直後に不完全なタイトルが設定されていると混乱を招いてしまいます。
データをプリフェッチしておいて、ページ遷移時に既にタイトルに利用するデータが準備できている状態にしておくことで、不完全なタイトルの設定を防止することができます。

プリフェッチ機能の注意点

プリフェッチ機能を扱う際の注意点を紹介します。

プリフェッチのトレードオフを考慮する

プリフェッチは「必要になるであろうデータを事前に準備しておく」という仕組みですが、一方で「不要なフェッチを行なってしまう場合がある」というトレードオフがあります。
画面内に大量のリンクがある場合、すべてのリンク先で必要になるデータをプリフェッチしてしまうと、ネットワークやデータベースに不要な負荷がかかってしまいます。
このような場合、リンクにホバーしたタイミングや、リンクがビューポートに入ったタイミングでプリフェッチを開始するなどの対策が考えられます。

遷移前にプリフェッチが完了している前提での実装は避ける

リンク先で必要になるデータのフェッチをページ遷移前に完了できるかどうかは、当然ながらバックエンド側の処理時間やユーザーのネットワーク環境に依存します。
また、URLを直接入力してページを表示したような場合は、プリフェッチの恩恵を受けることはできません。
そのため、プリフェッチを実装している場合でもLoaderの表示やページタイトルの設定内容のケアは必要です。