Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ServiceWorkerSideReactServerSideRendering

Koutarou Chikuba
October 12, 2018
760

 ServiceWorkerSideReactServerSideRendering

Koutarou Chikuba

October 12, 2018
Tweet

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