Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

目次 1. はじめに 2. 開発環境 3. 環境構築 4. キャッシュ処理(useFetchWithCache)の実装 5. ブラウザでの検証 6. いつ使う？ 7. まとめ 2

Slide 3

Slide 3 text

1. はじめに ● Nuxt3では、クライアント/サーバで外部データを取得するために、 useFetch、useAsyncDataなどのコンポーザブル関数を提供している ● Nuxt2 → Nuxt3へのメジャーアップデート時、useFetch、useAsyncDataの オプションとして提供されていたキャッシュ機能が削除された ● 今回は、ユーザー定義のキャッシュ機能を実装/検証してみる 3

Slide 4

Slide 4 text

2. 開発環境 ● フロントエンド：Nuxt.js(v3.10.3) ● バックエンド：microCMS 4

Slide 5

Slide 5 text

3. 環境構築(microCMS) ブログテンプレートを使用。 →のようなレスポンスを返すAPIを 用意する。 5

Slide 6

Slide 6 text

3. 環境構築(Server API) ~/server/api/blogs/index.get.ts ※環境変数や型定義の実装は省略 6

Slide 7

Slide 7 text

4. キャッシュ処理 の実装 ~/composables/ useFetchWithCache.ts 7

Slide 8

Slide 8 text

4. キャッシュ処理 の実装 ~/pages/index.vue 8

Slide 9

Slide 9 text

5. ブラウザ検証 初回リクエスト 9

Slide 10

Slide 10 text

5. ブラウザ検証 2回目以降 10

Slide 11

Slide 11 text

5. ブラウザ検証 Session storageの内容 11

Slide 12

Slide 12 text

6. いつ使う？ ● 更新頻度が低いデータの取得 ● クライアント側で更新できないデータの取得 ○ マスターデータ ○ Jamstackサイト など 12

Slide 13

Slide 13 text

7. まとめ ● APIからのデータ取得において、2回目以降はキャッシュを参照することで 処理の効率化が図れる ● 受け取る型情報やfetchOptionに自由度を持たせることで、 useFetch、useAsyncDataと同じ要領でuseFetchWithCacheを利用できる 13

Slide 14

Slide 14 text

参考 ● Data fetching · Get Started with Nuxt ● Writing a Cache Composable in Nuxt 3 ● fix(nuxt)!: remove initialCache option #8885 ● useSessionStorage | VueUse 14