CSRとSWRを用いたクライアントサイドでのキャッシュ戦略

kei615ykhm / logic-loom-nextjs14

LogicLoom is a memo app for engineers created as personal developers. There are no release plans. We will proceed with development while learning practical usage of Next.js, TypeScript, TailwindCSS, Vercel, and Supabase.

0 stars 0 forks source link

概要・目的

issue: #1 にてご提案いただいた内容に沿って、クライアントサイドでのキャッシュ戦略について議論します。

情報整理と各設定の相性

SSG: データベースに保存されたメモのデータを更新したり追加しても、再度ビルドするまで一切の更新が反映されないため、更新されるごとにビルドするとサーバーの負荷が増えてしまう。
SSR: アクセスされるたびに情報取得するため、取得に時間がかかった場合はユーザーには画面が止まって見えてしまう。
ISR: 定期的にデータを更新するが、ユーザー自身がデータ取得のタイミングを選べないため古い情報を表示してしまう可能性が高い。
CSR: アクセスがあったときにクライアントサイドでデータフェッチを行い、フェッチの終了時に状態を更新して再描画するため常に最新のデータを取得できる。

メモアプリの基本機能として、たとえばパソコンで入力したデータを別の端末で確認したときに情報が更新されていないのはアプリとして致命的な問題になる。そのため、情報が常に最新かつ信頼性が高い状態にするのを重視して設計する。

それを踏まえると、CSRが最初の候補、SSRが次点の候補に挙がる。ただし、メモアプリはSEOを考慮しなくて良いため、CSRを使用してクライアントサイドでのキャッシュ戦略を練るのが最善と考える。

キャッシュ戦略の方向性

クライアントサイドでAPIを叩いてデータを取得して端末を切り替えた時にデータの更新を行う
リアルタイム性を重視し、初回ロードよりもユーザーの操作に対するレスポンス速度を求める
各クライアントが必要なデータを必要な時に取得しサーバーの負荷を分散させる
Supabaseの無料枠で運用することを考慮する

ユーザー体験とサーバー・データベース要件を考慮しながらCSR特有の待ち時間と非同期処理を実現するには、ユーザーがダッシュボードのメモ一覧からメモを選択し、モーダルを立ち上げながら裏でデータフェッチと再描画の処理を行うようにするのが最適ではないかと考えました。

そのために、以下のuseSWR設定を組み合わせてみるのはいかがでしょうか。

revalidateOnFocus: trueを用いてユーザーがアプリにフォーカスしたときに最新データを取得する

revalidateOnReconnect: trueを用いてネットワーク接続が回復したタイミングで再検証を行う

ダッシュボードからメモを選択し、モーダルを開きながらopenMemoModal関数で詳細情報を取得しつつmutate関数で更新する

必要な時に必要なだけのデータを更新することでサーバーの負荷を抑えつつ、自動更新を使用しないことでデータベース要件も満たせますし、ユーザーが待たされていると感じることもない調整ができるはずです。

@niaka3dayo

考え方はそれで問題ないので、一度それで作ってみるといいと思います

kei615ykhm / logic-loom-nextjs14