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
76
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
98
Promiseを実装してみよう
kumabook
0
310
bff_tips.pdf
kumabook
0
78
プロトコルを使って複数サービスを跨いだmusic playerを実装する
kumabook
2
570
emacs helm likeな WebExtensions を作った話
kumabook
0
160
merges sort
kumabook
0
79
lightweight introducing with reactive cocoa
kumabook
0
55
basic_sort
kumabook
0
72
git_peco_tips
kumabook
0
30
Other Decks in Technology
See All in Technology
AIに全任せしないコーディングとマネジメント思考
kikuchikakeru
0
330
From Live Coding to Vibe Coding with Firebase Studio
firebasethailand
1
340
AI人生苦節10年で会得したAIがやること_人間がやること.pdf
shibuiwilliam
1
240
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
wakinchan
0
190
TypeScript 上達の道
ysknsid25
23
5.1k
隙間時間で爆速開発! Claude Code × Vibe Coding で作るマニュアル自動生成サービス
akitomonam
2
240
【CEDEC2025】『Shadowverse: Worlds Beyond』二度目のDCG開発でゲームをリデザインする~遊びやすさと競技性の両立~
cygames
PRO
1
180
生成AIによる情報システムへのインパクト
taka_aki
1
220
株式会社島津製作所_研究開発(集団協業と知的生産)の現場を支える、OSS知識基盤システムの導入
akahane92
1
1.3k
【CEDEC2025】LLMを活用したゲーム開発支援と、生成AIの利活用を進める組織的な取り組み
cygames
PRO
1
2.1k
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
800
私とAWSとの関わりの歩み~意志あるところに道は開けるかも?~
nagisa53
1
150
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Statistics for Hackers
jakevdp
799
220k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
720
Building Adaptive Systems
keathley
43
2.7k
How to train your dragon (web standard)
notwaldorf
96
6.1k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
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)