Service Worker Side React Server Side Rendering

by Recruit Technologies

Slide 1

Slide 1 text

Service Worker Side React Server Side Rendering @mizchi

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

SSR ͷ࢓ࣄ͕ଟ͍

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

ଞɺ࠷ۙΈ͚͓ͭͨ΋ͪΌ • ampproject/worker-dom: The same DOM API and Frameworks you know, but in a Web Worker. • ίʔυϦʔσΟϯάϝϞ worker-dom-code-reading.md • WebWorker Ͱ DOM ૢ࡞͕Ͱ͖Δ • preact ͷ࣮ݱྫ͕͋Δ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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