Service Worker Side React Server Side Rendering

2018/10/12 フューチャーアーキテクトとのLTバトルでの、竹馬（@mizchi）の講演資料になります

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