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

Cc81dc2acad7b0d070a2f2d3f10eef7d?s=47 Tsukuru Tanimichi
December 08, 2018
290

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

Cc81dc2acad7b0d070a2f2d3f10eef7d?s=128

Tsukuru Tanimichi

December 08, 2018
Tweet

Transcript

  1. 2.
  2. 5.
  3. 8.

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

    3VCZPO3BJMT %FW0QT 'SPOUFOE w SFBDUSBJMTϝϯςφʔ
  4. 10.

    ࣮ݱ͍ͨ͜͠ͱ   w ΧδϡΞϧʹ41"Λ࡞ΕΔΑ͏ʹ͍ͨ͠ w গͳ͍ίʔυྔͰ࣮ݱ͍ͨ͠ w 3FBDUͱ3BJMTͷΑΓྑ͍ڞଘ w

    ϑϩϯτΤϯυΤϯδχΞ͸3BJMTΛ
 ʢ΄ͱΜͲʣҙࣝ͠ͳ͍͍ͯ͘ w αʔόʔΠϯϑϥΤϯδχΞʹͱͬͯ͸ɺ
 ;ͭ͏ͷ3BJMTΞϓϦέʔγϣϯ
  5. 15.

    <%= react_component('HelloMessage', name: 'John') %> render component: 'TodoList', props: {

    todos: @todos } $POUSPMMFS3FOEFSFS 7JFX)FMQFS 41"ʹ͓͍ͯ443͢Δʹ͸
 SFOEFSDPNQPOFOUΛ࢖͏ͱྑ͍ طଘͷ7JFXʹ3FBDU$PNQPOFUΛ
 ࠩ͠ࠐΉ৔߹͸7JFX)FMQFSΛ࢖͏
  6. 19.

      another gem which can lead to unnecessary complexities

    react_on_rails ͸ෆඞཁͳෳࡶੑΛ΋ͨΒ͢ SFBDUSBJMTWTSFBDU@PO@SBJMT
  7. 21.

    ϧʔςΟϯάΛͲ͏͢Δ͔ʁ   w SFBDUSPVUFS͸ے͕ѱ͍ w ͦ΋ͦ΋3FBDU͸7JFX w ϧʔςΟϯάΛ͍͍࢘ͬͯϨΠϠʔͰ͸ͳ͍ w

    %0.͸TUBUFͷࣸ૾Ͱ͋Δͱ͍͏qVYͷ
 લఏ่͕ΕΔ w QBDLBHF໊͕4&0తʹڧͯ͘άάΔͱ
 SFBDUSPVUFS͕Ұ൪্ʹग़ͯ͠·͏
  8. 25.

    "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
  9. 26.

      function App(props) { const store = buildStore(props); return

    ( <Provider store={store}> <Router /> </Provider> ); } w "QQίϯϙʔωϯτ͸ड͚औͬͨQSPQT͔Β
 3FEVYͷTUPSFΛ૊ΈཱͯΔ w 3BJMTͷSPVUF@OBNFΛ΋ͱʹΫϥΠΞϯταΠυͰ
 ϧʔςΟϯά͢Δ
  10. 27.

      w "QQ QSPQT ͕3BJMTͱ3FBDUͷΠϯλʔϑΣʔε w 3BJMT͸"QQҎ֎ͷ$PNQPOFOUʹ͸
 ؔ஌͠ͳ͍ w

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