Upgrade to Pro — share decks privately, control downloads, hide ads and more …

react-rails で SPA, SSR を実現する / react-rails-spa...

Avatar for Tsukuru Tanimichi Tsukuru Tanimichi
December 08, 2018
1.1k

react-rails で SPA, SSR を実現する / react-rails-spa-ssr

Avatar for Tsukuru Tanimichi

Tsukuru Tanimichi

December 08, 2018
Tweet

Transcript

  1. ࣗݾ঺հ   w !UUBOJNJDIJ୩ಓ૑ 5TVLVSV5BOJNJDIJ  w ϑϦʔϥϯε w

    3VCZPO3BJMT %FW0QT 'SPOUFOE w SFBDUSBJMTϝϯςφʔ
  2. ࣮ݱ͍ͨ͜͠ͱ   w ΧδϡΞϧʹ41"Λ࡞ΕΔΑ͏ʹ͍ͨ͠ w গͳ͍ίʔυྔͰ࣮ݱ͍ͨ͠ w 3FBDUͱ3BJMTͷΑΓྑ͍ڞଘ w

    ϑϩϯτΤϯυΤϯδχΞ͸3BJMTΛ
 ʢ΄ͱΜͲʣҙࣝ͠ͳ͍͍ͯ͘ w αʔόʔΠϯϑϥΤϯδχΞʹͱͬͯ͸ɺ
 ;ͭ͏ͷ3BJMTΞϓϦέʔγϣϯ
  3. <%= react_component('HelloMessage', name: 'John') %> render component: 'TodoList', props: {

    todos: @todos } $POUSPMMFS3FOEFSFS 7JFX)FMQFS 41"ʹ͓͍ͯ443͢Δʹ͸
 SFOEFSDPNQPOFOUΛ࢖͏ͱྑ͍ طଘͷ7JFXʹ3FBDU$PNQPOFUΛ
 ࠩ͠ࠐΉ৔߹͸7JFX)FMQFSΛ࢖͏
  4.   another gem which can lead to unnecessary complexities

    react_on_rails ͸ෆඞཁͳෳࡶੑΛ΋ͨΒ͢ SFBDUSBJMTWTSFBDU@PO@SBJMT
  5. ϧʔςΟϯάΛͲ͏͢Δ͔ʁ   w SFBDUSPVUFS͸ے͕ѱ͍ w ͦ΋ͦ΋3FBDU͸7JFX w ϧʔςΟϯάΛ͍͍࢘ͬͯϨΠϠʔͰ͸ͳ͍ w

    %0.͸TUBUFͷࣸ૾Ͱ͋Δͱ͍͏qVYͷ
 લఏ่͕ΕΔ w QBDLBHF໊͕4&0తʹڧͯ͘άάΔͱ
 SFBDUSPVUFS͕Ұ൪্ʹग़ͯ͠·͏
  6. "QQMJDBUJPO$POUSPMMFSSFOEFS@BQQ   w ͢΂ͯͷΤϯυϙΠϯτ͸SFOEFS@BQQ͢Δ w 41"ͳͷͰ443࣌͸ৗʹ"QQΛSFOEFS͢Δ def render_app #

    BuildProps::ArticlesShow.callʢHash Λ૊ΈཱͯΔʣ props = BuildProps.const_get(route_name).call if api? render json: props else # SSR render component: 'App', props: props, prerender: true end end
  7.   function App(props) { const store = buildStore(props); return

    ( <Provider store={store}> <Router /> </Provider> ); } w "QQίϯϙʔωϯτ͸ड͚औͬͨQSPQT͔Β
 3FEVYͷTUPSFΛ૊ΈཱͯΔ w 3BJMTͷSPVUF@OBNFΛ΋ͱʹΫϥΠΞϯταΠυͰ
 ϧʔςΟϯά͢Δ
  8.   w "QQ QSPQT ͕3BJMTͱ3FBDUͷΠϯλʔϑΣʔε w 3BJMT͸"QQҎ֎ͷ$PNQPOFOUʹ͸
 ؔ஌͠ͳ͍ w

    ϑϩϯτΤϯυ͸ɺ"QQҎ֎ͷ$PNQPOFOU͸
 ;ͭ͏ͷ3FBDUΞϓϦέʔγϣϯ w 41"ͱͯ͠ը໘ભҠͨ͠৔߹΋443ͨ͠৔߹΋
 ಉ͡63-Ͱ͋Ε͹ಉ͡TUBUFʹͳΔ 3FBDUͱ3BJMTͷૄ݁߹