ServiceWorkerSideReactServerSideRendering

Transcript

1. Service Worker Side React Server Side Rendering @mizchi

2. ࣗݾ঺հ • Node.js / ϑϩϯτΤϯυ / React / PWA •

   ϒϩά͕Α͘೩͑Δ

3. લఏ • ServiceWorker ಺Ͱ Babel Λۦ࢖ͯ͠ɺJavaScript ΛϏϧυ ͢Δ - ϩάϛʔ

   TechʢςοΫʣ • off-the-main-thread ͷ࣌୅ https://mizchi.hatenablog.com/ entry/2018/10/02/093750

4. ServiceWorker: ཁ໿ • ߹๏ϩʔΧϧϓϩΩγ • ϒϥ΢β಺ʹ΋͏Ұͭͷαʔόʔ͕͋ΔΠϝʔδ

5. ΫϥΠΞϯτͰαʔόʔ͕΋ͯΔ => ServiceWorker Ͱ Express ಈ͔ͤ͹ ͍͍Μ͡ΌͶʁ

6. SSR ͷ࢓ࣄ͕ଟ͍

7. SSR ਏ͍ • ΞʔΩςΫνϟతʹࢀরಁաੑͷ୲อ͕೉͍͠ • node ͷӡ༻೉͍͠

8. ૉ๿ͳٙ໰ʮͳΜͰ SSR ͢Δͷʁʯ

9. ཧ༝ • SEO ࠷దԽ • First Meaningful Paint ࠷దԽ

10. SEO ͸Θ͔Δ • ଞʹબ୒ࢶͳ͍ͷͰ… • Google ͷΫϩʔϥͷ JS ͕΋ͬͱ৴༻Ͱ͖Ε͹…

11. FMP? • TTI ·ͰʹϨΠΞ΢ςΟϯά͕ෳ਺ճ͋ΔͱɺϢʔβʔͷҹ ৅͕ѱ͍ • FMP ͷ࠷దԽ͚ͩͳΒ ServiceWorker ͷ

    Rendering ͰΑ͘ ͳ͍͔

12. ϩʔΧϧͷ SW Ͱ SSR ͢Ε͹ૣ͍ʂ

13. SWSRSSR σϞ https://swsrssr-smfoiilymr.now.sh/

14. ΍ͬͨ͜ͱ • SSR on Express • SSR on ServiceWorker •

    React / Redux / universal-router UniversalJavaScript ͳΒ΄ͱΜͲಈ͘

15. ServiceWorker Ͱಈ͍ͯΔίʔυ self.addEventListener("fetch", event => { event.respondWith( (async () =>

    { // ...ུ const html = ReactDOM.renderToString(<App />); return new Response(html, { headers: { "Content-Type": "text/html" } }); })() ); });

16. ΍ͬͯͳ͍͜ͱ • ͋͑ͯ react-router.Link Λ࢖Θͣ <a> λά࢖ͬͯΔ • Ͱ΋ 16ms

    ͰભҠ͢Δ͔ΒΘ͔Βͳ͍

17. ݁Ռ • ը໘ભҠ͕ 16ms ͰऴΘΔ(ωοτϫʔΫϦιʔεʹ৮Βͳ͚ Ε͹) • Ϣʔβʔ͸ SPA ͱಉ͡Α͏ʹ࿈ଓͯ͠ΔΑ͏ʹײ͡Δ

18. ΍ͬͯΘ͔ͬͨ FMP Ͱେࣄͳͱ͜Ζ • ը໘ભҠͰ࿈ଓతͳମݧͷͨΊʹɺϔομͷ࿈ଓੑ͕େࣄ • ٯʹϔομͷ࿈ଓੑ͑͞୲อͰ͖ͯΕ͹ଞ͸Ͳ͏Ͱ΋͍͍ • ϔομͷߴ͞ /

    എܠ৭Λἧ͑ͯɺCSS ͸ΠϯϥΠϯԽ͓ͯ͠ ͘

19. ଞɺ࠷ۙΈ͚͓ͭͨ΋ͪΌ • ampproject/worker-dom: The same DOM API and Frameworks you

    know, but in a Web Worker. • ίʔυϦʔσΟϯάϝϞ worker-dom-code-reading.md • WebWorker Ͱ DOM ૢ࡞͕Ͱ͖Δ • preact ͷ࣮ݱྫ͕͋Δ

20. Ͳ͏࣮ݱ͍ͯ͠Δ͔ • Worker Ͱ DOM API Λશ෦࣮૷ • MutationObserver Ͱ

    DOM มԽΛ؂ࢹ • MutationRecord ΛγϦΞϥΠζͯ͠ postMessage • ϝΠϯεϨουͰద༻ (preventDefault ΍ getComupetedProperty ͸ग़དྷͳ͍)

21. Կͷҙຯ͕ • UI εϨου֎ͳͷͰૢ࡞ΛϒϩοΫ͠ͳ͍ • خ͍͠…

22. ࠷ޙʹ • ͋ΔछͷϨϯμϦϯά࠷దԽ͠Α͏ͱ͢Δͱ JavaScript ͷϚ ϧνεϨουԽ͕ਐΉ • IE ࣺͯͨΒϚϧνεϨουͷ࣌୅͘Δͷ͸֮ޛ͓͖ͯ͠· ͠ΐ͏

    github.com/mizchi-sandbox/swsrssr