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

by Takayuki

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

0.ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹϑϦʔϥϯεΛ΍ͬͨޙʹ2017೥11݄ʹԭೄͰىۀɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ ◆εΩϧ ɾPHP, Symfony2,CakePHP3,Laravel5, ɾJavaScript, backbone.js,Angular4

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

/VYUKTͱ͸

Slide 15

Slide 15 text

Nuxt.jsͱ͸ Nuxt.js ͱ͸Ϣχόʔαϧͳ Vue.js Ξϓ ϦέʔγϣϯΛߏங͢ΔͨΊͷϑϨʔ ϜϫʔΫͰ͢ɻ Nuxt.js ͸ αʔόʔαΠυϨϯμϦϯά ͢Δ Vue.js ΞϓϦέʔγϣϯͷ։ൃΛ ΋ͬͱָ͘͢͠ΔͨΊʹඞཁͳઃఆΛɺ ͋Β͔͡Ίηοτ͍ͯ͠·͢ɻ

Slide 16

Slide 16 text

ओͳػೳ ɾVue ϑΝΠϧͰهड़Ͱ͖Δ͜ͱ ɾίʔυΛࣗಈతʹ෼ׂ͢Δ͜ͱ ɾαʔόʔαΠυϨϯμϦϯά ɾඇಉظσʔλΛϋϯυϦϯά͢ΔύϫϑϧͳϧʔςΟϯά ɾ੩తϑΝΠϧͷ഑৴ ɾES6/ES7 ͷτϥϯεύΠϨʔγϣϯ ɾJS ͱ CSS ͷόϯυϧٴͼϛχϑΝΠ ɾHead ཁૉͷ؅ཧ ɾ։ൃϞʔυʹ͓͚ΔϗοτϦϩʔσΟϯά ɾSASS, LESS, Stylus ͳͲͷϓϦϓϩηοαͷαϙʔτ ɾHTTP/2 push headers ready ɾϞδϡʔϧߏ଄Ͱ֦ுͰ͖Δ͜ͱ

Slide 17

Slide 17 text

routingͷઃఆͰ೰·ͳͯ͘ ࡁΉɻ componentͳͲͷओཁͳϩ δοΫͷ෦෼ͷ࣮૷ʹूத Ͱ͖Δ ͚ͬ͜͏ɺwebpackͷઃఆͱ ͔؅ཧʹ͕͔͔࣌ؒΓ͕ͪͩ ͕ɺͦ͜ΛলུͰ͖Δɻ PWAʹରԠ͢Δ͜ͱͰɺओʹ ࣍ͷΑ͏ͳϝϦοτ͕ੜ·Ε ·͢ɻ ɾΦϑϥΠϯͰ΋ӾཡՄೳ ɾϓογϡ௨஌ ɾΠϯετʔϧՄೳ pagesσΟϨΫτϦ ʹϑΝΠϧ௥Ճ͢Δ ͱࣗಈϧʔςΟϯά PWAಋೖ͕؆୯ʹͰ͖Δ 2.ϝϦοτɾಛ௃ Webpack/Babelͷઃ ఆॻ͘ඞཁͳ͠ 2 ʙϝϦοτʙ 1 3

Slide 18

Slide 18 text

ॲཧͷྲྀΕ

Slide 19

Slide 19 text

Πϯετʔϧํ๏

Slide 20

Slide 20 text

ॻ͖ํ

Slide 21

Slide 21 text

Ϗϧυͷઃఆ

Slide 22

Slide 22 text

ॻ͖ํ

Slide 23

Slide 23 text

ॻ͖ํ

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

ॻ͖ํ

Slide 26

Slide 26 text

·ͱΊ

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

ࢀߟ ɾ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/