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

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