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
40
極限環境で最終ビルドを絞るためのフロントエンド設計
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
How STYLIGHT went responsive
nonsquared
98
5.4k
Building Your Own Lightsaber
phodgson
104
6.2k
Unsuck your backbone
ammeep
669
57k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Fireside Chat
paigeccino
34
3.2k
A Philosophy of Restraint
colly
203
16k
KATA
mclloyd
29
14k
Speed Design
sergeychernyshev
27
800
Writing Fast Ruby
sferik
628
61k
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