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
Service Worker Side React Server Side Rendering
Search
Recruit Technologies
October 12, 2018
Technology
2
3.9k
Service Worker Side React Server Side Rendering
2018/10/12 フューチャーアーキテクトとのLTバトルでの、竹馬(@mizchi)の講演資料になります
Recruit Technologies
October 12, 2018
Tweet
Share
More Decks by Recruit Technologies
See All by Recruit Technologies
障害はチャンスだ! 障害を前向きに捉える
rtechkouhou
1
570
Flutter移行の苦労と、乗り越えた先に得られたもの
rtechkouhou
3
10k
ここ数年間のタウンワークiOSアプリのエンジニアのチャレンジ
rtechkouhou
1
1.4k
大規模環境をAWS Transit Gatewayで設計/移行する前に考える3つのポイントと移行への挑戦
rtechkouhou
1
1.8k
【61期 新人BootCamp】TOC入門
rtechkouhou
3
40k
【RTC新人研修 】 TPS
rtechkouhou
1
39k
Android Boot Camp 2020
rtechkouhou
0
40k
HTML/CSS
rtechkouhou
10
48k
TypeScript Bootcamp 2020
rtechkouhou
9
44k
Other Decks in Technology
See All in Technology
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
480
反実仮想機械学習とは何か
usaito
PRO
11
4.7k
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
770
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
190
Janus
bkuhlmann
1
490
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
300
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
640
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
2
280
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
260
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
530
ServiceNow Knowledge Learning Rise up
manarobot
0
210
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
320
Featured
See All Featured
Designing for Performance
lara
601
67k
Optimizing for Happiness
mojombo
370
69k
Clear Off the Table
cherdarchuk
84
310k
Navigating Team Friction
lara
178
13k
How to name files
jennybc
65
93k
Into the Great Unknown - MozCon
thekraken
10
990
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
Debugging Ruby Performance
tmm1
70
11k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Scaling GitHub
holman
457
140k
How GitHub (no longer) Works
holman
304
140k
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