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

Transcript

1. Nuxt.js が掲げる "Universal Vue.js Applications" とは何者か
5. Universal Mode SPA Mode
6. Universal Mode ← こっち SPA Mode
9. わかるようでわからない
10. でも、使ってみたら理解できた
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 するサーバーが生成される
30. サーバーはNode.js
31. サーバーの動作はカスタマイズ可能 外れすぎない範囲で使うのが良さそう