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
Mobile First: as difficult as doing things right
swwweet
223
9.7k
The Language of Interfaces
destraynor
158
25k
Building Adaptive Systems
keathley
43
2.6k
Unsuck your backbone
ammeep
671
58k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Docker and Python
trallard
44
3.5k
Site-Speed That Sticks
csswizardry
10
680
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
What's in a price? How to price your products and services
michaelherold
246
12k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
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 • ࠃࡍԽʢάϩʔόϧͳมʹҙ • ॳظঢ়ଶͷड͚͠ •
αχλΠζ • ௨৴ྔͷංେ