ServiceWorkerSideReactServerSideRendering

Transcript

1. Service Worker Side React Server
   Side Rendering
   @mizchi
   

   View Slide

2. ࣗݾ঺հ
   • Node.js / ϑϩϯτΤϯυ / React / PWA
   • ϒϩά͕Α͘೩͑Δ
   

   View Slide

3. લఏ
   • ServiceWorker ಺Ͱ Babel Λۦ࢖ͯ͠ɺJavaScript ΛϏϧυ
   ͢Δ - ϩάϛʔ TechʢςοΫʣ
   • off-the-main-thread ͷ࣌୅ https://mizchi.hatenablog.com/
   entry/2018/10/02/093750
   

   View Slide

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

   View Slide

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

   View Slide

6. SSR ͷ࢓ࣄ͕ଟ͍
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. ΍ͬͨ͜ͱ
    • SSR on Express
    • SSR on ServiceWorker
    • React / Redux / universal-router
    UniversalJavaScript ͳΒ΄ͱΜͲಈ͘
    

    View Slide

15. ServiceWorker Ͱಈ͍ͯΔίʔυ
    self.addEventListener("fetch", event => {
    event.respondWith(
    (async () => {
    // ...ུ
    const html = ReactDOM.renderToString();
    return new Response(html, { headers: { "Content-Type": "text/html" } });
    })()
    );
    });
    

    View Slide

16. ΍ͬͯͳ͍͜ͱ
    • ͋͑ͯ react-router.Link Λ࢖Θͣ λά࢖ͬͯΔ
    • Ͱ΋ 16ms ͰભҠ͢Δ͔ΒΘ͔Βͳ͍
    

    View Slide

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

    View Slide

18. ΍ͬͯΘ͔ͬͨ FMP Ͱେࣄͳͱ͜Ζ
    • ը໘ભҠͰ࿈ଓతͳମݧͷͨΊʹɺϔομͷ࿈ଓੑ͕େࣄ
    • ٯʹϔομͷ࿈ଓੑ͑͞୲อͰ͖ͯΕ͹ଞ͸Ͳ͏Ͱ΋͍͍
    • ϔομͷߴ͞ / എܠ৭Λἧ͑ͯɺCSS ͸ΠϯϥΠϯԽ͓ͯ͠
    ͘
    

    View Slide

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 ͷ࣮ݱྫ͕͋Δ
    

    View Slide

20. Ͳ͏࣮ݱ͍ͯ͠Δ͔
    • Worker Ͱ DOM API Λશ෦࣮૷
    • MutationObserver Ͱ DOM มԽΛ؂ࢹ
    • MutationRecord ΛγϦΞϥΠζͯ͠ postMessage
    • ϝΠϯεϨουͰద༻
    (preventDefault ΍ getComupetedProperty ͸ग़དྷͳ͍)
    

    View Slide

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

    View Slide

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

    View Slide