サーバサイドレンダリング、してますか?

サーバサイドレンダリング、してますか?
~ 憧れのIsomorphic JavaScript ~

Meguro.es #6 2016/10/13
http://meguroes.connpass.com/event/39081/

Transcript

1. αʔόαΠυϨϯμϦϯάɺͯ͠·͔͢? ~ ಌΕͷIsomorphic JavaScript ~ Meguro.es #6 2016/10/13 Akatsuki Inc.ɹߴদ ਅฏ
2.  ▪ ߴদ ਅฏ (@shimpeiws) ▪ WebΤϯδχΞ @ ΞΧπΩ LXࣄۀ෦ ɹɾRailsͱJavaScriptΛ൒ʑ͘Β͍ॻ͍͍ͯΔ ▪ LX(ϥΠϒΤΫεϖϦΤϯε)ࣄۀ෦ ɹɾཱྀφΧɾΞΫςΟϏςΟɺཱྀߦɺΠϯό΢ϯυͳͲ ɹɾϦΞϧͳମݧͷػձΛఏڙ͢ΔαʔϏε౳Λ޿ؚ͘Ή ࢲ͸୭
3.  ▪ 9/12͔ΒΦϑΟε͕໨ࠇʹҠస!!! 8F
   KPJOFE
   .FPVSP FT 
4.  ໨࣍ 1. ͳͥαʔόαΠυϨϯμϦϯά͍ͨ͠ͷ͔? 3. Isomorphic JavaScript 2. ࣮ݱ͢ΔͨΊͷΞʔΩςΫνϟ
5.  ▪ ৽ن։ൃ͍ͯ͠ΔϓϩμΫτͷٕज़తͳཁ݅ ɹɾ·ͣ͸Webओಋ ɹɾBtoCͳαʔϏε (SSR͍ͨ͠ͷ͸toCͷ෦෼) ɹɾར༻Ϣʔβ͸εϚʔτϑΥϯଟ਺Λ૝ఆ ɹɾݕࡧ΍SNSͷγΣΞ͔ΒͷྲྀೖΛओʹ૝ఆ ɹɾҰ൪τϥϑΟοΫ͕ू·Δͱ૝ఆ͞ΕΔϖʔδͷϢʔβΠϯλϥΫγϣϯ͕ ෳࡶ ɹɾSEOॏཁ (※1) ▪ ※1 ɹɾGoogle BOT͸window.onload·ͰಡΉɺͱ͍͏આ͸͋Δ ͳͥαʔόαΠυϨϯμϦϯά͍ͨ͠ͷ͔
   
6.  ▪ લఏͱͳΔٕज़ελοΫͷબఆ ɹɾαʔόαΠυ: Rails ɹɾView: React ɹɾFlux: Redux ɹɾSPAͳͱ͜Ζͱͦ͏Ͱͳ͍ͱ͜Ζ͕͋Δ ͷߏ੒ͰαʔόαΠυϨϯμϦϯά΋͍ͨ͠! ͳͥαʔόαΠυϨϯμϦϯά͍ͨ͠ͷ͔
   
7.  ▪ Presentation Serverɺ API Serverͷ2୆ମ੍ ɾॳճΞΫηε͸HTTPϦΫΤετ ɾNode.jsͰड͚ͯSSR ΞʔΩςΫνϟ
   
8.  ▪ Presentation Serverɺ API Serverͷ2୆ମ੍ ɾͦΕҎ߱͸SPA ΞʔΩςΫνϟ
   
9.  ▪ Presentation Server ɹɾNode.js (Express) Ͱಈ͍͍ͯΔ ɹɾΫϥΠΞϯτ͸·ͣͪ͜ΒʹΞΫηεͯ͘͠Δ ɹɾαʔόαΠυϨϯμϦϯάͨ͠HTMLΛฦ͢ ɹɾDBΞΫηε͸ͤͣ σʔλऔಘ͸API Server΁ͷϦΫΤετ ɹɾιʔείʔυ͸ΫϥΠΞϯταΠυͰಈ͘JSͱڞ௨ ▪ API Server ɹɾRailsͰಈ͍͍ͯΔ ɹɾRestͳAPIΛఏڙɺJSONͰϨεϙϯε ɹɾView͸ఏڙ͠ͳ͍ ΞʔΩςΫνϟ
   
10.  ▪ ͪͳΈʹ͜ͷΞʔΩςΫνϟʹࢸΔલ͸… ɹɾreact-railsΛࢼ͍ͯͨ͠ ɹɹɾRailsଆͰऔಘͨ͠σʔλΛઐ༻ͷϔϧύϝιουܦ༝Ͱpropsͱͯ͠View ʹ౉͢࢓૊Έ ɹɾ͋Εɺ͜ΕΫϥΠΞϯταΠυͰ΋͏Ұ౓ಉ͜͡ͱॻ͘ͷ͔ ɹɹɾϥϯσΟϯά͸SSR͕ͩɺSPA಺ͷભҠ͸JSͰinitial stateΛ࡞Δ ɹɹɾҧ͏ݴޠɺϑϨʔϜϫʔΫͰೋ౓ಉ͡ॲཧΛॻ͘ͷ͕ਏ͍… ݁ہSSRͷ೉͠͞͸”͍͔ʹinitial stateΛ༻ҙ͢Δͷ͔?” ʹ ू໿͢ΔͷͰ͸? ΞʔΩςΫνϟ
    
11.  ▪ ղܾͷํ޲ੑͱͯ͠͸… ɹɾJavaScriptʹدͤΔ (ࣗ෼ͨͪͷνʔϜͷΞϓϩʔν) ɹɹɾSSR΋JavaScriptͰॻ͚ΔΑ͏ʹ͢ΔͨΊʹNode.jsΛ࢖͏ ɹɹɾAPIαʔό͸ผ్༻ҙ͢Δ (API΋Node.jsͰOKͳΒ͹ෆཁ) ɹɾRailsʹدͤΔ ɹɹɾ@r7kamura͞Μͷ ”Ruby on Rails on React on SSR on SPA” ͕ۃ·͍ͬͯ Δ (http://r7kamura.hatenablog.com/entry/2016/10/10/173610) ɹɹɾಉ͡ΤϯυϙΠϯτ͕ॳճϦΫΤετͰ͸HTMLΛฦͯ͠ɺϖʔδભҠͷͱ͖ ʹ͸JSONΛฦ͢ ɹɹ ɹɹɾϨεϙϯεܗ͕ࣜมΘΔ͚ͩͰσʔλऔಘϩδοΫ͸ڞ௨ԽͰ͖Δ ɹɹɾRails͔Β౉͢props಺ͷύϥϝʔλͰReactίϯϙʔωϯτΛࢦఆ -> Viewς ϯϓϨʔτͷΑ͏ʹѻ͑Δ ΞʔΩςΫνϟ
    
12.  ▪ ࣮ࡍతʹJavaScriptʹدͤΔઃܭͬͯͲ͏ͳΔ? ɹɾref: erikras/react-redux-universal-hot-example ɹɹɾA starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform ɹɹɾඞཁͦ͏ͳ΋ͷ͕Ұ௨ΓೖͬͯΔ! (όʔδϣϯݹ͍͚Ͳ…) ɹɹɾαʔόαΠυͱΫϥΠΞϯταΠυͷڞ༗ͳͷͰͲͪΒ͔ͱ͍͏ͱ Isomorphic *TPNPSQIJD
    +BWB4DSJQU
13.  ▪ React + ReduxΛ׆͔͠ͳ͕ΒSSR͍ͯ͠Δ෦෼ ɹɾsrc/server.js Express͔Β200ͰϨεϙϯεฦͦ͏ͱ͍ͯ͠Δͱ͜Ζ *TPNPSQIJD
    +BWB4DSJQU
14.  ▪ React + ReduxΛ׆͔͠ͳ͕ΒSSR͍ͯ͠Δ෦෼ ɹɾsrc/helpers/Html.js ग़ྗͨ͠΋ͷΛϨεϙϯε༻HTMLͷ֎࿮ʹ͸ΊࠐΉ *TPNPSQIJD
    +BWB4DSJQU
15.  ▪ React + ReduxΛ׆͔͠ͳ͕ΒSSR͍ͯ͠Δ෦෼ ɹɾsrc/client.js ΫϥΠΞϯταΠυ͸CreateStore͢Δ࣌ʹwindow͔ΒॳظԽ *TPNPSQIJD
    +BWB4DSJQU
16.  ▪ Ұ൪ͷ伴͸ redux-async-connect ( -> redux-connect ) ɹɾIs redux-async-connect dead? #81 https://github.com/Rezonans/redux-async-connect/issues/81 ɹ ɹɾϝϯς͞Εͳ͘ͳͬͯredux-connectʹͳͬͨ ɹɾdecoratorͱͯ͠ఏڙ͞Ε͍ͯΔ ɹɾ͋ΔඇಉظAction͕׬ྃ͢Δ·ͰɺContainerͷඳըΛ஗Ԇͤͯ͘͞ΕΔ *TPNPSQIJD
    +BWB4DSJQU
17.  ▪ src/containers/App/App.js *TPNPSQIJD
    +BWB4DSJQU
18.  ▪ ͜ΕͰશͯղܾ!!! ͱ͸͍͔ͳ͍ ɹɾ࣮ࡍతʹ࣮૷ʹೖΖ͏ͱͨ͠λΠϛϯάͰߦ͖٧·ͬͨ ɹɾϚϧνContainerͷઃܭʹͨ͠৔߹ɺશͯͷContainerͷasyncConnectͷ׬ ྃΛ଴͔ͬͯΒSSR͢Δඞཁ͕͋Δ… ɹ ɹɾe.g. هࣄϖʔδͷதʹίϝϯτཝ͕͋Δ͕ɺίϝϯτཝ͸ଞͷϖʔδͰ΋ ઃஔ͢Ε͹ಈ͘Α͏ʹComponentͰ͸ͳ͘Containerʹ͍ͨ͠! ·ͩ·ͩIsomorphic΁ͷಓͷΓ͸௕͍ *TPNPSQIJD
    +BWB4DSJQU
19. ҰॹʹIsomorphicͳੈք΁ཱཱྀͪ·͠ΐ͏ 8F
    BSF
    IJSJOH