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
Tips of server-side rendering with react + redux
Search
Hiroki Kumamoto
September 22, 2018
Technology
0
60
Tips of server-side rendering with react + redux
at we're JavaScripter 24th(2018/9/21)
https://wajs.connpass.com/event/100257/
Hiroki Kumamoto
September 22, 2018
Tweet
Share
More Decks by Hiroki Kumamoto
See All by Hiroki Kumamoto
How to implement timetable view on iOS
kumabook
0
70
Promiseを実装してみよう
kumabook
0
230
bff_tips.pdf
kumabook
0
41
プロトコルを使って複数サービスを跨いだmusic playerを実装する
kumabook
2
430
emacs helm likeな WebExtensions を作った話
kumabook
0
120
merges sort
kumabook
0
71
lightweight introducing with reactive cocoa
kumabook
0
49
basic_sort
kumabook
0
66
git_peco_tips
kumabook
0
25
Other Decks in Technology
See All in Technology
継続的な改善 x ⾮連続的な進化
sansantech
PRO
3
130
Cracking the KubeCon CfP
inductor
2
200
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
260
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
220
VS CodeでAWSを操作しよう
smt7174
7
1.6k
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
4
210
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
2
230
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
330
Oracle Cloud Infrastructure:2024年4月度サービス・アップデート
oracle4engineer
PRO
1
180
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.5k
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
2
170
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
110
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
Web development in the modern age
philhawksworth
202
10k
Practical Orchestrator
shlominoach
181
9.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.5k
Product Roadmaps are Hard
iamctodd
43
9.7k
What's new in Ruby 2.0
geeforr
337
31k
The Cost Of JavaScript in 2023
addyosmani
15
3.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
220
21k
Embracing the Ebb and Flow
colly
79
4.1k
The Mythical Team-Month
searls
215
42k
Navigating Team Friction
lara
177
13k
Transcript
Tips of server-side rendering with react + redux Hiroki Kumamoto
a.k.a @kumabook
ࣗݾհ • Hiroki Kumamoto • twitter, github: @kumabook • Software
engineer at Spincoaster, Inc • https://typica.mu • iOS/swift, JavaScript, WebExtensions, rails
αʔόαΠυϨϯμϦϯά • React ͳͲΛͬͯΫϥΠΞϯτJSଆͰϧʔςΟϯ άͯ͠DOMΛϨϯμϦϯά(SPA)͢Δͱɺαʔό͔Β ฦͬͯ͘Δ࠷ॳͷHTMLίϯςφཁૉ͚ͩͷHTML • ࠷ॳͷDOMΛϨϯμϦϯά͢Δ·Ͱ͕͍ʢ͔) • JS͕ಈ͔ͳ͍ͱਅͬന
• SEO
αʔόαΠυϨϯμϦϯάͱ • αʔόଆͰJSΛಈ͔ͯ͠ɺΫϥΠΞϯτJS͕Ϩ ϯμϦϯά͢ΔͰ͋Ζ͏ॳظHTMLΛฦͯ͋͛͠ Δ • SPAͷϝϦοτΛڗडͭͭ͠ɺσϝϦοτܰݮ
ΫϥΠΞϯταΠυϨϯμϦϯά Api server Html server Browser
Ajax ௨৴ 1. HTMLऔಘ 2. ϧʔςΟϯά͔Β ॳظը໘දࣔ 3. API͔Βσʔλऔಘ 4. ॳظը໘ߋ৽
αʔόαΠυϨϯμϦϯάͷ߹ Api server server side js expressͳͲ ͷnodehttp server
Browser αʔόؒ௨৴ Ajax ௨৴ 1. ϧʔςΟϯά͔Βը໘ܾఆ 2. API ͔Βσʔλऔಘ 3. HTMLੜ
αʔόαΠυϨϯμϦϯάͷྲྀΕ 1.HttpRequest͔ΒύεɺύϥϝʔλͳͲΛऔಘ 2.ඞཁͳใΛඇಉظʹAPIΛୟ͍ͯऔಘ (͕͜͜ ਏ͍ 3.औಘͨ͠ใͰॳظঢ়ଶΛߏɺrenderToString ͰHTMLΛ࡞
tips 1 ඇಉظॲཧ • componentDidMount͕ݺΕͳ͍ • ͍ͭͷʮը໘͕දࣔ͞ΕͨΒAPIୟ͍ͯ…ʯ ͕Ͱ͖ͳ͍ • componentDidMountͰͬͯͨ͜ͱΛࣗͰݺ
Ϳඞཁ͕͋Δ • ૉʹ࣮͢Δͱίʔυ͕ڞ༗͠ʹ͘͘ͳΔ
Ξϓϩʔν • componentDidMountΘͣʹɺϧʔςΟϯά ͱඇಉظॲཧΛ݁ͼ͚ͭΔ • Before: router -> component ->
initial async action • After: router -> component -> initial async
۩ମతͳ࣮ • redux-saga • router sagaΛ࣮ • urlΛҾʹͱͬͯɺͦΕʹԠͨ͡initial async taskΛ࣮ߦ
• ΫϥΠΞϯταΠυ • react-routerͷLOCATION_CHANGE action • αʔόαΠυ • HttpRequestͷurlΛ࣮ͬͯߦ
Tip2: ଟݴޠରԠ • ଟݴޠରԠ • i18next • ΫϥΠΞϯτ: querystring, navigator,
cookie … • αʔό: Accept-Languageͱ͔ͳͲʹԠͯ͡ Γସ͑Δ
import i18next from 'i18next'; i18next.init({ ..}) … <div>{i18next.t(‘hogehoge’)}</div> Կؾͳ͘͜ΜͳίʔυΛ͔͘ͱ
࣮࣭άϩʔόϧ • i18next.init Ͱઃఆ͞ΕΔ࣮࣭άϩʔόϧͳ ΦϒδΣΫτ • ֤ϦΫΤετ͝ͱʹઃఆมΘΓ͏ΔͷͰɺ αʔόଆͰ͑ͳ͍
Ξϓϩʔν • αʔόͷHTTPRequest͔Βi18nextͷΠϯελϯ εΛੜͯ͠ɺόέπϦϨʔ͢Δ • i18next-express-middleware • i18next.I18nextProvider • ඇಉظͷॲཧͷύϥϝʔλͱ͔ʹ͍ͬͯΔͱ
͖ҙ
ֶͼ • Կؾͳͬͯ͘ΔϥΠϒϥϦ͕αʔόαΠυϨϯ μϦϯάͰͦͷ··ಈ͔ͳ͍͜ͱ͕͋Δ • σβΠϯͷΓସ͑: react-media
ॳظঢ়ଶͷड͚͠ • αʔόαΠυϨϯμϦϯάͰɺϨϯμϦϯά͞Εͨ HTMLͱͱʹॳظঢ়ଶͷJS objectΛΫϥΠΞϯτʹ͢ ඞཁ͕͋Δ(hydrate) • HTMLੜ͡ʹάϩʔόϧมͱͯ͠ଧͪࠐΉ • window.__PRELOADED_STATE__
= $ {JSON.stringify(preloadedState)}; • ࢀߟ: https://github.com/reduxjs/redux/blob/master/docs/ recipes/ServerRendering.md
αχλΠζ • ॳظঢ়ଶͷจࣈྻͷதʹscript λάͱ͔͋ͬͨ ΒɺXSS͞ΕΔͷͰαχλΠζ͢Δ • yahoo/serialize-javascript
௨৴ྔͷ૿Ճ • ॳظঢ়ଶͷΦϒδΣΫτΛจࣈྻԽ͍ͯ͠ΕΔ ͷͰɺϨεϙϯεͷංେԽҙ • දࣔจࣈྻ୯७ʹ̎ॏʹ࣋ͭ͜ͱʹ • HTMLʹදࣔͯ͠ͳ͍Θͳ͍σʔλফ͢ • truncateͯ͠දࣔͯ͠ΔςΩετɺॳظঢ়ଶ
ͷΦϒδΣΫτͰ͓ͬͯ͘
·ͱΊ • ඇಉظॲཧ (router saga • ࠃࡍԽʢάϩʔόϧͳมʹҙ • ॳظঢ়ଶͷड͚͠ •
αχλΠζ • ௨৴ྔͷංେ
ࢀߟ • kumabook/spread_beaver_frontend • react • redux • redux-saga •
redux-router • express(server-side rendering)