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
React Aria で実現する次世代のアクセシビリティ
ryo_manba
5
2.2k
5分で分かる React Aria の 良いところ・これからなところ
ryo_manba
5
5.5k
アクセシブルなインクリメンタルサーチを作ってみた
ryo_manba
2
390
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
3.6k
Other Decks in Technology
See All in Technology
トラブルシュートを楽しもう (wakamonog meeting 15)
recuraki
1
260
.NET 最新アップデート ~ AI とクラウド時代のアプリモダナイゼーション
chack411
0
200
KMP with Crashlytics
sansantech
PRO
0
250
AWS Community Builderのススメ - みんなもCommunity Builderに応募しよう! -
smt7174
0
200
なぜfreeeはハブ・アンド・スポーク型の データメッシュアーキテクチャにチャレンジするのか?
shinichiro_joya
2
590
「隙間家具OSS」に至る道/Fujiwara Tech Conference 2025
fujiwara3
7
6.6k
re:Invent2024 KeynoteのAmazon Q Developer考察
yusukeshimizu
1
160
20250116_自部署内でAmazon Nova体験会をやってみた話
riz3f7
1
110
いま現場PMのあなたが、 経営と向き合うPMになるために 必要なこと、腹をくくること
hiro93n
9
8k
RubyでKubernetesプログラミング
sat
PRO
4
160
Visual StudioとかIDE関連小ネタ話
kosmosebi
1
380
デザインシステムを始めるために取り組んだこと - TechTrain x ゆめみ ここを意識してほしい!リファクタリング勉強会
kajitack
2
200
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Language of Interfaces
destraynor
155
24k
The World Runs on Bad Software
bkeepers
PRO
66
11k
Done Done
chrislema
182
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Automating Front-end Workflow
addyosmani
1366
200k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
YesSQL, Process and Tooling at Scale
rocio
170
14k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
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