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.2k
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
1.2k
SvelteKitでJamstackを試す
shibe97
1
1.2k
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
shibe97
16
4.9k
CSR / SSR / SSGの動向2020
shibe97
2
1.6k
Jamstack×microCMS 実装編
shibe97
4
970
SentryでSPAのエラーログを収集する
shibe97
1
1.7k
useRefについて調べてみた
shibe97
1
160
フロントエンドエンジニアのキャリアパス
shibe97
9
3.8k
Containerどこに置く?
shibe97
1
1.9k
Other Decks in Technology
See All in Technology
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
5
600
Evolution on AI Agent and Beyond - AGI への道のりと、シンギュラリティの3つのシナリオ
masayamoriofficial
0
170
イオン店舗一覧ページのパフォーマンスチューニング事例 / Performance tuning example for AEON store list page
aeonpeople
2
270
Backboneとしてのtimm2025
yu4u
4
1.4k
AIが住民向けコンシェルジュに?Amazon Connectと生成AIで実現する自治体AIエージェント!
yuyeah
0
260
アジャイルテストで高品質のスプリントレビューを
takesection
0
110
LLM時代の検索とコンテキストエンジニアリング
shibuiwilliam
2
1.1k
[OCI Skill Mapping] AWSユーザーのためのOCI(2025年8月20日開催)
oracle4engineer
PRO
2
140
生成AI利用プログラミング:誰でもプログラムが書けると 世の中どうなる?/opencampus202508
okana2ki
0
190
GCASアップデート(202506-202508)
techniczna
0
250
浸透しなさいRFC 5322&7208
hinono
0
120
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
16
5.2k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
A designer walks into a library…
pauljervisheath
207
24k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
How to train your dragon (web standard)
notwaldorf
96
6.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Rails Girls Zürich Keynote
gr2m
95
14k
Designing Experiences People Love
moore
142
24k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Designing for humans not robots
tammielis
253
25k
Typedesign – Prime Four
hannesfritz
42
2.8k
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