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
The Language of Interfaces
destraynor
158
25k
A better future with KSS
kneath
239
17k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Designing Experiences People Love
moore
142
24k
Unsuck your backbone
ammeep
671
58k
Automating Front-end Workflow
addyosmani
1370
200k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Six Lessons from altMBA
skipperchong
28
3.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
The Invisible Side of Design
smashingmag
300
51k
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 • ࠃࡍԽʢάϩʔόϧͳมʹҙ • ॳظঢ়ଶͷड͚͠ •
αχλΠζ • ௨৴ྔͷංେ