Service Worker Side React ServerSide Rendering@mizchi
View Slide
ࣗݾհ• Node.js / ϑϩϯτΤϯυ / React / PWA• ϒϩά͕Α͘೩͑Δ
લఏ• ServiceWorker Ͱ Babel Λۦͯ͠ɺJavaScript ΛϏϧυ͢Δ - ϩάϛʔ TechʢςοΫʣ• off-the-main-thread ͷ࣌ https://mizchi.hatenablog.com/entry/2018/10/02/093750
ServiceWorker: ཁ• ߹๏ϩʔΧϧϓϩΩγ• ϒϥβʹ͏Ұͭͷαʔόʔ͕͋ΔΠϝʔδ
ΫϥΠΞϯτͰαʔόʔ͕ͯΔ =>ServiceWorker Ͱ Express ಈ͔͍͍ͤΜ͡ΌͶʁ
SSR ͷࣄ͕ଟ͍
SSR ਏ͍• ΞʔΩςΫνϟతʹࢀরಁաੑͷ୲อ͕͍͠• node ͷӡ༻͍͠
ૉͳٙʮͳΜͰ SSR ͢Δͷʁʯ
ཧ༝• SEO ࠷దԽ• First Meaningful Paint ࠷దԽ
SEO Θ͔Δ• ଞʹબࢶͳ͍ͷͰ…• Google ͷΫϩʔϥͷ JS ͕ͬͱ৴༻Ͱ͖Ε…
FMP?• TTI ·ͰʹϨΠΞςΟϯά͕ෳճ͋ΔͱɺϢʔβʔͷҹ͕ѱ͍• FMP ͷ࠷దԽ͚ͩͳΒ ServiceWorker ͷ Rendering ͰΑ͘ͳ͍͔
ϩʔΧϧͷ SW Ͱ SSR ͢Εૣ͍ʂ
SWSRSSRσϞhttps://swsrssr-smfoiilymr.now.sh/
ͬͨ͜ͱ• SSR on Express• SSR on ServiceWorker• React / Redux / universal-routerUniversalJavaScript ͳΒ΄ͱΜͲಈ͘
ServiceWorker Ͱಈ͍ͯΔίʔυself.addEventListener("fetch", event => {event.respondWith((async () => {// ...ུconst html = ReactDOM.renderToString();return new Response(html, { headers: { "Content-Type": "text/html" } });})());});
ͬͯͳ͍͜ͱ• ͋͑ͯ react-router.Link ΛΘͣ λάͬͯΔ• Ͱ 16ms ͰભҠ͢Δ͔ΒΘ͔Βͳ͍
݁Ռ• ը໘ભҠ͕ 16ms ͰऴΘΔ(ωοτϫʔΫϦιʔεʹ৮Βͳ͚Ε)• Ϣʔβʔ SPA ͱಉ͡Α͏ʹ࿈ଓͯ͠ΔΑ͏ʹײ͡Δ
ͬͯΘ͔ͬͨ FMP Ͱେࣄͳͱ͜Ζ• ը໘ભҠͰ࿈ଓతͳମݧͷͨΊʹɺϔομͷ࿈ଓੑ͕େࣄ• ٯʹϔομͷ࿈ଓੑ͑͞୲อͰ͖ͯΕଞͲ͏Ͱ͍͍• ϔομͷߴ͞ / എܠ৭Λἧ͑ͯɺCSS ΠϯϥΠϯԽ͓ͯ͘͠
ଞɺ࠷ۙΈ͚͓ͭͨͪΌ• ampproject/worker-dom: The same DOM API andFrameworks you know, but in a Web Worker.• ίʔυϦʔσΟϯάϝϞ worker-dom-code-reading.md• WebWorker Ͱ DOM ૢ࡞͕Ͱ͖Δ• preact ͷ࣮ݱྫ͕͋Δ
Ͳ͏࣮ݱ͍ͯ͠Δ͔• Worker Ͱ DOM API Λશ෦࣮• MutationObserver Ͱ DOM มԽΛࢹ• MutationRecord ΛγϦΞϥΠζͯ͠ postMessage• ϝΠϯεϨουͰద༻(preventDefault getComupetedProperty ग़དྷͳ͍)
Կͷҙຯ͕• UI εϨου֎ͳͷͰૢ࡞ΛϒϩοΫ͠ͳ͍• خ͍͠…
࠷ޙʹ• ͋ΔछͷϨϯμϦϯά࠷దԽ͠Α͏ͱ͢Δͱ JavaScript ͷϚϧνεϨουԽ͕ਐΉ• IE ࣺͯͨΒϚϧνεϨουͷ࣌͘Δͷ֮ޛ͓͖ͯ͠·͠ΐ͏github.com/mizchi-sandbox/swsrssr