Tweet
Tweet

Slide 1

Slide 1 text

Tips of server-side rendering with
 react + redux Hiroki Kumamoto 
 a.k.a
 @kumabook

Slide 2

Slide 2 text

ࣗݾ঺հ • Hiroki Kumamoto • twitter, github: @kumabook • Software engineer at Spincoaster, Inc • https://typica.mu • iOS/swift, JavaScript, WebExtensions, rails

Slide 3

Slide 3 text

αʔόαΠυϨϯμϦϯά • React ͳͲΛ࢖ͬͯΫϥΠΞϯτJSଆͰϧʔςΟϯ άͯ͠DOMΛϨϯμϦϯά(SPA)͢Δͱɺαʔό͔Β ฦͬͯ͘Δ࠷ॳͷHTML͸ίϯςφཁૉ͚ͩͷHTML • ࠷ॳͷDOMΛϨϯμϦϯά͢Δ·Ͱ͕஗͍ʢ͔΋) • JS͕ಈ͔ͳ͍ͱਅͬന • SEO

Slide 4

Slide 4 text

αʔόαΠυϨϯμϦϯάͱ͸ • αʔόଆͰJSΛಈ͔ͯ͠ɺΫϥΠΞϯτJS͕Ϩ ϯμϦϯά͢ΔͰ͋Ζ͏ॳظHTMLΛฦͯ͋͛͠ Δ • SPAͷϝϦοτΛڗडͭͭ͠ɺσϝϦοτ΋ܰݮ

Slide 5

Slide 5 text

ΫϥΠΞϯταΠυϨϯμϦϯά Api server Html server 
 
 
 
 Browser Ajax ௨৴ 1. HTMLऔಘ 2. ϧʔςΟϯά͔Β
 ॳظը໘දࣔ 3. API͔Βσʔλऔಘ 4. ॳظը໘ߋ৽

Slide 6

Slide 6 text

αʔόαΠυϨϯμϦϯάͷ৔߹ Api server server side js expressͳͲ ͷnode੡http server 
 
 
 
 Browser αʔόؒ௨৴ Ajax ௨৴ 1. ϧʔςΟϯά͔Βը໘ܾఆ 2. API ͔Βσʔλऔಘ 3. HTMLੜ੒

Slide 7

Slide 7 text

αʔόαΠυϨϯμϦϯάͷྲྀΕ 1.HttpRequest͔ΒύεɺύϥϝʔλͳͲΛऔಘ 2.ඞཁͳ৘ใΛඇಉظʹAPIΛୟ͍ͯऔಘ (͕͜͜ ਏ͍ 3.औಘͨ͠৘ใͰॳظঢ়ଶΛߏ੒ɺrenderToString ͰHTMLΛ࡞੒

Slide 8

Slide 8 text

tips 1 ඇಉظॲཧ • componentDidMount͕ݺ͹Εͳ͍ • ͍ͭ΋ͷʮը໘͕දࣔ͞ΕͨΒAPIୟ͍ͯ…ʯ ͕Ͱ͖ͳ͍ • componentDidMountͰ΍ͬͯͨ͜ͱΛࣗ෼Ͱݺ Ϳඞཁ͕͋Δ • ૉ௚ʹ࣮૷͢Δͱίʔυ͕ڞ༗͠ʹ͘͘ͳΔ

Slide 9

Slide 9 text

Ξϓϩʔν • componentDidMount͸࢖ΘͣʹɺϧʔςΟϯά ͱඇಉظॲཧΛ݁ͼ͚ͭΔ • Before: router -> component -> initial async action • After: router -> component
 -> initial async

Slide 10

Slide 10 text

۩ମతͳ࣮૷ • redux-saga • router sagaΛ࣮૷ • urlΛҾ਺ʹͱͬͯɺͦΕʹԠͨ͡initial async taskΛ࣮ߦ • ΫϥΠΞϯταΠυ • react-routerͷLOCATION_CHANGE action • αʔόαΠυ • HttpRequestͷurlΛ࢖࣮ͬͯߦ

Slide 11

Slide 11 text

Tip2: ଟݴޠରԠ • ଟݴޠରԠ • i18next • ΫϥΠΞϯτ: querystring, navigator, cookie … • αʔό: Accept-Languageͱ͔ͳͲʹԠͯ͡੾ Γସ͑Δ

Slide 12

Slide 12 text

import i18next from 'i18next';
 i18next.init({ ..})
 
 …

{i18next.t(‘hogehoge’)}
Կؾͳ͘͜ΜͳίʔυΛ͔͘ͱ

Slide 13

Slide 13 text

࣮࣭άϩʔόϧ • i18next.init Ͱઃఆ͞ΕΔ஋͸࣮࣭άϩʔόϧͳ ΦϒδΣΫτ • ֤ϦΫΤετ͝ͱʹઃఆ஋͸มΘΓ͏ΔͷͰɺ αʔόଆͰ͸࢖͑ͳ͍

Slide 14

Slide 14 text

Ξϓϩʔν • αʔόͷHTTPRequest͔Βi18nextͷΠϯελϯ εΛੜ੒ͯ͠ɺόέπϦϨʔ͢Δ • i18next-express-middleware • i18next.I18nextProvider • ඇಉظͷॲཧͷύϥϝʔλͱ͔ʹ࢖͍ͬͯΔͱ ͖͸஫ҙ

Slide 15

Slide 15 text

ֶͼ • Կؾͳ͘࢖ͬͯΔϥΠϒϥϦ͕αʔόαΠυϨϯ μϦϯάͰ͸ͦͷ··ಈ͔ͳ͍͜ͱ͕͋Δ • σβΠϯͷ੾Γସ͑: react-media

Slide 16

Slide 16 text

ॳظঢ়ଶͷड͚౉͠ • αʔόαΠυϨϯμϦϯάͰ͸ɺϨϯμϦϯά͞Εͨ HTMLͱͱ΋ʹॳظঢ়ଶͷJS objectΛΫϥΠΞϯτʹ౉͢ ඞཁ͕͋Δ(hydrate) • HTMLੜ੒͡ʹάϩʔόϧม਺ͱͯ͠ଧͪࠐΉ • window.__PRELOADED_STATE__ = $ {JSON.stringify(preloadedState)}; • ࢀߟ: https://github.com/reduxjs/redux/blob/master/docs/ recipes/ServerRendering.md

Slide 17

Slide 17 text

αχλΠζ • ॳظঢ়ଶͷจࣈྻͷதʹscript λάͱ͔͋ͬͨ ΒɺXSS͞ΕΔͷͰαχλΠζ͢Δ • yahoo/serialize-javascript

Slide 18

Slide 18 text

௨৴ྔͷ૿Ճ • ॳظঢ়ଶͷΦϒδΣΫτΛจࣈྻԽ͍ͯ͠ΕΔ ͷͰɺϨεϙϯεͷංେԽ஫ҙ • දࣔจࣈྻ͸୯७ʹ̎ॏʹ࣋ͭ͜ͱʹ • HTMLʹදࣔͯ͠ͳ͍࢖Θͳ͍σʔλ͸ফ͢ • truncateͯ͠දࣔͯ͠ΔςΩετ͸ɺॳظঢ়ଶ ͷΦϒδΣΫτ಺Ͱ΋࡟͓ͬͯ͘

Slide 19

Slide 19 text

·ͱΊ • ඇಉظॲཧ (router saga • ࠃࡍԽʢάϩʔόϧͳม਺ʹ஫ҙ • ॳظঢ়ଶͷड͚౉͠ • αχλΠζ • ௨৴ྔͷංେ

Slide 20

Slide 20 text

ࢀߟ • kumabook/spread_beaver_frontend • react • redux • redux-saga • redux-router • express(server-side rendering)