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.4k
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
160
React Aria で実現する次世代のアクセシビリティ
ryo_manba
5
2.4k
5分で分かる React Aria の 良いところ・これからなところ
ryo_manba
5
5.7k
アクセシブルなインクリメンタルサーチを作ってみた
ryo_manba
2
420
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
3.8k
Other Decks in Technology
See All in Technology
スクラムというコンフォートゾーンから抜け出そう!プロジェクト全体に目を向けるインセプションデッキ / Inception Deck for seeing the whole project
takaking22
3
310
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
420
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
880
DeepSeekとは?何がいいの? - Databricksと学ぶDeepSeek! 〜これからのLLMに備えよ!〜
taka_aki
2
210
AI-Driven-Development-20250310
yuhattor
3
320
プロダクト開発者目線での Entra ID 活用
sansantech
PRO
0
200
RaspberryPi CM4(CM5も)面白いぞ!
nonnoise
1
270
Amazon Bedrock Knowledge basesにLangfuse導入してみた
sonoda_mj
2
310
20250304_赤煉瓦倉庫_DeepSeek_Deep_Dive
hiouchiy
2
150
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
280
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
5
6.9k
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
280
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Writing Fast Ruby
sferik
628
61k
The Cult of Friendly URLs
andyhume
78
6.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Rails Girls Zürich Keynote
gr2m
94
13k
A Philosophy of Restraint
colly
203
16k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Why Our Code Smells
bkeepers
PRO
336
57k
Building Adaptive Systems
keathley
40
2.4k
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