Nuxt.jsではじめる サーバサイドレンダリング

Transcript

1. Nuxt.jsではじめる サʔバサイドレンダリング 鈴木孝之 2018/04/27
2. "HFOEB ࣗݾ঺հ
   αʔόαΠυϨϯμϦϯά͕ॏཁͳཧ༝
   %&.0
   /VYUKTͱ͸
3. 0.ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹϑϦʔϥϯεΛ΍ͬͨޙʹ2017೥11݄ʹԭೄͰىۀɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ ◆εΩϧ ɾPHP, Symfony2,CakePHP3,Laravel5, ɾJavaScript, backbone.js,Angular4
4. 0.ձࣾ঺հ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ໨̍̒−̕ ◆ࣄۀ಺༰ ɾ೶ۀʹ͓͍ͯͷϑʔυϩεΛແ͘͢ ࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ
5. 0.ࣗݾ঺հ ΪʔΫϋ΢εͱ͸ɺओʹΤϯδχΞ΍ϓϩάϥ ϚʔΛ৬छͱ͢Δਓ΍ɺWeb͕޷͖ͳਓͳͲ͕ ڞʹॅΉίϯηϓτܕγΣΞϋ΢εͰ͢ʂ ΤϯδχΞͳͲ͕ଟ͍͜ͱ͔Βॅຽಉ࢜Ͱϓϩ άϥϛϯάΛڭ͑߹ͬͨΓ΋͠·͢ʂ
6. αʔόαΠυϨϯμϦϯά͕ॏཁͳཧ༝
   
7. ॳظԽʹཁ͢Δ࣌ؒ ɾॳظԽ͸HTML΍JSʹΑͬͯߏங͞ΕͨDOM͕ ϨϯμϦϯά͞ΕΔ͜ͱ ϨϯμϦϯάʹཁ͢Δ࣌ؒ ॳظԽ׬ྃʂ
8. Single Page Application(SPA)͸ॳظԽʹ͕͔͔࣌ؒΔ ɾJSͷϑΝΠϧαΠζ͕େ͖͍ͨΊ ɾJSͰDOMΛߏங͢ΔͨΊ ɹɾJSͷॲཧ͕׬ྃ͠ͳ͍ͱԿ΋දࣔ͞Εͳ͍
9. ϨϯμϦϯάͷྫ ϨϯμϦϯάத͸ϖʔδ಺ͷίϯςϯπ͕දࣔ͞Εͳ͍ɻ
10. ϨϯμϦϯάʹ͕͔͔࣌ؒΔͱɺͲ͏ͳΔ͔ʁ ɾ 3ඵҎ্͔͔Δϖʔδ͔Β͸཭୤͢Δɻ ɾ ύϑΥʔϚϯεʹෆຬΛ࣋ͬͨαΠτ͸࠶ͼར༻͠ͳ͍ɻ ɾ αΠτͷϩΠϠϦςΟʹ͓͍ͯදࣔ଎౓Λॏཁࢹɻ ɾ ̍ඵͷ஗ΕͰ16%ͷސ٬ຬ଍౓Λ௿Լͤ͞Δɻ ࢀߟ: https://blog.kissmetrics.com/loading-time/?wide=1
11. SEOʹ͓͚Δ՝୊ ɾSSRͰ͋Ε͹Ϋϩʔϥ͕׬શͳHTMLΛ஌Δ͜ͱ͕Ͱ͖Δɻ·ͨɺSNSͷ OGPऔಘ͕͏·͍͔͘ͳ͍ɻ ɾGoogleͷΫϩʔϥͰ͢ΒɺΫϥΠΞϯταΠυͰมߋ͞ΕͨޙͷDOMΛ׬ શʹัଊ͢Δ͜ͱ͸Ͱ͖ͳ͍ɻ ɾ·ͨɺಉ༷ͷཧ༝ʹΑΓɺSNS౳ͰΞϓϦέʔγϣϯͷϓϨϏϡʔ෇ͰϦ ϯΫ͢ΔέʔεͰ΋ɺSSRͰ͋Ε͹׬શͳHTMLΛϓϨϏϡʔͰ͖·͢ɻ ࢀߟ: https://www.youtube.com/watch?v=JlP5rBynK3E&feature=youtu.be
12. SPAͰ΋SEOؔ܎ແ͍ྫ Pairs ϩάΠϯޙͷը໘͕SPA ؅ཧը໘ͳͲ
13. WWW.SITE2MAX.PRO Free PowerPoint & KeyNote Templates DEMO DEMO
14. /VYUKTͱ͸
15. Nuxt.jsͱ͸ Nuxt.js ͱ͸Ϣχόʔαϧͳ Vue.js Ξϓ ϦέʔγϣϯΛߏங͢ΔͨΊͷϑϨʔ ϜϫʔΫͰ͢ɻ Nuxt.js ͸ αʔόʔαΠυϨϯμϦϯά ͢Δ Vue.js ΞϓϦέʔγϣϯͷ։ൃΛ ΋ͬͱָ͘͢͠ΔͨΊʹඞཁͳઃఆΛɺ ͋Β͔͡Ίηοτ͍ͯ͠·͢ɻ
16. ओͳػೳ ɾVue ϑΝΠϧͰهड़Ͱ͖Δ͜ͱ ɾίʔυΛࣗಈతʹ෼ׂ͢Δ͜ͱ ɾαʔόʔαΠυϨϯμϦϯά ɾඇಉظσʔλΛϋϯυϦϯά͢ΔύϫϑϧͳϧʔςΟϯά ɾ੩తϑΝΠϧͷ഑৴ ɾES6/ES7 ͷτϥϯεύΠϨʔγϣϯ ɾJS ͱ CSS ͷόϯυϧٴͼϛχϑΝΠ ɾHead ཁૉͷ؅ཧ ɾ։ൃϞʔυʹ͓͚ΔϗοτϦϩʔσΟϯά ɾSASS, LESS, Stylus ͳͲͷϓϦϓϩηοαͷαϙʔτ ɾHTTP/2 push headers ready ɾϞδϡʔϧߏ଄Ͱ֦ுͰ͖Δ͜ͱ
17. routingͷઃఆͰ೰·ͳͯ͘ ࡁΉɻ componentͳͲͷओཁͳϩ δοΫͷ෦෼ͷ࣮૷ʹूத Ͱ͖Δ ͚ͬ͜͏ɺwebpackͷઃఆͱ ͔؅ཧʹ͕͔͔࣌ؒΓ͕ͪͩ ͕ɺͦ͜ΛলུͰ͖Δɻ PWAʹରԠ͢Δ͜ͱͰɺओʹ ࣍ͷΑ͏ͳϝϦοτ͕ੜ·Ε ·͢ɻ ɾΦϑϥΠϯͰ΋ӾཡՄೳ ɾϓογϡ௨஌ ɾΠϯετʔϧՄೳ pagesσΟϨΫτϦ ʹϑΝΠϧ௥Ճ͢Δ ͱࣗಈϧʔςΟϯά PWAಋೖ͕؆୯ʹͰ͖Δ 2.ϝϦοτɾಛ௃ Webpack/Babelͷઃ ఆॻ͘ඞཁͳ͠ 2 ʙϝϦοτʙ 1 3
18. ॲཧͷྲྀΕ
19. Πϯετʔϧํ๏
20. ॻ͖ํ
21. Ϗϧυͷઃఆ
22. ॻ͖ํ
23. ॻ͖ํ
24. ॻ͖ํ ࣗಈͰroutingͯ͘͠ΕΔͷͰɺ componentͳͲͷओཁͳϩδοΫ ͷ෦෼ͷ࣮૷ʹूதͰ͖Δ
25. ॻ͖ํ
26. ·ͱΊ
    
27. ᶃαʔόαΠυϨϯμϦϯά͸ɺSPAͷॳظԽ ࣌ͷύϑΥʔϚϯεɺSEOͱ͍ͬͨ՝୊Λղܾ ͢Δɻ ᶄNuxt.jsΛ࢖͏ͱ։ൃޮ཰্͕͕Δʂ ·ͱΊ
28. ࢀߟ ɾhttps://qiita.com/massa142/items/7de17b214cefb5b9a1d6 ɾhttps://inside.dmm.com/entry/2018/04/10/nuxt-firebase ɾhttps://www.webprofessional.jp/nuxt-js-universal-vue-js/