Slide 1

Slide 1 text

Nuxtでのサーバー、クライアント間 データ共有について

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

はじめてNuxtを触った時の自分の悩み nuxtServerInit , fetch , serverPrefetch , asyncData 色々あるけどクライアントだけで動かしたいコード、サ ーバー側で処理してクライアントに渡したいコードがあ る場合とかどのメソッドを使ったらいいの??

Slide 4

Slide 4 text

深みにはまる serverPrefetch うまく動かないぞ! fetch はこのバージョンでは動かないのか?? nuxtServerInit 動いてない??

Slide 5

Slide 5 text

こういうフロー図を発見

Slide 6

Slide 6 text

この際なのでNuxtのライフサイクルと データの受け渡し周りを整理して見ました

Slide 7

Slide 7 text

まずはじめに動くのが、nuxtServerInit Vuexのaction として記述する context.commit すればvuexに入りデータが永続化する!

Slide 8

Slide 8 text

nuxtServerInit ただし、アプリケーションのロード時以降はnuxt-link で画面遷移しても発火しない ページ全体に必要なStoreデータはここで取得(ログイン情報など)

Slide 9

Slide 9 text

次にmiddlewareが動く! Vuexのstore が取れるのでログイン状態に応じてのリ ダイレクト処理をしたりなど!

Slide 10

Slide 10 text

次にLayoutが動作!

Slide 11

Slide 11 text

serverPrefetch Nuxt 2.6以降から使える! layout やpage コンポーネントで利用可 サーバーサイドでのみ動作するがthis コンテキストも利用できるのが嬉しい! 個人的にはlayoutレベルで必要なデータを取得する際に利用 this.$store.dispatch でデータをvuexに送れるのが嬉しい!! Promise をreturn しないとクライアントからは更新されたVuex の結果が見れない! Vue Vue. .extend extend( ({ { serverPrefetch serverPrefetch( () ) { { return return this this. .$store $store. .dispatch dispatch( ('user/fetch' 'user/fetch', , this this. .$ $ } } } }

Slide 12

Slide 12 text

fetch Nuxt 2.8以降から使える! pageコンポーネントで利用可 this が使えない。。。 個人的にはページレベルで必要なデータを取得する際に利用 Vuex にcommit したりできるぞ! Promise をreturn しないとクライアントからは更新されたVuex の結果が見れない! Vue Vue. .extend extend( ({ { async async fetch fetch ( ({ { store store, , params params } }) ) { { const const res res = = await await axios axios. .get get( ('http://my-api/sta 'http://my-api/sta store store. .commit commit( ('setStars' 'setStars', , res res. .data data) ); ; } } } }) )

Slide 13

Slide 13 text

asyncData あらかじめサーバーサイド側でdata に格納したい値をセットできる! this が使えない。。。。 Vuex にdispatch したりはできなさそう。。。 Vue Vue. .extend extend( ({ { asyncData asyncData ( (context context) ) { { return return { { project project: : 'nuxt' 'nuxt' } } } } } }) ); ;

Slide 14

Slide 14 text

apolloモジュールを使っている場合 @nuxtjs/apollo モジュールを使えばapollo から 取得した値をthis.data に格納できる。 prefetch:true にしておけばサーバーサイドで取得できる! this に依存するコードは書けない asyncData に近いイメージ! Vue Vue. .extend extend( ({ { apollo apollo: : { { some some: : { { prefetch prefetch: : true true, , query query: : someGql someGql, , result result( ({ { data data } }) ) { { return return { { some some: : data data. .some some } }; ; } } } } } } } }) ); ;

Slide 15

Slide 15 text

まとめ nuxtServerInit , fetch , serverPrefetch , asyncData を理解して快適にサーバーからデータを受け取ろう!

Slide 16

Slide 16 text

ありがとうございました!

Slide 17

Slide 17 text

@steelydylan github twitter