【Nuxt3】useFetchWithCacheでAPIレスポンスをキャッシュさせる

Nuxt3では、Data FetchingにおいてuseFetchやuseAsyncDataなどのビルトインコンポーザブルが提供されています。
今回はこれらのコンポーザブルを拡張し、APIからのレスポンス内容をキャッシュとしてブラウザに保存することで、より便利なData Fetching手法を検証します。

Transcript

1. 【Nuxt3】 useFetchWithCacheで APIレスポンスをキャッシュさせる @dev.nakaya
2. 目次 1. はじめに 2. 開発環境 3. 環境構築 4. キャッシュ処理(useFetchWithCache)の実装 5. ブラウザでの検証 6. いつ使う？ 7. まとめ 2
3. 1. はじめに • Nuxt3では、クライアント/サーバで外部データを取得するために、 useFetch、useAsyncDataなどのコンポーザブル関数を提供している • Nuxt2 → Nuxt3へのメジャーアップデート時、useFetch、useAsyncDataの オプションとして提供されていたキャッシュ機能が削除された • 今回は、ユーザー定義のキャッシュ機能を実装/検証してみる 3
4. 2. 開発環境 • フロントエンド：Nuxt.js(v3.10.3) • バックエンド：microCMS 4
5. 3. 環境構築(microCMS) ブログテンプレートを使用。 →のようなレスポンスを返すAPIを 用意する。 5
6. 3. 環境構築(Server API) ~/server/api/blogs/index.get.ts ※環境変数や型定義の実装は省略 6
7. 4. キャッシュ処理 の実装 ~/composables/ useFetchWithCache.ts 7
8. 4. キャッシュ処理 の実装 ~/pages/index.vue 8
9. 5. ブラウザ検証 初回リクエスト 9
10. 5. ブラウザ検証 2回目以降 10
11. 5. ブラウザ検証 Session storageの内容 11
12. 6. いつ使う？ • 更新頻度が低いデータの取得 • クライアント側で更新できないデータの取得 ◦ マスターデータ ◦ Jamstackサイト など 12
13. 7. まとめ • APIからのデータ取得において、2回目以降はキャッシュを参照することで 処理の効率化が図れる • 受け取る型情報やfetchOptionに自由度を持たせることで、 useFetch、useAsyncDataと同じ要領でuseFetchWithCacheを利用できる 13
14. 参考 • Data fetching · Get Started with Nuxt • Writing a Cache Composable in Nuxt 3 • fix(nuxt)!: remove initialCache option #8885 • useSessionStorage | VueUse 14