Remixでブラウザキャッシュする方法を調べてみた

対象読者

• Remix使いたい人

クライアントで取得したデータのキャッシュに迷う

Remix v2.4.0からクライアントでのデータフェッチがサポートされました
これにより、従来のサーバーでのデータ取得と組み合わせて、柔軟なデータ取得戦略を取ることができます
最近ではSPAModeも追加されたので、採用を検討している方もいらっしゃると思います
私も、この柔軟さが気に入り、新規プロジェクトにRemixを使うことにしました

ただ実際に使ってみて、クライアントで取得したデータをよしなにキャッシュしてくれない割に、ReactHookと相性がわるい点が不満でした

clientLoaderでカスタムフックが使えない

下の図はRemixのデータフローを表しています

Remixのデータフロー図

Loadersでデータを取得する際に、取得したデータをキャッシュしたいと思いました

export async function clientLoader() {
　// ブラウザキャッシュが存在していたら、early return
　// キャッシュが存在しない場合、APIを叩く
  const data = await fetchDataFromApi();
　// ここで、dataをブラウザキャッシュしたい
  return data;
}

export default function Component() {
  const data = useLoaderData<typeof loader>();
  return <>...</>;
}

具体的にはTanstackQueryをclientLoader内で使いたいのです
しかし、clientLoaderでReactのHookは使えないので、TanstackQueryも使えません
そもそも、Remixは、データフローがきっちり決まっており、他のライブラリなどを使用しなくていいというスタンスをとっているので、データフェッチ系ライブラリとの相性は悪いでしょう。
Tanstack Queryの方では、ComponentでuseQueryを呼び出せばいいよ、ということみたい、、
一応ライブラリはあるみたいですが、サーバーで取得したデータをブラウザキャッシュする用途に限定されそうです

まとめ

• Remixでブラウザキャッシュしたいなら、独自実装かライブラリを使用する

ご意見や間違っている箇所があればお気軽にコメントいただければ幸いです！