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
mattsu-
June 24, 2024
Technology
3
950
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
Vercel Meetup #1 (2024/06/25) での発表資料
https://vercel.connpass.com/event/321176/
mattsu-
June 24, 2024
Tweet
Share
More Decks by mattsu-
See All by mattsu-
React Aria で実現する次世代のアクセシビリティ
ryo_manba
4
1.4k
5分で分かる React Aria の 良いところ・これからなところ
ryo_manba
5
4.6k
アクセシブルなインクリメンタルサーチを作ってみた
ryo_manba
2
320
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
3.1k
Other Decks in Technology
See All in Technology
AI Tour Mexico: Production-ready RAGwith Azure AI Search
pamelafox
0
140
10Xでのデータ基盤の変遷とこれから: データマネジメントのリアル 〜BtoB企業3社の歩みとこれから〜
10xinc
5
1k
【虎の穴ラボ Tech Talk】虎の穴ラボTech Talk説明資料
toranoana
0
120
iOS 18 がやってきた!
kno3a87
1
110
無料版Copilot×Google ColabでPDFデータを分析してみよう!!
kudou55
1
130
Introducing NgRx in an Nx Angular Workspace
fabiangosebrink
0
170
負債あるモノリスのオブザーバビリティに組織で向き合う
recruitengineers
PRO
8
270
横断組織として考える共通DBの課題解決 〜 桃園の誓いアーキテクチャ 〜 / Addressing Shared Database Challenges as Cross-Team: “Peach Garden Oath” Architecture
4geru
1
490
Valuable Software Engineering
avandeursen
0
200
Understanding and Optimising INP
akshayysharma
0
130
PHPでアクターモデルを理解・体験しよう / Understand and experience the actor model in PHP
ytake
1
110
ビジネスに必要な全てを担い、 自分の専門性を見つけ出す フルサイクル開発者のあり方@技育祭 秋 / how-find-own-speciality-in-full-cycle
pei0804
6
840
Featured
See All Featured
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
Typedesign – Prime Four
hannesfritz
39
2.3k
Debugging Ruby Performance
tmm1
72
12k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
166
48k
Done Done
chrislema
180
16k
Adopting Sorbet at Scale
ufuk
73
8.9k
Statistics for Hackers
jakevdp
794
220k
The Mythical Team-Month
searls
218
43k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
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