SWR を使っている SPA でページ遷移時にデータを更新する

SWR とは

SWR とはキャッシュとかまで含めていい感じにデータのロードを行ってくれる React のライブラリです。

やりたいこと

SWR はキャッシュを保持してパフォーマンスを向上させてくれる一方、 SPA でページ遷移したときに本来であればデータを更新してほしいのに更新できない、といったことが発生してしまいます。
そのため、ページ遷移の際にデータの再ロードをしてほいと思うようになりました。

解決方法

SWR のオプションで revalidateOnMount を有効化することで実現できるようになります。

useSWR(
  key,
  fetcher,
  {
    revalidateOnMount: true, // これを追加！
  }
);