© Link and Motivation Group Vue3プロジェクトで swrvの導入に挑戦してみた！ リンクアンドモチベーション プラットフォーム推進グループ 下田 裕介

2 © Link and Motivation Group シモディ 下田 裕介（@_4mdy） 株式会社リンクアンドモチベーション プラットフォーム推進グループ ● 2020年新卒入社 ● 入社以来ずっとモチベーションクラウド開発に従事 ● フロントエンドメインだけどバックエンドも書くよ ● プロダクトマネジメントもやる ● 「赤から」と「Coco壱」が好き 自己紹介

モチベーションクラウド 診断 変革 ※ 2022年度 実績 10,060 社 312 万人

4 © Link and Motivation Group 今日の目的 apiのパフォーマンス面でのFEの課題や propsバケツリレーで冗長になっていたFEコードを swrvを導入することでどう改善したかを伝えること。 ※時間も短いので、swrvの細かい仕様については触れません。

5 © Link and Motivation Group アジェンダ ● 前提 ● 導入プロセス ● 総括

6 © Link and Motivation Group アジェンダ ● 前提 ● 導入プロセス ● 総括

7 © Link and Motivation Group swrvについて ● swrvは、SWRをVue.jsアプリケーションに適応するための ライブラリである。 ● SWR（Stale While Revalidate）とはキャッシュ戦略の1つ。 ○ Stale = キャッシュが古くなった状態 ○ Revalidate = キャッシュを新しくする ● データfetchだけでなく更新処理でもキャッシュ機能が利用可能。 ● 定期ポーリングやフォーカス時の自動再検証もやってくれる。 => キャッシュ機能以外にも使える！

8 © Link and Motivation Group SWR（Stale While Revalidate）について ● 既存のキャッシュを返しつつ、 裏側でサーバー通信を行う。 ○ 新しいデータを取ってくるまでは、キャ ッシュデータがすぐに描画される。 ○ 通信エラーの場合もキャッシュを返却。 => 初回読み込み以降は、自動的に最新の情 報を反映し続けられるのが利点。

9 © Link and Motivation Group なぜswrvを導入したのか ページ描画時に複数の同一apiを叩いていて 通信量が増えていた。 取得したコンポーネントで Propsバケツリレーが発生していた。

10 © Link and Motivation Group なぜswrvを導入したのか ページ描画時に複数のapiを叩いていて 通信量が増えていた。 取得したコンポーネントで Propsバケツリレーが発生していた。 パフォーマンス面の 課題 コードの複雑性の 課題

11 © Link and Motivation Group 理想の状態 ページコンポーネントで一括fetchして propsバケツリレーになるのは嫌。 データを利用するコンポーネントから、 fetchしたいが、呼び出し数がネック。 => swrvを使うことで、各コンポーネント から同タイミングで呼ばれるfetchをまとめ てもらいたかった。

12 © Link and Motivation Group アジェンダ ● 前提 ● 導入プロセス ● 総括

13 © Link and Motivation Group 導入プロセス① 導入準備 対象api選定 api置き換え キャッシュ 設定 検証・測定 ● swrvをいきなり全てのapiに適応するのではなく、一部のapiで実際に試して 開発者体験/ユーザー体験がどう変わるのかを検証してみた。 ● Rails側でCache-Controlヘッダーの設定値を変更する。 ○ max-ageの設定（当初はmax-age=0） ○ stale-while-revalidateの設定（当初はmust-revalidate）

14 © Link and Motivation Group 導入プロセス② 1️⃣影響範囲の少ないapi 2️⃣呼び出し重複が存在するapi の2つの観点で洗い出した。 => 影響範囲が少なく、結果が出やすい箇所を事前に洗い出して、実装を始めた！ 導入準備 対象api選定 api置き換え キャッシュ 設定 検証・測定

15 © Link and Motivation Group 導入プロセス③ Before（置き換え前の状態） ● 他ライブラリへの移行も見据えて、PureなTypeScriptでapiを実装していた。 ● swrvはVueのインスタンスの中でしか使うことができない。 導入準備 対象api選定 api置き換え キャッシュ 設定 検証・測定

16 © Link and Motivation Group 導入プロセス③ After（置き換える際に対応したこと） ● Vueのwatch, computed等の機能を用いてuseSWRVを利用して実装。 ● レスポンスのdataからリアクティブなentityを作成する。 導入準備 対象api選定 api置き換え キャッシュ 設定 検証・測定

17 © Link and Motivation Group 導入プロセス④ 困ったこと ● キャッシュの設定値（useSWRVの第3引数）が細かくて違いがわかりづらい。 ○ dedupingIntervalとrevalidateDebounceの違いは？ ○ ttlとserverTtlの違いは？ 導入準備 対象api選定 api置き換え キャッシュ 設定 検証・測定

18 © Link and Motivation Group 導入プロセス④ 設定だけでもこれだけ存在する。。。 （これでもvercel/SWRと比べると少ない）

19 © Link and Motivation Group 導入プロセス④ 意識したこと・取り入れたこと ● dedupingInterval（当該時間内の同一キーリクエストの重複排除）の値は 初期値よりも多めに設定。 ● revalidateOnFocus（windowsのfocus時の再検証）はfalseにして、 自動取得はoffに。=> 逐次更新が必要なアプリは、自動更新が活きてくるはず 導入準備 対象api選定 api置き換え キャッシュ 設定 検証・測定

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

21 © Link and Motivation Group 導入プロセス④ 導入準備 対象api選定 api置き換え キャッシュ 設定 検証・測定 After ● apiがまとめられた！ ● キャッシュも効いて、200ms前後に！ ● 先にキャッシュが返ってきて、そのあと サーバーにデータを取得できている！

22 © Link and Motivation Group アジェンダ ● 前提 ● 導入プロセス ● 総括

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

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

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