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/

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

Transcript

1. © Link and Motivation Group Vue3プロジェクトで swrvの導入に挑戦してみた！ リンクアンドモチベーション プラットフォーム推進グループ 下田 裕介
2. 2 © Link and Motivation Group シモディ 下田 裕介（@_4mdy） 株式会社リンクアンドモチベーション プラットフォーム推進グループ • 2020年新卒入社 • 入社以来ずっとモチベーションクラウド開発に従事 • フロントエンドメインだけどバックエンドも書くよ • プロダクトマネジメントもやる • 「赤から」と「Coco壱」が好き 自己紹介
3. モチベーションクラウド 診断 変革 ※ 2022年度 実績 10,060 社 312 万人
4. 4 © Link and Motivation Group 今日の目的 apiのパフォーマンス面でのFEの課題や propsバケツリレーで冗長になっていたFEコードを swrvを導入することでどう改善したかを伝えること。 ※時間も短いので、swrvの細かい仕様については触れません。
5. 5 © Link and Motivation Group アジェンダ • 前提 • 導入プロセス • 総括
6. 6 © Link and Motivation Group アジェンダ • 前提 • 導入プロセス • 総括
7. 7 © Link and Motivation Group swrvについて • swrvは、SWRをVue.jsアプリケーションに適応するための ライブラリである。 • SWR（Stale While Revalidate）とはキャッシュ戦略の1つ。 ◦ Stale = キャッシュが古くなった状態 ◦ Revalidate = キャッシュを新しくする • データfetchだけでなく更新処理でもキャッシュ機能が利用可能。 • 定期ポーリングやフォーカス時の自動再検証もやってくれる。 => キャッシュ機能以外にも使える！
8. 8 © Link and Motivation Group SWR（Stale While Revalidate）について • 既存のキャッシュを返しつつ、 裏側でサーバー通信を行う。 ◦ 新しいデータを取ってくるまでは、キャ ッシュデータがすぐに描画される。 ◦ 通信エラーの場合もキャッシュを返却。 => 初回読み込み以降は、自動的に最新の情 報を反映し続けられるのが利点。
9. 9 © Link and Motivation Group なぜswrvを導入したのか ページ描画時に複数の同一apiを叩いていて 通信量が増えていた。 取得したコンポーネントで Propsバケツリレーが発生していた。
10. 10 © Link and Motivation Group なぜswrvを導入したのか ページ描画時に複数のapiを叩いていて 通信量が増えていた。 取得したコンポーネントで Propsバケツリレーが発生していた。 パフォーマンス面の 課題 コードの複雑性の 課題
11. 11 © Link and Motivation Group 理想の状態 ページコンポーネントで一括fetchして propsバケツリレーになるのは嫌。 データを利用するコンポーネントから、 fetchしたいが、呼び出し数がネック。 => swrvを使うことで、各コンポーネント から同タイミングで呼ばれるfetchをまとめ てもらいたかった。
12. 12 © Link and Motivation Group アジェンダ • 前提 • 導入プロセス • 総括
13. 13 © Link and Motivation Group 導入プロセス① 導入準備 対象api選定 api置き換え キャッシュ 設定 検証・測定 • swrvをいきなり全てのapiに適応するのではなく、一部のapiで実際に試して 開発者体験/ユーザー体験がどう変わるのかを検証してみた。 • Rails側でCache-Controlヘッダーの設定値を変更する。 ◦ max-ageの設定（当初はmax-age=0） ◦ stale-while-revalidateの設定（当初はmust-revalidate）
14. 14 © Link and Motivation Group 導入プロセス② 1️⃣影響範囲の少ないapi 2️⃣呼び出し重複が存在するapi の2つの観点で洗い出した。 => 影響範囲が少なく、結果が出やすい箇所を事前に洗い出して、実装を始めた！ 導入準備 対象api選定 api置き換え キャッシュ 設定 検証・測定
15. 15 © Link and Motivation Group 導入プロセス③ Before（置き換え前の状態） • 他ライブラリへの移行も見据えて、PureなTypeScriptでapiを実装していた。 • swrvはVueのインスタンスの中でしか使うことができない。 導入準備 対象api選定 api置き換え キャッシュ 設定 検証・測定
16. 16 © Link and Motivation Group 導入プロセス③ After（置き換える際に対応したこと） • Vueのwatch, computed等の機能を用いてuseSWRVを利用して実装。 • レスポンスのdataからリアクティブなentityを作成する。 導入準備 対象api選定 api置き換え キャッシュ 設定 検証・測定
17. 17 © Link and Motivation Group 導入プロセス④ 困ったこと • キャッシュの設定値（useSWRVの第3引数）が細かくて違いがわかりづらい。 ◦ dedupingIntervalとrevalidateDebounceの違いは？ ◦ ttlとserverTtlの違いは？ 導入準備 対象api選定 api置き換え キャッシュ 設定 検証・測定
18. 18 © Link and Motivation Group 導入プロセス④ 設定だけでもこれだけ存在する。。。 （これでもvercel/SWRと比べると少ない）
19. 19 © Link and Motivation Group 導入プロセス④ 意識したこと・取り入れたこと • dedupingInterval（当該時間内の同一キーリクエストの重複排除）の値は 初期値よりも多めに設定。 • revalidateOnFocus（windowsのfocus時の再検証）はfalseにして、 自動取得はoffに。=> 逐次更新が必要なアプリは、自動更新が活きてくるはず 導入準備 対象api選定 api置き換え キャッシュ 設定 検証・測定
20. 20 © Link and Motivation Group 導入プロセス④ 導入準備 対象api選定 api置き換え キャッシュ 設定 検証・測定 Before • 4つのapiが同時に呼ばれていた。。 • 合計1.5秒程度かかっていた。。 • キャッシュも効いていない。。
21. 21 © Link and Motivation Group 導入プロセス④ 導入準備 対象api選定 api置き換え キャッシュ 設定 検証・測定 After • apiがまとめられた！ • キャッシュも効いて、200ms前後に！ • 先にキャッシュが返ってきて、そのあと サーバーにデータを取得できている！
22. 22 © Link and Motivation Group アジェンダ • 前提 • 導入プロセス • 総括
23. 23 © Link and Motivation Group • vercel/swrとほぼ同等の機能が利用可能に！ • SWR・キャッシュ以外の機能も熱い！ • 軽量でバンドルサイズにも影響がほとんどない！ • 公式ドキュメントしか情報がほとんどない状態なので、コミュニティでどんどん意見交 換しましょう
24. 24 © Link and Motivation Group • vercel/swrとほぼ同等の機能が利用可能に！ • SWR・キャッシュ以外の機能も熱い！ • 軽量でバンドルサイズにも影響がほとんどない！ • 公式ドキュメントしか情報がほとんどない状態なので、コミュニティでどんどん意見交 換しましょう Vueユーザーなら即swrv
25. 25 © Link and Motivation Group お知らせ • エンジニアリングマネージャー • プロダクトマネージャー • テックリード • サーバーサイドエンジニア • フロントエンドエンジニア • SRE • データエンジニア • CRM • UXデザイナー 週１でテックブログ更新しています！ まずはカジュアルにお話しましょう！ ご連絡お待ちしております！ 全職種、積極採用中です！