Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
Search
mattsuu
June 24, 2024
Technology
5
1.3k
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
Vercel Meetup #1 (2024/06/25) での発表資料
https://vercel.connpass.com/event/321176/
mattsuu
June 24, 2024
Tweet
Share
More Decks by mattsuu
See All by mattsuu
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
140
React Aria で実現する次世代のアクセシビリティ
ryo_manba
5
2.3k
5分で分かる React Aria の 良いところ・これからなところ
ryo_manba
5
5.7k
アクセシブルなインクリメンタルサーチを作ってみた
ryo_manba
2
420
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
3.7k
Other Decks in Technology
See All in Technology
速くて安いWebサイトを作る
nishiharatsubasa
15
15k
Goで作って学ぶWebSocket
ryuichi1208
3
2.4k
遷移の高速化 ヤフートップの試行錯誤
narirou
5
870
OPENLOGI Company Profile for engineer
hr01
1
20k
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
390
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
190
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
260
一度 Expo の採用を断念したけど、 再度 Expo の導入を検討している話
ichiki1023
1
250
生成 AI プロダクトを育てる技術 〜データ品質向上による継続的な価値創出の実践〜
icoxfog417
PRO
5
1.9k
OPENLOGI Company Profile
hr01
0
60k
Iceberg Meetup Japan #1 : Iceberg and Databricks
databricksjapan
0
290
Helm , Kustomize に代わる !? 次世代 k8s パッケージマネージャー Glasskube 入門 / glasskube-entry
parupappa2929
0
290
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
74
9.2k
Docker and Python
trallard
44
3.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Agile that works and the tools we love
rasmusluckow
328
21k
Writing Fast Ruby
sferik
628
61k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Unsuck your backbone
ammeep
669
57k
Site-Speed That Sticks
csswizardry
4
400
Into the Great Unknown - MozCon
thekraken
35
1.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Transcript
Next.js の fetch 拡張と キャッシュ機構の違いを理解する まっつー / @ryo-manba 2024/06/25 Vercel
Meetup #1 1
自己紹介 まっつー サイボウズのフロントエンドエンジニア NextUI の team member X: @ryo_manba GitHub:
@ryo-manba 2
This Talk ・React と Next.js の fetch 拡張から Fetch Deduping
と Data Cache の違いを 理解する ・React.cache や Next.js の unstable_cache の使 い方を知る 3
React Removes `fetch` React 19 RC でネイティブの fetch Web API
に 対する patch が削除された https://github.com/facebook/react/pull/28896 4
Next.js implementation React `fetch` Next.js 15 RC では React の
fetch 拡張を実装した 5 https://github.com/vercel/next.js/pull/65058
React の fetch 拡張がしていたこと コンポーネントツリー内の同一リクエストを重複排除(Request Deduping) して1つにまとめる 6
fetch の拡張による Request Deduping ・同じURLとオプションを持つリクエストをメモ化する ・GET/HEAD のみに適用される ・レンダリング中のみ有効のため、キャッシュの鮮度を管理 したり、再検証は不要 7
fetch の拡張による Request Deduping async function hello() { // 実際に送信されるリクエストは1つだけ
const res1 = await fetch("http://localhost/hello"); const res2 = await fetch("http://localhost/hello"); return {res1, res2}; } 8
fetch の拡張による Request Deduping 9 async function Hello() { //
実際送信されるリクエストは1つだけ const res1 = await fetch("http://localhost/hello"); const res2 = await fetch("http://localhost/hello"); return {res1, res2} } ・DB に直接アクセスしたい ・GraphQL や POST only な社内向け の API を利用している
fetch の拡張による Request Deduping 10 async function Hello() { //
実際送信されるリクエストは1つだけ const res1 = await fetch("http://localhost/hello"); const res2 = await fetch("http://localhost/hello"); return {res1, res2} } ・DB に直接アクセスしたい ・GraphQL や POST only な社内向け の API を利用している React.cache を使う
React.cache の概要 ・関数の戻り値をキャッシュし、同じ入力で再度呼び出され た際にキャッシュされた結果を返す ・リクエストごとにメモ化された関数のキャッシュは無効化 されるため、キャッシュの鮮度の管理は不要 11
React.cache による Request Deduping const getUser = cache(async (id) =>
{ return await db.user.query(id); }) async function Hello() { // DB へのリクエストは1回のみ const res1 = await getUser(1); const res2 = await getUser(1); } 12
React.cache による Request Deduping 13
セキュリティの対応 ・React.cache の実装に AsyncLocalStorage が使用されて いるため、外部から干渉を防ぎ、安全に状態管理が行える ・fetch の拡張の実装には React.cache を使用し、url
と option を文字列化した値をキーとしてレスポンスを保存し ている 14 https://zenn.dev/cybozu_frontend/articles/react-cache-an
15 Next.js の fetch 拡張 と Data Cache
Next.js の fetch 拡張による Data Cache ・組み込みの Data Cache を使用し、リクエストやデプロイ
メントにまたがって結果を永続化する ・fetch のオプションでキャッシュの有効期間や再検証に使 用する Tag の設定ができる 16 // キャッシュを有効化する fetch(url, {cache: ‘force-cache’}) // 1分後に再検証する fetch(url, { next: { revalidate: 60 }})
Next.js の fetch 拡張による Data Cache fetch のレスポンスを Data Cache
に保存する 17
unstable_cache による Data Cache ・Data Cache を使用し、リクエストとデプロイメントにわ たって結果を保存する(fetch の拡張と同様) ・有効期間や再検証に使用する
Tag を設定する const getCachedUser = unstable_cache( async (id) => getUser(id), // データ取得する非同期関数 ["my-app-user"], // データ識別用のキー { tags: ["my-app-user"] } // キャッシュの制御用のタグ ); 18
Next.js の fetch 拡張の今後 ・Next.js でもコミュニティのフィードバックに基づいて fetch の拡張を削除することを検討されている ・`revalidateAfter(60)` のような
API が導入される可能性が ある 19 https://youtu.be/VBlSe8tvg4U?si=uRuv-CQuliZYuNXX
まとめ ・React の fetch 拡張(現在は Next.js の実装) ・Request の重複排除(Request Deduping)を実現
・対応する機能は React.cache ・Next.js の fetch 拡張 ・Data Cache を利用してデータアクセスの効率化 ・対応する機能は unstable_cache 20