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
850
ServiceWorkerSideReactServerSideRendering
Koutarou Chikuba
October 12, 2018
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
15
4.8k
Server Side JavaScript のためのバンドル最適化
mizchi
5
6.5k
V8 as a container on CDN Edge worker
mizchi
6
1.9k
Edge Side Frontend という新領域
mizchi
34
14k
バンドル最適化マニアクス at tfconf
mizchi
7
4.2k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.3k
「フロントエンド領域」を再定義する
mizchi
50
36k
光を超えるためのフロントエンドアーキテクチャ
mizchi
90
23k
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
2k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
What's new in Ruby 2.0
geeforr
343
31k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Gamification - CAS2011
davidbonilla
80
5k
Git: the NoSQL Database
bkeepers
PRO
427
64k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Designing for humans not robots
tammielis
249
25k
We Have a Design System, Now What?
morganepeng
50
7.2k
Code Reviewing Like a Champion
maltzj
520
39k
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