ServiceWorkerSideReactServerSideRendering

3aebd86547bfc5cdb451d5f2f95ed5d8?s=47 Koutarou Chikuba
October 12, 2018
650

 ServiceWorkerSideReactServerSideRendering

3aebd86547bfc5cdb451d5f2f95ed5d8?s=128

Koutarou Chikuba

October 12, 2018
Tweet

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