Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ServiceWorkerSideReactServerSideRendering
Search
Koutarou Chikuba
October 12, 2018
5
870
ServiceWorkerSideReactServerSideRendering
Koutarou Chikuba
October 12, 2018
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
CI/CD 改善の勘所
mizchi
0
32
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
15
5.1k
Server Side JavaScript のためのバンドル最適化
mizchi
5
6.8k
V8 as a container on CDN Edge worker
mizchi
6
2.1k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
7
4.3k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.4k
「フロントエンド領域」を再定義する
mizchi
50
36k
Featured
See All Featured
Bash Introduction
62gerente
611
210k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
We Have a Design System, Now What?
morganepeng
51
7.4k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
A designer walks into a library…
pauljervisheath
205
24k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
The Language of Interfaces
destraynor
156
24k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Building an army of robots
kneath
303
45k
Speed Design
sergeychernyshev
27
790
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Transcript
Service Worker Side React Server Side Rendering @mizchi
ࣗݾհ • 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-router UniversalJavaScript ͳΒ΄ͱΜͲಈ͘
ServiceWorker Ͱಈ͍ͯΔίʔυ self.addEventListener("fetch", event => { event.respondWith( (async () =>
{ // ...ུ const html = ReactDOM.renderToString(<App />); return new Response(html, { headers: { "Content-Type": "text/html" } }); })() ); });
ͬͯͳ͍͜ͱ • ͋͑ͯ react-router.Link ΛΘͣ <a> λάͬͯΔ • Ͱ 16ms
ͰભҠ͢Δ͔ΒΘ͔Βͳ͍
݁Ռ • ը໘ભҠ͕ 16ms ͰऴΘΔ(ωοτϫʔΫϦιʔεʹ৮Βͳ͚ Ε) • Ϣʔβʔ SPA ͱಉ͡Α͏ʹ࿈ଓͯ͠ΔΑ͏ʹײ͡Δ
ͬͯΘ͔ͬͨ FMP Ͱେࣄͳͱ͜Ζ • ը໘ભҠͰ࿈ଓతͳମݧͷͨΊʹɺϔομͷ࿈ଓੑ͕େࣄ • ٯʹϔομͷ࿈ଓੑ͑͞୲อͰ͖ͯΕଞͲ͏Ͱ͍͍ • ϔομͷߴ͞ /
എܠ৭Λἧ͑ͯɺCSS ΠϯϥΠϯԽ͓ͯ͠ ͘
ଞɺ࠷ۙΈ͚͓ͭͨͪΌ • ampproject/worker-dom: The same DOM API and Frameworks 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