Tips of server-side rendering with react + redux

at we're JavaScripter 24th(2018/9/21)

https://wajs.connpass.com/event/100257/

Transcript

1. Tips of server-side rendering with
 react + redux Hiroki Kumamoto 
 a.k.a
 @kumabook
2. ࣗݾ঺հ • Hiroki Kumamoto • twitter, github: @kumabook • Software engineer at Spincoaster, Inc • https://typica.mu • iOS/swift, JavaScript, WebExtensions, rails
3. αʔόαΠυϨϯμϦϯά • React ͳͲΛ࢖ͬͯΫϥΠΞϯτJSଆͰϧʔςΟϯ άͯ͠DOMΛϨϯμϦϯά(SPA)͢Δͱɺαʔό͔Β ฦͬͯ͘Δ࠷ॳͷHTML͸ίϯςφཁૉ͚ͩͷHTML • ࠷ॳͷDOMΛϨϯμϦϯά͢Δ·Ͱ͕஗͍ʢ͔΋) • JS͕ಈ͔ͳ͍ͱਅͬന • SEO
4. αʔόαΠυϨϯμϦϯάͱ͸ • αʔόଆͰJSΛಈ͔ͯ͠ɺΫϥΠΞϯτJS͕Ϩ ϯμϦϯά͢ΔͰ͋Ζ͏ॳظHTMLΛฦͯ͋͛͠ Δ • SPAͷϝϦοτΛڗडͭͭ͠ɺσϝϦοτ΋ܰݮ
5. ΫϥΠΞϯταΠυϨϯμϦϯά Api server Html server 
 
 
 
 Browser Ajax ௨৴ 1. HTMLऔಘ 2. ϧʔςΟϯά͔Β
 ॳظը໘දࣔ 3. API͔Βσʔλऔಘ 4. ॳظը໘ߋ৽
6. αʔόαΠυϨϯμϦϯάͷ৔߹ Api server server side js expressͳͲ ͷnode੡http server 
 
 
 
 Browser αʔόؒ௨৴ Ajax ௨৴ 1. ϧʔςΟϯά͔Βը໘ܾఆ 2. API ͔Βσʔλऔಘ 3. HTMLੜ੒
7. αʔόαΠυϨϯμϦϯάͷྲྀΕ 1.HttpRequest͔ΒύεɺύϥϝʔλͳͲΛऔಘ 2.ඞཁͳ৘ใΛඇಉظʹAPIΛୟ͍ͯऔಘ (͕͜͜ ਏ͍ 3.औಘͨ͠৘ใͰॳظঢ়ଶΛߏ੒ɺrenderToString ͰHTMLΛ࡞੒
8. tips 1 ඇಉظॲཧ • componentDidMount͕ݺ͹Εͳ͍ • ͍ͭ΋ͷʮը໘͕දࣔ͞ΕͨΒAPIୟ͍ͯ…ʯ ͕Ͱ͖ͳ͍ • componentDidMountͰ΍ͬͯͨ͜ͱΛࣗ෼Ͱݺ Ϳඞཁ͕͋Δ • ૉ௚ʹ࣮૷͢Δͱίʔυ͕ڞ༗͠ʹ͘͘ͳΔ
9. Ξϓϩʔν • componentDidMount͸࢖ΘͣʹɺϧʔςΟϯά ͱඇಉظॲཧΛ݁ͼ͚ͭΔ • Before: router -> component -> initial async action • After: router -> component
 -> initial async
10. ۩ମతͳ࣮૷ • redux-saga • router sagaΛ࣮૷ • urlΛҾ਺ʹͱͬͯɺͦΕʹԠͨ͡initial async taskΛ࣮ߦ • ΫϥΠΞϯταΠυ • react-routerͷLOCATION_CHANGE action • αʔόαΠυ • HttpRequestͷurlΛ࢖࣮ͬͯߦ
11. Tip2: ଟݴޠରԠ • ଟݴޠରԠ • i18next • ΫϥΠΞϯτ: querystring, navigator, cookie … • αʔό: Accept-Languageͱ͔ͳͲʹԠͯ͡੾ Γସ͑Δ
12. import i18next from 'i18next';
 i18next.init({ ..})
 
 …
 <div>{i18next.t(‘hogehoge’)}</div> Կؾͳ͘͜ΜͳίʔυΛ͔͘ͱ
13. ࣮࣭άϩʔόϧ • i18next.init Ͱઃఆ͞ΕΔ஋͸࣮࣭άϩʔόϧͳ ΦϒδΣΫτ • ֤ϦΫΤετ͝ͱʹઃఆ஋͸มΘΓ͏ΔͷͰɺ αʔόଆͰ͸࢖͑ͳ͍
14. Ξϓϩʔν • αʔόͷHTTPRequest͔Βi18nextͷΠϯελϯ εΛੜ੒ͯ͠ɺόέπϦϨʔ͢Δ • i18next-express-middleware • i18next.I18nextProvider • ඇಉظͷॲཧͷύϥϝʔλͱ͔ʹ࢖͍ͬͯΔͱ ͖͸஫ҙ
15. ֶͼ • Կؾͳ͘࢖ͬͯΔϥΠϒϥϦ͕αʔόαΠυϨϯ μϦϯάͰ͸ͦͷ··ಈ͔ͳ͍͜ͱ͕͋Δ • σβΠϯͷ੾Γସ͑: react-media
16. ॳظঢ়ଶͷड͚౉͠ • αʔόαΠυϨϯμϦϯάͰ͸ɺϨϯμϦϯά͞Εͨ HTMLͱͱ΋ʹॳظঢ়ଶͷJS objectΛΫϥΠΞϯτʹ౉͢ ඞཁ͕͋Δ(hydrate) • HTMLੜ੒͡ʹάϩʔόϧม਺ͱͯ͠ଧͪࠐΉ • window.__PRELOADED_STATE__ = $ {JSON.stringify(preloadedState)}; • ࢀߟ: https://github.com/reduxjs/redux/blob/master/docs/ recipes/ServerRendering.md
17. αχλΠζ • ॳظঢ়ଶͷจࣈྻͷதʹscript λάͱ͔͋ͬͨ ΒɺXSS͞ΕΔͷͰαχλΠζ͢Δ • yahoo/serialize-javascript
18. ௨৴ྔͷ૿Ճ • ॳظঢ়ଶͷΦϒδΣΫτΛจࣈྻԽ͍ͯ͠ΕΔ ͷͰɺϨεϙϯεͷංେԽ஫ҙ • දࣔจࣈྻ͸୯७ʹ̎ॏʹ࣋ͭ͜ͱʹ • HTMLʹදࣔͯ͠ͳ͍࢖Θͳ͍σʔλ͸ফ͢ • truncateͯ͠දࣔͯ͠ΔςΩετ͸ɺॳظঢ়ଶ ͷΦϒδΣΫτ಺Ͱ΋࡟͓ͬͯ͘
19. ·ͱΊ • ඇಉظॲཧ (router saga • ࠃࡍԽʢάϩʔόϧͳม਺ʹ஫ҙ • ॳظঢ়ଶͷड͚౉͠ • αχλΠζ • ௨৴ྔͷංେ
20. ࢀߟ • kumabook/spread_beaver_frontend • react • redux • redux-saga • redux-router • express(server-side rendering)