Jamstack × PWA におけるキャッシュ戦略

PWA Night vol.18 ～パフォーマンス～ での発表資料です。

Transcript

1. Jamstack × PWA ʹ͓͚ΔΩϟογϡઓུ
   ʢNuxtϕʔεͷ͓࿩ʣ
   ࣲా ࿨ف - Wanta, Inc
   PWA Night vol.18 ʙύϑΥʔϚϯεʙ
   

   View Slide

2. ࣲా ࿨ف / Kazuki Shibata
   ΢Υϯλגࣜձࣾͷڞಉ૑ۀऀ
   $00ɻ
   NJDSP$.4ͷσβΠϯɺϑϩϯτ

   ։ൃΛ͍ͯ͠·͢ɻ
   +BNTUBDL/FYU/VYU͕޷͖ɻ
   !TIJCF
   

   View Slide

3. View Slide

4. microCMSͷ঺հ
   • ೔ຊ੡ͷϔουϨεCMS
   • ίϯςϯπ͸APIܦ༝Ͱऔಘ
   • ϚϧνϓϥοτϑΥʔϜʹରԠ
   • Imgix౥ࡌ
   • Jamstackͱͷ૬ੑ΋˕
   

   View Slide

5. ຊ೔ͷྲྀΕ
   • Jamstackͱ͸
   • JamstackͷΩϟογϡઓུ
   • Ωϟογϡߏ੒
   • NuxtͷϓϦϑΣονػೳ
   • Nuxt PWA
   

   View Slide

6. Jamstackͱ͸
   What is the Jamstack
   

   View Slide

7. View Slide

8. Jamstack
   • ࣄલϏϧυͨ͠੩తϑΝΠϧΛ഑৴ʢʴAPIʹΑΔॲཧʣ
   • SSG + CSRͷϋΠϒϦου
   • ॳظϖʔδ͸ࣄલϏϧυͨ͠੩తϑΝΠϧΛϩʔυ͠ɺϖʔδભҠ
   ࣌͸CSRΛߦ͏
   • ϝσΟΞͳͲɺ੩తίϯςϯπͷଟ͍αΠτʹ޲͍͍ͯΔ
   

   View Slide

9. Α͋͘ΔJamstackͷߏ੒
   

   View Slide

10. JamstackͷϝϦοτ
    • ඞཁͳͷ͸੩తϑΝΠϧͷϗεςΟϯάͷΈ
    • NetlifyɺGitHub PagesɺS3ɺVercelͳͲʢݸਓར༻ϨϕϧͳΒແྉʣ
    • APIίʔϧ͸Ϗϧυ࣌ͷΈ
    • APIϦΫΤετ਺ͷ੍ݶ͕͋ͬͯ΋҆৺
    • ສ͕ҰɺAPI͕མͪͯ΋҆৺
    • ηΩϡΞˍϋΠύϑΥʔϚϯεˍ͍҆
    

    View Slide

11. JamstackͷσϝϦοτ
    • ϖʔδ਺͕ଟ͍ͱϏϧυʹຖճ͕͔͔࣌ؒͬͯ͠·͏
    • ϓϨϏϡʔͷ࣮૷͕ͪΐͬͱ໘౗
    • εςʔδϯά؀ڥΛͲ͏΍ͬͯߏங͢Δ͔౳ɺ஌ݟ͕·ͩগͳ͍
    

    View Slide

12. JamstackͷΩϟογϡઓུ
    Cache Strategy
    

    View Slide

13. Ωϟογϡߏ੒
    CDN
    Ωϟογϡ
    ϒϥ΢β

    Ωϟογϡ
    ωοτϫʔΫ
    

    View Slide

14. Ωϟογϡߏ੒
    CDN
    Ωϟογϡ
    Service Worker
    Cache API
    ϒϥ΢β

    Ωϟογϡ
    ωοτϫʔΫ
    ϒϥ΢β
    Service Worker͸ίίʹॲཧΛڬΊΔʢProxyͬΆ͍໾ׂʣ
    ௥هɿϒϥ΢βΩϟογϡԚછΛͤ͞ͳ͍ͨΊʹ
    ϒϥ΢βΩϟογϡΑΓखલʹSW͕͋Δ
    

    View Slide

15. Cache APIͱϒϥ΢βΩϟογϡͷҧ͍
    • Cache APIΛ࢖͏ͱΩϟογϡͷࡉ͔͍ίϯτϩʔϧ͕Ͱ͖Δ
    • ·ͩΞΫηε͍ͯ͠ͳ͍ϑΝΠϧ΋ΩϟογϡͰ͖Δ
    • ϑΝΠϧ୯ҐͰͷΩϟογϡ੍ޚ͕Ͱ͖Δ
    • ΦϑϥΠϯͰ΋࢖͑Δ
    

    View Slide

16. NuxtͷϓϦϑΣονػೳ
    • Nuxtʹ͸ViewableΤϦΞͷϦϯΫઌΛϓϦϑΣον͢Δػೳ͕

    ͍͍ͭͯΔ
    • Full Static Generation ʹΑΔpayloadϑΝΠϧ΋ର৅
    • payloadϑΝΠϧɿSPAભҠઌͷσʔλ
    • ϒϥ΢βΩϟογϡࡁΈͷϑΝΠϧ͸औಘ͠ʹߦ͔ͳ͍
    • ମײతʹ͸ඇৗʹߴ଎
    

    View Slide

17. DEMO
    https://microcms.io/blog
    

    View Slide

18. ϓϦϑΣονɿࣄલʹσʔλΛऔಘ
    CDN
    Ωϟογϡ
    Service Worker
    Cache API
    ϒϥ΢β

    Ωϟογϡ
    ωοτϫʔΫ
    ϒϥ΢β
    ϝϞϦ
    ౰વɺωοτϫʔΫΛհ͢͜ͱͰϓϦϑΣον͞ΕΔ·Ͱͷ࣌ؒ͸௕͘ͳΔ
    

    View Slide

19. ϓϦϑΣονɿࣄલʹσʔλΛऔಘ
    CDN
    Ωϟογϡ
    Service Worker
    Cache API
    ϒϥ΢β

    Ωϟογϡ
    ωοτϫʔΫ
    ϒϥ΢β
    ϝϞϦ
    ϓϦϑΣονσʔλ΋ग़དྷΔݶΓΩϟογϡ͍ͨ͠
    

    View Slide

20. Nuxt PWA
    Progressive Web App
    

    View Slide

21. View Slide

22. ϥϯλΠϜΩϟογϡ
    ϓϦΩϟογϡ
    • ϑΣον࣌ʹΩϟογϡ
    • ΩϟογϡઓུΛࢦఆͰ͖Δ
    • Service WorkerͷΠϯετʔϧ࣌ʹࣄલʹΩϟογϡ͓ͯ͘͜͠ͱ͕Ͱ͖Δ
    • ະΞΫηεͷϑΝΠϧΛΩϟογϡͰ͖Δ
    • ϫΠϧυΧʔυ͸࢖͑ͳ͍ʢଟ෼ʣ
    

    View Slide

23. ग़య: https://developers.google.com/web/tools/workbox/modules/workbox-strategies
    ΩϟογϡઓུɿCache first
    

    View Slide

24. ग़య: https://developers.google.com/web/tools/workbox/modules/workbox-strategies
    ΩϟογϡઓུɿNetwork first
    

    View Slide

25. ग़య: https://developers.google.com/web/tools/workbox/modules/workbox-strategies
    ΩϟογϡઓུɿStale-While-Revalidate
    όοΫάϥ΢ϯυͰ

    ϑΣον
    

    View Slide

26. Nuxt PWA
    • PWAϞδϡʔϧΛೖΕΔͱɺϏϧυ࣌ʹࣗಈతʹsw.jsΛ࡞੒ͯ͘͠ΕΔ
    • ಺༰͸nuxt.config.jsͰઃఆͰ͖Δ
    • Workbox API͕࢖͑Δ
    • Google੡ͷศརϥΠϒϥϦ
    • σϑΥϧτͰ /_nuxt/ ҎԼ͸ Cache first ͰϥϯλΠϜΩϟογϡ͞ΕΔ
    • όϯυϧJSྨ
    • ϓϦϑΣον͞ΕΔ payload.js ྨ
    • σϑΥϧτͰ͸ϓϦΩϟογϡͷઃఆ͸ͳ͠ʢv3Ҏ߱ʣ
    

    View Slide

27. View Slide

28. Nuxt Jamstackʹ͓͚ΔΩϟογϡઓུ
    • ίϯςϯπHTML͸ߋ৽ੑ͕ߴ͍ͷͰɺnetworkFirst ͔ staleWhileRevalidate
    • /_nuxt/ ഑Լ͸Ϗϧυͷͨͼʹϋογϡ஋͕෇͘ͷͰ cacheFirst Ͱ໰୊ͳ͍
    • ϓϦΩϟογϡ͸ωΠςΟϒΞϓϦͷΠϯετʔϧͱಉ͡ߟ͑ํͰྑͦ͞͏
    • PWAΞϓϦͷ༰ྔ૿Ճ͸๬·͘͠ͳ͍
    • جຊ͸ݻఆΞηοτʢΞΠίϯɺϩΰྨʣͷΈ͕ແ೉͔ʁ
    • NuxtϓϦϑΣον͕͋ΔͷͰɺϓϦΩϟογϡͷඞཁੑ͸ͦΜͳʹͳͦ͞͏
    

    View Slide

29. nuxt.config.js ͷઃఆ
    • offlineAssets
    • ϓϦΩϟογϡ
    • runtimeCaching
    • ϥϯλΠϜΩϟογϡ
    • ΫϩεΦϦδϯͳ௨৴ʹରͯ͠͸networkFirst·ͨ͸
    staleWhileRevalidate͔͠࢖͑ͳ͍
    • ͪΌΜͱCORSઃఆ͕ग़དྷ͍ͯΕ͹͍͚Δ͔΋

    ʢݕূؒʹ߹Θͣʣ
    • ࢀߟɿhttps://developers.google.com/web/tools/
    workbox/guides/handle-third-party-requests
    

    View Slide

30. ΞΠίϯྨ
    3rd party
    CDN
    

    View Slide

31. ·ͱΊ
    Summary
    

    View Slide

32. ·ͱΊ
    • Jamstackͷར఺͸੩తϑΝΠϧ഑৴ʴSPAʹΑΔߴύϑΥʔϚϯε
    • NuxtϓϦϑΣονͰύϑΥʔϚϯε޲্

    ʢϦιʔεͷϩʔυ࣌ؒΛ΄΅ແͤ͘Δʣ
    • Service WorkerͰΩϟογϡΛޮ཰Խͯ͠͞ΒʹύϑΥʔϚϯε޲্
    

    View Slide

33. Thanks :)
    !TIJCF
    

    View Slide