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

More Decks by Yosuke Ishikawa

Other Decks in Programming

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. サーバーの動作はカスタマイズ可能 外れすぎない範囲で使うのが良さそう