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
bff_tips.pdf
Search
Hiroki Kumamoto
September 22, 2018
0
75
bff_tips.pdf
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
95
Promiseを実装してみよう
kumabook
0
310
Tips of server-side rendering with react + redux
kumabook
0
75
プロトコルを使って複数サービスを跨いだ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
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Code Reviewing Like a Champion
maltzj
524
40k
A Tale of Four Properties
chriscoyier
160
23k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Thoughts on Productivity
jonyablonski
69
4.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
The Cult of Friendly URLs
andyhume
79
6.5k
For a Future-Friendly Web
brad_frost
179
9.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Unsuck your backbone
ammeep
671
58k
Transcript
Tips of on 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 • ࠃࡍԽʢάϩʔόϧͳมʹҙ • ॳظঢ়ଶͷड͚͠ •
αχλΠζ • ௨৴ྔͷංେ