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

02886e95c50822b9aa2552da1e518491?s=47 Takayuki
April 28, 2018

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

02886e95c50822b9aa2552da1e518491?s=128

Takayuki

April 28, 2018
Tweet

Transcript

  1. 15.

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

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

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

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

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

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