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

Transcript

1. 1.

   Nuxt.jsではじめる サʔバサイドレンダリング 鈴木孝之 2018/04/27

2. 2.

   "HFOEB ࣗݾ঺հ
   αʔόαΠυϨϯμϦϯά͕ॏཁͳཧ༝
   %&.0
   /VYUKTͱ͸

3. 3.

   0.ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹϑϦʔϥϯεΛ΍ͬͨޙʹ2017೥11݄ʹԭೄͰىۀɻ ◆झຯ

   ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ ◆εΩϧ ɾPHP, Symfony2,CakePHP3,Laravel5, ɾJavaScript, backbone.js,Angular4
4. 4.

   0.ձࣾ঺հ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ໨̍̒−̕ ◆ࣄۀ಺༰ ɾ೶ۀʹ͓͍ͯͷϑʔυϩεΛແ͘͢ ࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ΤϯδχΞͷಇ͖ํ

   ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ
5. 5.

   0.ࣗݾ঺հ ΪʔΫϋ΢εͱ͸ɺओʹΤϯδχΞ΍ϓϩάϥ ϚʔΛ৬छͱ͢Δਓ΍ɺWeb͕޷͖ͳਓͳͲ͕ ڞʹॅΉίϯηϓτܕγΣΞϋ΢εͰ͢ʂ ΤϯδχΞͳͲ͕ଟ͍͜ͱ͔Βॅຽಉ࢜Ͱϓϩ άϥϛϯάΛڭ͑߹ͬͨΓ΋͠·͢ʂ

6. 6.

   αʔόαΠυϨϯμϦϯά͕ॏཁͳཧ༝
   

7. 7.

   ॳظԽʹཁ͢Δ࣌ؒ ɾॳظԽ͸HTML΍JSʹΑͬͯߏங͞ΕͨDOM͕ ϨϯμϦϯά͞ΕΔ͜ͱ ϨϯμϦϯάʹཁ͢Δ࣌ؒ ॳظԽ׬ྃʂ

8. 8.

   Single Page Application(SPA)͸ॳظԽʹ͕͔͔࣌ؒΔ ɾJSͷϑΝΠϧαΠζ͕େ͖͍ͨΊ ɾJSͰDOMΛߏங͢ΔͨΊ ɹɾJSͷॲཧ͕׬ྃ͠ͳ͍ͱԿ΋දࣔ͞Εͳ͍

9. 9.

   ϨϯμϦϯάͷྫ ϨϯμϦϯάத͸ϖʔδ಺ͷίϯςϯπ͕දࣔ͞Εͳ͍ɻ

10. 10.

    ϨϯμϦϯάʹ͕͔͔࣌ؒΔͱɺͲ͏ͳΔ͔ʁ ɾ 3ඵҎ্͔͔Δϖʔδ͔Β͸཭୤͢Δɻ ɾ ύϑΥʔϚϯεʹෆຬΛ࣋ͬͨαΠτ͸࠶ͼར༻͠ͳ͍ɻ ɾ αΠτͷϩΠϠϦςΟʹ͓͍ͯදࣔ଎౓Λॏཁࢹɻ ɾ ̍ඵͷ஗ΕͰ16%ͷސ٬ຬ଍౓Λ௿Լͤ͞Δɻ ࢀߟ:

    https://blog.kissmetrics.com/loading-time/?wide=1
11. 11.

    SEOʹ͓͚Δ՝୊ ɾSSRͰ͋Ε͹Ϋϩʔϥ͕׬શͳHTMLΛ஌Δ͜ͱ͕Ͱ͖Δɻ·ͨɺSNSͷ OGPऔಘ͕͏·͍͔͘ͳ͍ɻ ɾGoogleͷΫϩʔϥͰ͢ΒɺΫϥΠΞϯταΠυͰมߋ͞ΕͨޙͷDOMΛ׬ શʹัଊ͢Δ͜ͱ͸Ͱ͖ͳ͍ɻ ɾ·ͨɺಉ༷ͷཧ༝ʹΑΓɺSNS౳ͰΞϓϦέʔγϣϯͷϓϨϏϡʔ෇ͰϦ ϯΫ͢ΔέʔεͰ΋ɺSSRͰ͋Ε͹׬શͳHTMLΛϓϨϏϡʔͰ͖·͢ɻ ࢀߟ: https://www.youtube.com/watch?v=JlP5rBynK3E&feature=youtu.be

12. 12.

    SPAͰ΋SEOؔ܎ແ͍ྫ Pairs ϩάΠϯޙͷը໘͕SPA ؅ཧը໘ͳͲ

13. 13.

    WWW.SITE2MAX.PRO Free PowerPoint & KeyNote Templates DEMO DEMO

14. 14.

    /VYUKTͱ͸

15. 15.

    Nuxt.jsͱ͸ Nuxt.js ͱ͸Ϣχόʔαϧͳ Vue.js Ξϓ ϦέʔγϣϯΛߏங͢ΔͨΊͷϑϨʔ ϜϫʔΫͰ͢ɻ Nuxt.js ͸ αʔόʔαΠυϨϯμϦϯά

    ͢Δ Vue.js ΞϓϦέʔγϣϯͷ։ൃΛ ΋ͬͱָ͘͢͠ΔͨΊʹඞཁͳઃఆΛɺ ͋Β͔͡Ίηοτ͍ͯ͠·͢ɻ
16. 16.

    ओͳػೳ ɾVue ϑΝΠϧͰهड़Ͱ͖Δ͜ͱ ɾίʔυΛࣗಈతʹ෼ׂ͢Δ͜ͱ ɾαʔόʔαΠυϨϯμϦϯά ɾඇಉظσʔλΛϋϯυϦϯά͢ΔύϫϑϧͳϧʔςΟϯά ɾ੩తϑΝΠϧͷ഑৴ ɾES6/ES7 ͷτϥϯεύΠϨʔγϣϯ ɾJS

    ͱ CSS ͷόϯυϧٴͼϛχϑΝΠ ɾHead ཁૉͷ؅ཧ ɾ։ൃϞʔυʹ͓͚ΔϗοτϦϩʔσΟϯά ɾSASS, LESS, Stylus ͳͲͷϓϦϓϩηοαͷαϙʔτ ɾHTTP/2 push headers ready ɾϞδϡʔϧߏ଄Ͱ֦ுͰ͖Δ͜ͱ
17. 17.

    routingͷઃఆͰ೰·ͳͯ͘ ࡁΉɻ componentͳͲͷओཁͳϩ δοΫͷ෦෼ͷ࣮૷ʹूத Ͱ͖Δ ͚ͬ͜͏ɺwebpackͷઃఆͱ ͔؅ཧʹ͕͔͔࣌ؒΓ͕ͪͩ ͕ɺͦ͜ΛলུͰ͖Δɻ PWAʹରԠ͢Δ͜ͱͰɺओʹ ࣍ͷΑ͏ͳϝϦοτ͕ੜ·Ε

    ·͢ɻ ɾΦϑϥΠϯͰ΋ӾཡՄೳ ɾϓογϡ௨஌ ɾΠϯετʔϧՄೳ pagesσΟϨΫτϦ ʹϑΝΠϧ௥Ճ͢Δ ͱࣗಈϧʔςΟϯά PWAಋೖ͕؆୯ʹͰ͖Δ 2.ϝϦοτɾಛ௃ Webpack/Babelͷઃ ఆॻ͘ඞཁͳ͠ 2 ʙϝϦοτʙ 1 3
18. 18.

    ॲཧͷྲྀΕ

19. 19.

    Πϯετʔϧํ๏

20. 20.

    ॻ͖ํ

21. 21.

    Ϗϧυͷઃఆ

22. 22.

    ॻ͖ํ

23. 23.

    ॻ͖ํ

24. 24.

    ॻ͖ํ ࣗಈͰroutingͯ͘͠ΕΔͷͰɺ componentͳͲͷओཁͳϩδοΫ ͷ෦෼ͷ࣮૷ʹूதͰ͖Δ

25. 25.

    ॻ͖ํ

26. 26.

    ·ͱΊ
    

27. 27.

    ᶃαʔόαΠυϨϯμϦϯά͸ɺSPAͷॳظԽ ࣌ͷύϑΥʔϚϯεɺSEOͱ͍ͬͨ՝୊Λղܾ ͢Δɻ ᶄNuxt.jsΛ࢖͏ͱ։ൃޮ཰্͕͕Δʂ ·ͱΊ

28. 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/