Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxt.jsが掲げる"Universal Vue.js Applications"とは何者か

Nuxt.jsが掲げる"Universal Vue.js Applications"とは何者か

8889da6a67db3667b0694d993c9a962c?s=128

Yosuke Ishikawa

October 04, 2017
Tweet

Transcript

  1. Nuxt.js が掲げる "Universal Vue.js Applications" とは何者か

  2. None
  3. None
  4. None
  5. Universal Mode SPA Mode

  6. Universal Mode ← こっち SPA Mode

  7. None
  8. None
  9. わかるようでわからない

  10. でも、使ってみたら理解できた

  11. None
  12. None
  13. None
  14. デベロッパーは1 つの Nuxt.js アプリ( ≒ Vue.js アプリ) を 開発するが...

  15. SSR するサーバーも生成される

  16. "Universal Vue.js Applications"

  17. そういう感じか~

  18. Vue.js のアプリと 生成されるサーバーの関係は?

  19. 例 ディレクトリ構造 → ルーティングに反映 asyncData() → サーバーサイドで実行

  20. ルーティング

  21. pages ├── index.vue └── items ├── _id.vue ├── create │

    └── index.vue └── index.vue Nuxt.js アプリのディレクトリ構造
  22. export function createRouter () { return new Router({ mode: 'history',

    base: '/', (中略) routes: [ {path: "/", component: _d26d9516, name: " {path: "/items", component: _8ac95cea, nam {path: "/items/create", component: _4bfc3 {path: "/items/:id", component: _07563ab3 ] }) } 生成されたサーバーのルーティング
  23. asyncData()

  24. asyncData() 最初に取得するデータをSSR

  25. ... <script> export default { async asyncData ({ app })

    { const res = await app.axios.$get('/api/item return { items: res.items, nextCursor: res.nextCursor, } } } </script> Nuxt.js アプリの.vue ファイル
  26. let asyncDatas = await Promise.all(Components.m let promises = [] if

    (Component.options.asyncData && typeof Com let promise = promisify(Component.options.a (中略) promises.push(promise) } (中略) return Promise.all(promises) })) context.nuxt.data = asyncDatas.map(r => r[0] || で実行してdata にセット
  27. 要するに

  28. Vue.js アプリを書いてたら SSR するサーバーが生成される

  29. None
  30. サーバーはNode.js

  31. サーバーの動作はカスタマイズ可能 外れすぎない範囲で使うのが良さそう