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

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

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

Cc81dc2acad7b0d070a2f2d3f10eef7d?s=128

Tsukuru Tanimichi

December 08, 2018
Tweet

Transcript

  1. SFBDUSBJMTͰ41" 443Λ࣮ݱ͢Δ 3BJMT%FWFMPQFST.FFUVQ%BZ !UUBOJNJDIJ୩ಓ૑ 5TVLVSV5BOJNJDIJ

  2. None
  3. IUUQTTQFBLFSEFDLDPNUUBOJNJDIJZBNBHPZB

  4. $%/ͬΆ͍෦෼ʹ͍ͭͯ࿩ͨ͠

  5. None
  6. wͳͷͰࠓ೔͸41"ͬΆ͍෦෼ʹ͍ͭͯ࿩͠·͢ wຊ౰͸4FSWJDF8PSLFSͬΆ͍෦෼ʹ͍ͭͯ΋ ࿩͔͚ͨͬͨ͠Ͳɺࠓ೔͸࿩࣌ؒ͢ͳͦ͞͏ w·ͨࠓ౓ɺผͷ৔Ͱൃද͠·͢

  7. લఏ஌ࣝ   w 3FBDU 3FEVYͷ஌ࣝΛඞཁͱ͢Δղઆ͸ɺ Ͱ͖Δ͚ͩޙ൒ʹूΊ·ͨ͠ w લ൒͸ϑϩϯτͷ஌͕ࣝͳͯ͘΋ʢ͋Δఔ౓ʣ ෼͔Δ಺༰ͷ͸ͣ

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

    3VCZPO3BJMT %FW0QT 'SPOUFOE w SFBDUSBJMTϝϯςφʔ
  9. ཁ݅   w 3FBDU 3FEVYͰ41"Λ։ൃ͢Δ w αʔόʔαΠυ͸3BJMT w 443΋ඞਢ

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

    ϑϩϯτΤϯυΤϯδχΞ͸3BJMTΛ
 ʢ΄ͱΜͲʣҙࣝ͠ͳ͍͍ͯ͘ w αʔόʔΠϯϑϥΤϯδχΞʹͱͬͯ͸ɺ
 ;ͭ͏ͷ3BJMTΞϓϦέʔγϣϯ
  11. ;ͭ͏ͷ3BJMTΞϓϦέʔγϣϯ   w ϞϊϦγοΫͳ3BJMTΞϓϦέʔγϣϯ͕
 ͍ͪ͹Μӡ༻͠΍͍͢ w 3FBDUͱ3BJMT͕ૄ݁߹Ͱ͋Δ͜ͱͱɺ
 ΞϓϦέʔγϣϯͱͯ͠͸ϞϊϦγοΫͰ͋ Δ͜ͱΛཱ྆͢Δ

    w ίʔυϕʔεͷ݈શ͞ͱ։ൃ޻਺અ໿Λ
 ཱ͍྆ͨ͠
  12. #''ʁ/FYUKTʁ   w େن໛ͳ৔߹͸#''ͱ͔/FYUKTྑͦ͞͏ w ͪΐͬͱͨ͠΢ΣϒΞϓϦέʔγϣϯʹ͸
 ͓͓͛͞ʹࢥ͑ͨ w ؂ࢹ͕ඞཁͳϓϩηεΛ૿΍ͨ͘͠ͳ͍

    w ϞϊϦγοΫʹ࡞ͬͯ։ൃޮ཰Λ্͍͛ͨ
  13. SFBDUSBJMT   w SFBDUKTSFBDUSBJMT w 3FBDUͱ3BJMTͷ*OUFHSBUJPOΛͯ͘͠Ε ΔHFN

  14. SFBDUSBJMTͰ41"ʁ   w SFBDUSBJMTͰ41"ͬͯ࡞ΕΔͷʁ w 3&"%.&ʹ͸طଘͷ3BJMTΞϓϦέʔγϣϯ ͷ7JFXʹ$PNPQOFOUΛࠩ͠ࠐΉΑ͏ͳ࢖͍ ํ͕ओʹ঺հ͞Ε͍ͯΔ w

    ࢖͍ํ࣍ୈͰ͸41"ʹ͓͍ͯ443͢Δ͜ͱʹ ΋ར༻Ͱ͖Δ
  15. <%= react_component('HelloMessage', name: 'John') %> render component: 'TodoList', props: {

    todos: @todos } $POUSPMMFS3FOEFSFS 7JFX)FMQFS 41"ʹ͓͍ͯ443͢Δʹ͸
 SFOEFSDPNQPOFOUΛ࢖͏ͱྑ͍ طଘͷ7JFXʹ3FBDU$PNQPOFUΛ
 ࠩ͠ࠐΉ৔߹͸7JFX)FMQFSΛ࢖͏
  16.   w ౰࣌ɺ࢖͍͍ͨػೳ͕஍ຯʹόά͍ͬͯͨ w Կ౓͔13͍ͯ͠Δ͏ͪʹϝϯςφʔʹ༠ΘΕͨ w ͜ͷHFN͕ࢮ͵ͱ͓࢓ࣄͷ։ൃ͕٧ΉͷͰɺ
 ࣗ෼ͰϝϯςͰ͖Δͷ͸޷౎߹ͩͬͨ

  17. SFBDUSBJMTWTSFBDU@PO@SBJMT   w ͲͪΒͷHFNͷ΄͏͕ྑ͍͔ w ݁࿦SFBDUSBJMTͷ΄͏͕ྑ͍Ͱ͢ w ˞ϙδγϣχϯάτʔΫͰ͢ w

    SFBDUSBJMT͸!SFBDUKTͷΦϑΟγϟϧͳHFN w ॳ୅ͷ։ൃऀ͕![QBP
  18. SFBDUSBJMTWTSFBDU@PO@SBJMT   w SFBDU@PO@SBJMT͸3FEVY΍SFBDUSPVUFSΛ
 αϙʔτ͍ͯ͠Δ w ͜ͷϨΠϠʔͰ3FEVYΛҙࣝ͢Δͷ͸͓͔͍͠ w ͦ͏͍͏͜ͱΛͯ͠͠·͏ͱ3BJMTͱ3FBDUͷ

    ີ݁߹ΛੜΉ w SFBDUSPVUFS͸ے͕ѱ͍ʢޙड़ʣ
  19.   another gem which can lead to unnecessary complexities

    react_on_rails ͸ෆඞཁͳෳࡶੑΛ΋ͨΒ͢ SFBDUSBJMTWTSFBDU@PO@SBJMT
  20. w ݁࿦SFBDUSBJMTͷ΄͏͕ྑ͍Ͱ͢ w ˞ϙδγϣχϯάτʔΫͰ͢

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

    %0.͸TUBUFͷࣸ૾Ͱ͋Δͱ͍͏qVYͷ
 લఏ่͕ΕΔ w QBDLBHF໊͕4&0తʹڧͯ͘άάΔͱ
 SFBDUSPVUFS͕Ұ൪্ʹग़ͯ͠·͏
  22. ϧʔςΟϯάΛͲ͏͢Δ͔ʁ   w ϧʔςΟϯά͸3BJMT͕஌͍ͬͯΔ w 3FBDUͰ΋3BJMTͷϧʔςΟϯά৘ใΛ
 ڞ௨Խͯ͠࢖͑͹͍͍

  23. "QQMJDBUJPO$POUSPMMFSSPVUF@OBNF   w ໋໊نଇͰɺ͜ͷ"SUJDMFT4IPX͕DPNQPOFOU ໊ͱDPOUBJOFS໊ʹͳΔ w ·ͨɺ3BJMTଆͰ΋#VJME1SPQTʢޙड़ʣͷΫϥε໊ ʹ΋ͳΔ def

    route_name [controller_path, action_name].map(&:camelize).join end route_name #=> "ArticlesShow"
  24. ॲཧͷϑϩʔ   w 3BJMT͸TUBUFΛ૊ΈཱͯΔ w ͦΕΛSFBDUSBJMT͕3FBDUʹ౉ͯ͠
 3FEVYͷTUPSFʹ֨ೲ͢Δ w ը໘ભҠ࣌͸"1*Λୟ͍ͯɺ3BJMT͕·ͨ


    ৽͍͠TUBUFΛ+40/Ͱు͍ͯɺ3FEVY͸ ͦΕΛऔΓࠐΉ w 3BJMTͱ͸3FBDUͷTUBUFCVJMEFSͰ͋Δ
  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
  26.   function App(props) { const store = buildStore(props); return

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

    ϑϩϯτΤϯυ͸ɺ"QQҎ֎ͷ$PNQPOFOU͸
 ;ͭ͏ͷ3FBDUΞϓϦέʔγϣϯ w 41"ͱͯ͠ը໘ભҠͨ͠৔߹΋443ͨ͠৔߹΋
 ಉ͡63-Ͱ͋Ε͹ಉ͡TUBUFʹͳΔ 3FBDUͱ3BJMTͷૄ݁߹
  28. ࠓ೔࿩ͤͳ͔ͬͨ͜ͱ   w ͪΐͬͱൃද͕࣌ؒ଍Γͳ͔ͬͨ w ޙ೔΋ͬͱৄ͍͠ղઆΛ2JJUBʹॻ͖·͢ w )551ΤϥʔΛͲ͏ѻ͏͔ w

    LBNJOBSJͷϖʔδωʔγϣϯ৘ใΛ΋ͱʹ 3FBDUͷϖʔδωʔλʔΛ૊ΈཱͯΔ w ͳͲͳͲ
  29. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠   w Ҋ݅ɺืूதͰ͢ w ೥݄ʙ w ॏࢹ͢Δ৚݅୯ՁɺՈ͔Β͍ۙ͜ͱ
 ʢେ࡚͔ΒӺҎ಺͔ࣗసंݍ಺͕๬·͍͠ʣ

    w ि೔ৗறͰ͖·͢ɻϦϞʔτෆՄ