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
540
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 Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
2.4k
Other Decks in Technology
See All in Technology
Data Processing in PHP - PHPers 2024 Poznań
norzechowicz
0
130
全社的な生成AI活用プラットフォームとしての Difyの導入事例紹介
tokita_kakaku
10
6.5k
スクラムチームの品質戦略 1年の歩み
hacomono
PRO
1
130
10社以上のCTO/技術顧問を経験してみえた 技術組織に起こる課題と対策
otani_yuji
3
1.2k
Okioに愛を込めて
ryunen344
3
840
半年かけてPHP5.6からPHP7.4までバージョンアップした苦労と工夫 PHPカンファレンス福岡2024
kechiiin
1
170
BedrockUpdatesPost-GW Summary
hedgehog051
2
180
負荷テスト on AWS のすすめ (AWS Summit Japan 2024 - Ministage session)
mabuchs
0
120
タクシーアプリ『GO』におけるプラットフォームエンジニアリングの実践
mot_techtalk
3
940
スクラムチームだけどエクセルで要件定義書を書くことにしました / Requirements-Specification-Document-in-Scrum
okamototakuyasr2
0
170
RAG構築におけるKendraとPineconeの使い分け
sonoda_mj
1
120
feature flag と OpenTelemetry
biwashi
5
1.3k
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
23
1.5k
WebSockets: Embracing the real-time Web
robhawkes
59
7.1k
Rebuilding a faster, lazier Slack
samanthasiow
75
8.4k
Building Applications with DynamoDB
mza
89
5.8k
Done Done
chrislema
178
15k
BBQ
matthewcrist
80
8.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
23
2k
Large-scale JavaScript Application Architecture
addyosmani
505
110k
Speed Design
sergeychernyshev
3
150
GraphQLの誤解/rethinking-graphql
sonatard
58
9.5k
KATA
mclloyd
18
12k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
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