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
910
ServiceWorkerSideReactServerSideRendering
Koutarou Chikuba
October 12, 2018
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
CI/CD 改善の勘所
mizchi
0
110
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
15
5.5k
Server Side JavaScript のためのバンドル最適化
mizchi
5
7.2k
V8 as a container on CDN Edge worker
mizchi
6
2.3k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
7
4.4k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.5k
「フロントエンド領域」を再定義する
mizchi
50
37k
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Thoughts on Productivity
jonyablonski
69
4.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Statistics for Hackers
jakevdp
799
220k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
A designer walks into a library…
pauljervisheath
207
24k
GitHub's CSS Performance
jonrohan
1031
460k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
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