Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Vue3プロジェクトで swrvの導入に挑戦してみた!/v-tokyo18-link-and-...

Vue3プロジェクトで swrvの導入に挑戦してみた!/v-tokyo18-link-and-motivation

【Vue.js v-tokyo Meetup #18】
リンクアンドモチベーション登壇資料(2023/08/08)

『Vue3プロジェクトで swrvの導入に挑戦してみた!』

#v_tokyo18 #リンクアンドモチベーション #リンモチ
=============================================
【イベント情報】
■イベントページ
 https://vuejs-meetup.connpass.com/event/288920/

【株式会社リンクアンドモチベーション】
■お問い合わせ
 [email protected]
■Entrancebook
 https://note.com/lmi/n/n179505e048f4
■テックブログ
 https://link-and-motivation.hatenablog.com/
=============================================

More Decks by リンクアンドモチベーション

Transcript

  1. 2 © Link and Motivation Group シモディ 下田 裕介(@_4mdy) 株式会社リンクアンドモチベーション

    プラットフォーム推進グループ • 2020年新卒入社 • 入社以来ずっとモチベーションクラウド開発に従事 • フロントエンドメインだけどバックエンドも書くよ • プロダクトマネジメントもやる • 「赤から」と「Coco壱」が好き 自己紹介
  2. 7 © Link and Motivation Group swrvについて • swrvは、SWRをVue.jsアプリケーションに適応するための ライブラリである。

    • SWR(Stale While Revalidate)とはキャッシュ戦略の1つ。 ◦ Stale = キャッシュが古くなった状態 ◦ Revalidate = キャッシュを新しくする • データfetchだけでなく更新処理でもキャッシュ機能が利用可能。 • 定期ポーリングやフォーカス時の自動再検証もやってくれる。 => キャッシュ機能以外にも使える!
  3. 8 © Link and Motivation Group SWR(Stale While Revalidate)について •

    既存のキャッシュを返しつつ、 裏側でサーバー通信を行う。 ◦ 新しいデータを取ってくるまでは、キャ ッシュデータがすぐに描画される。 ◦ 通信エラーの場合もキャッシュを返却。 => 初回読み込み以降は、自動的に最新の情 報を反映し続けられるのが利点。
  4. 11 © Link and Motivation Group 理想の状態 ページコンポーネントで一括fetchして propsバケツリレーになるのは嫌。 データを利用するコンポーネントから、

    fetchしたいが、呼び出し数がネック。 => swrvを使うことで、各コンポーネント から同タイミングで呼ばれるfetchをまとめ てもらいたかった。
  5. 13 © Link and Motivation Group 導入プロセス① 導入準備 対象api選定 api置き換え

    キャッシュ 設定 検証・測定 • swrvをいきなり全てのapiに適応するのではなく、一部のapiで実際に試して 開発者体験/ユーザー体験がどう変わるのかを検証してみた。 • Rails側でCache-Controlヘッダーの設定値を変更する。 ◦ max-ageの設定(当初はmax-age=0) ◦ stale-while-revalidateの設定(当初はmust-revalidate)
  6. 14 © Link and Motivation Group 導入プロセス② 1️⃣影響範囲の少ないapi 2️⃣呼び出し重複が存在するapi の2つの観点で洗い出した。

    => 影響範囲が少なく、結果が出やすい箇所を事前に洗い出して、実装を始めた! 導入準備 対象api選定 api置き換え キャッシュ 設定 検証・測定
  7. 15 © Link and Motivation Group 導入プロセス③ Before(置き換え前の状態) • 他ライブラリへの移行も見据えて、PureなTypeScriptでapiを実装していた。

    • swrvはVueのインスタンスの中でしか使うことができない。 導入準備 対象api選定 api置き換え キャッシュ 設定 検証・測定
  8. 16 © Link and Motivation Group 導入プロセス③ After(置き換える際に対応したこと) • Vueのwatch,

    computed等の機能を用いてuseSWRVを利用して実装。 • レスポンスのdataからリアクティブなentityを作成する。 導入準備 対象api選定 api置き換え キャッシュ 設定 検証・測定
  9. 17 © Link and Motivation Group 導入プロセス④ 困ったこと • キャッシュの設定値(useSWRVの第3引数)が細かくて違いがわかりづらい。

    ◦ dedupingIntervalとrevalidateDebounceの違いは? ◦ ttlとserverTtlの違いは? 導入準備 対象api選定 api置き換え キャッシュ 設定 検証・測定
  10. 19 © Link and Motivation Group 導入プロセス④ 意識したこと・取り入れたこと • dedupingInterval(当該時間内の同一キーリクエストの重複排除)の値は

    初期値よりも多めに設定。 • revalidateOnFocus(windowsのfocus時の再検証)はfalseにして、 自動取得はoffに。=> 逐次更新が必要なアプリは、自動更新が活きてくるはず 導入準備 対象api選定 api置き換え キャッシュ 設定 検証・測定
  11. 20 © Link and Motivation Group 導入プロセス④ 導入準備 対象api選定 api置き換え

    キャッシュ 設定 検証・測定 Before • 4つのapiが同時に呼ばれていた。。 • 合計1.5秒程度かかっていた。。 • キャッシュも効いていない。。
  12. 21 © Link and Motivation Group 導入プロセス④ 導入準備 対象api選定 api置き換え

    キャッシュ 設定 検証・測定 After • apiがまとめられた! • キャッシュも効いて、200ms前後に! • 先にキャッシュが返ってきて、そのあと サーバーにデータを取得できている!
  13. 23 © Link and Motivation Group • vercel/swrとほぼ同等の機能が利用可能に! • SWR・キャッシュ以外の機能も熱い!

    • 軽量でバンドルサイズにも影響がほとんどない! • 公式ドキュメントしか情報がほとんどない状態なので、コミュニティでどんどん意見交 換しましょう
  14. 24 © Link and Motivation Group • vercel/swrとほぼ同等の機能が利用可能に! • SWR・キャッシュ以外の機能も熱い!

    • 軽量でバンドルサイズにも影響がほとんどない! • 公式ドキュメントしか情報がほとんどない状態なので、コミュニティでどんどん意見交 換しましょう Vueユーザーなら即swrv
  15. 25 © Link and Motivation Group お知らせ • エンジニアリングマネージャー •

    プロダクトマネージャー • テックリード • サーバーサイドエンジニア • フロントエンドエンジニア • SRE • データエンジニア • CRM • UXデザイナー 週1でテックブログ更新しています! まずはカジュアルにお話しましょう! ご連絡お待ちしております! 全職種、積極採用中です!