Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Universal Mode SPA Mode

Slide 6

Slide 6 text

Universal Mode ← こっち SPA Mode

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

わかるようでわからない

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

"Universal Vue.js Applications"

Slide 17

Slide 17 text

そういう感じか～

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

ルーティング

Slide 21

Slide 21 text

pages ├── index.vue └── items ├── _id.vue ├── create │ └── index.vue └── index.vue Nuxt.js アプリのディレクトリ構造

Slide 22

Slide 22 text

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 ] }) } 生成されたサーバーのルーティング

Slide 23

Slide 23 text

asyncData()

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

... export default { async asyncData ({ app }) { const res = await app.axios.$get('/api/item return { items: res.items, nextCursor: res.nextCursor, } } } Nuxt.js アプリの.vue ファイル

Slide 26

Slide 26 text

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 にセット

Slide 27

Slide 27 text

要するに

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

サーバーはNode.js

Slide 31

Slide 31 text

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