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
Jamstack × PWA におけるキャッシュ戦略
Search
Kazuki Shibata
July 15, 2020
Technology
3
1.1k
Jamstack × PWA におけるキャッシュ戦略
PWA Night vol.18 ~パフォーマンス~ での発表資料です。
Kazuki Shibata
July 15, 2020
Tweet
Share
More Decks by Kazuki Shibata
See All by Kazuki Shibata
microCMSでif文を作る
shibe97
1
980
SvelteKitでJamstackを試す
shibe97
1
1k
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
shibe97
16
4.7k
CSR / SSR / SSGの動向2020
shibe97
2
1.4k
Jamstack×microCMS 実装編
shibe97
4
810
SentryでSPAのエラーログを収集する
shibe97
1
1.5k
useRefについて調べてみた
shibe97
1
140
フロントエンドエンジニアのキャリアパス
shibe97
9
3.6k
Containerどこに置く?
shibe97
1
1.8k
Other Decks in Technology
See All in Technology
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
190
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
How to Think Like a Performance Engineer
csswizardry
4
590
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
地理情報とAPIのトレンド
nagix
0
160
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
RailsConf 2023
tenderlove
16
720
Building Applications with DynamoDB
mza
89
5.8k
How GitHub (no longer) Works
holman
305
140k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
Six Lessons from altMBA
skipperchong
24
3.2k
YesSQL, Process and Tooling at Scale
rocio
166
14k
BBQ
matthewcrist
82
9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Being A Developer After 40
akosma
72
580k
Transcript
Jamstack × PWA ʹ͓͚ΔΩϟογϡઓུ ʢNuxtϕʔεͷ͓ʣ ࣲా ف - Wanta, Inc
PWA Night vol.18 ʙύϑΥʔϚϯεʙ
ࣲా ف / Kazuki Shibata Υϯλגࣜձࣾͷڞಉۀऀ $00ɻ NJDSP$.4ͷσβΠϯɺϑϩϯτ ։ൃΛ͍ͯ͠·͢ɻ +BNTUBDL/FYU/VYU͕͖ɻ
!TIJCF
None
microCMSͷհ • ຊͷϔουϨεCMS • ίϯςϯπAPIܦ༝Ͱऔಘ • ϚϧνϓϥοτϑΥʔϜʹରԠ • Imgixࡌ •
Jamstackͱͷ૬ੑ˕
ຊͷྲྀΕ • Jamstackͱ • JamstackͷΩϟογϡઓུ • Ωϟογϡߏ • NuxtͷϓϦϑΣονػೳ •
Nuxt PWA
Jamstackͱ What is the Jamstack
None
Jamstack • ࣄલϏϧυͨ͠੩తϑΝΠϧΛ৴ʢʴAPIʹΑΔॲཧʣ • SSG + CSRͷϋΠϒϦου • ॳظϖʔδࣄલϏϧυͨ͠੩తϑΝΠϧΛϩʔυ͠ɺϖʔδભҠ ࣌CSRΛߦ͏
• ϝσΟΞͳͲɺ੩తίϯςϯπͷଟ͍αΠτʹ͍͍ͯΔ
Α͋͘ΔJamstackͷߏ
JamstackͷϝϦοτ • ඞཁͳͷ੩తϑΝΠϧͷϗεςΟϯάͷΈ • NetlifyɺGitHub PagesɺS3ɺVercelͳͲʢݸਓར༻ϨϕϧͳΒແྉʣ • APIίʔϧϏϧυ࣌ͷΈ • APIϦΫΤετͷ੍ݶ͕͋ͬͯ҆৺
• ສ͕ҰɺAPI͕མͪͯ҆৺ • ηΩϡΞˍϋΠύϑΥʔϚϯεˍ͍҆
JamstackͷσϝϦοτ • ϖʔδ͕ଟ͍ͱϏϧυʹຖճ͕͔͔࣌ؒͬͯ͠·͏ • ϓϨϏϡʔͷ࣮͕ͪΐͬͱ໘ • εςʔδϯάڥΛͲ͏ͬͯߏங͢Δ͔ɺݟ͕·ͩগͳ͍
JamstackͷΩϟογϡઓུ Cache Strategy
Ωϟογϡߏ CDN Ωϟογϡ ϒϥβ Ωϟογϡ ωοτϫʔΫ
Ωϟογϡߏ CDN Ωϟογϡ Service Worker Cache API ϒϥβ Ωϟογϡ ωοτϫʔΫ
ϒϥβ Service WorkerίίʹॲཧΛڬΊΔʢProxyͬΆׂ͍ʣ هɿϒϥβΩϟογϡԚછΛͤ͞ͳ͍ͨΊʹ ϒϥβΩϟογϡΑΓखલʹSW͕͋Δ
Cache APIͱϒϥβΩϟογϡͷҧ͍ • Cache APIΛ͏ͱΩϟογϡͷࡉ͔͍ίϯτϩʔϧ͕Ͱ͖Δ • ·ͩΞΫηε͍ͯ͠ͳ͍ϑΝΠϧΩϟογϡͰ͖Δ • ϑΝΠϧ୯ҐͰͷΩϟογϡ੍ޚ͕Ͱ͖Δ •
ΦϑϥΠϯͰ͑Δ
NuxtͷϓϦϑΣονػೳ • NuxtʹViewableΤϦΞͷϦϯΫઌΛϓϦϑΣον͢Δػೳ͕ ͍͍ͭͯΔ • Full Static Generation ʹΑΔpayloadϑΝΠϧର •
payloadϑΝΠϧɿSPAભҠઌͷσʔλ • ϒϥβΩϟογϡࡁΈͷϑΝΠϧऔಘ͠ʹߦ͔ͳ͍ • ମײతʹඇৗʹߴ
DEMO https://microcms.io/blog
ϓϦϑΣονɿࣄલʹσʔλΛऔಘ CDN Ωϟογϡ Service Worker Cache API ϒϥβ Ωϟογϡ ωοτϫʔΫ
ϒϥβ ϝϞϦ વɺωοτϫʔΫΛհ͢͜ͱͰϓϦϑΣον͞ΕΔ·Ͱͷ࣌ؒ͘ͳΔ
ϓϦϑΣονɿࣄલʹσʔλΛऔಘ CDN Ωϟογϡ Service Worker Cache API ϒϥβ Ωϟογϡ ωοτϫʔΫ
ϒϥβ ϝϞϦ ϓϦϑΣονσʔλग़དྷΔݶΓΩϟογϡ͍ͨ͠
Nuxt PWA Progressive Web App
None
ϥϯλΠϜΩϟογϡ ϓϦΩϟογϡ • ϑΣον࣌ʹΩϟογϡ • ΩϟογϡઓུΛࢦఆͰ͖Δ • Service WorkerͷΠϯετʔϧ࣌ʹࣄલʹΩϟογϡ͓ͯ͘͜͠ͱ͕Ͱ͖Δ •
ະΞΫηεͷϑΝΠϧΛΩϟογϡͰ͖Δ • ϫΠϧυΧʔυ͑ͳ͍ʢଟʣ
ग़య: https://developers.google.com/web/tools/workbox/modules/workbox-strategies ΩϟογϡઓུɿCache first
ग़య: https://developers.google.com/web/tools/workbox/modules/workbox-strategies ΩϟογϡઓུɿNetwork first
ग़య: https://developers.google.com/web/tools/workbox/modules/workbox-strategies ΩϟογϡઓུɿStale-While-Revalidate όοΫάϥϯυͰ ϑΣον
Nuxt PWA • PWAϞδϡʔϧΛೖΕΔͱɺϏϧυ࣌ʹࣗಈతʹsw.jsΛ࡞ͯ͘͠ΕΔ • ༰nuxt.config.jsͰઃఆͰ͖Δ • Workbox API͕͑Δ •
GoogleͷศརϥΠϒϥϦ • σϑΥϧτͰ /_nuxt/ ҎԼ Cache first ͰϥϯλΠϜΩϟογϡ͞ΕΔ • όϯυϧJSྨ • ϓϦϑΣον͞ΕΔ payload.js ྨ • σϑΥϧτͰϓϦΩϟογϡͷઃఆͳ͠ʢv3Ҏ߱ʣ
None
Nuxt Jamstackʹ͓͚ΔΩϟογϡઓུ • ίϯςϯπHTMLߋ৽ੑ͕ߴ͍ͷͰɺnetworkFirst ͔ staleWhileRevalidate • /_nuxt/ ԼϏϧυͷͨͼʹϋογϡ͕͘ͷͰ cacheFirst
Ͱͳ͍ • ϓϦΩϟογϡωΠςΟϒΞϓϦͷΠϯετʔϧͱಉ͡ߟ͑ํͰྑͦ͞͏ • PWAΞϓϦͷ༰ྔ૿Ճ·͘͠ͳ͍ • جຊݻఆΞηοτʢΞΠίϯɺϩΰྨʣͷΈ͕ແ͔ʁ • NuxtϓϦϑΣον͕͋ΔͷͰɺϓϦΩϟογϡͷඞཁੑͦΜͳʹͳͦ͞͏
nuxt.config.js ͷઃఆ • offlineAssets • ϓϦΩϟογϡ • runtimeCaching • ϥϯλΠϜΩϟογϡ
• ΫϩεΦϦδϯͳ௨৴ʹରͯ͠networkFirst·ͨ staleWhileRevalidate͔͑͠ͳ͍ • ͪΌΜͱCORSઃఆ͕ग़དྷ͍ͯΕ͍͚Δ͔ ʢݕূؒʹ߹Θͣʣ • ࢀߟɿhttps://developers.google.com/web/tools/ workbox/guides/handle-third-party-requests
ΞΠίϯྨ 3rd party CDN
·ͱΊ Summary
·ͱΊ • Jamstackͷར੩తϑΝΠϧ৴ʴSPAʹΑΔߴύϑΥʔϚϯε • NuxtϓϦϑΣονͰύϑΥʔϚϯε্ ʢϦιʔεͷϩʔυ࣌ؒΛ΄΅ແͤ͘Δʣ • Service WorkerͰΩϟογϡΛޮԽͯ͠͞ΒʹύϑΥʔϚϯε্
Thanks :) !TIJCF