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

Transcript

1. Nuxtでのサーバー、クライアント間 データ共有について
3. はじめてNuxtを触った時の自分の悩み nuxtServerInit , fetch , serverPrefetch , asyncData 色々あるけどクライアントだけで動かしたいコード、サ ーバー側で処理してクライアントに渡したいコードがあ る場合とかどのメソッドを使ったらいいの？？
4. 深みにはまる serverPrefetch うまく動かないぞ！ fetch はこのバージョンでは動かないのか？？ nuxtServerInit 動いてない？？
5. こういうフロー図を発見
6. この際なのでNuxtのライフサイクルと データの受け渡し周りを整理して見ました
7. まずはじめに動くのが、nuxtServerInit Vuexのaction として記述する context.commit すればvuexに入りデータが永続化する！
8. nuxtServerInit ただし、アプリケーションのロード時以降はnuxt-link で画面遷移しても発火しない ページ全体に必要なStoreデータはここで取得（ログイン情報など）
9. 次にmiddlewareが動く！ Vuexのstore が取れるのでログイン状態に応じてのリ ダイレクト処理をしたりなど！
10. 次にLayoutが動作！
11. 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. .$ $ } } } }
12. 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) ); ; } } } }) )
13. asyncData あらかじめサーバーサイド側でdata に格納したい値をセットできる! this が使えない。。。。 Vuex にdispatch したりはできなさそう。。。 Vue Vue. .extend extend( ({ { asyncData asyncData ( (context context) ) { { return return { { project project: : 'nuxt' 'nuxt' } } } } } }) ); ;
14. 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 } }; ; } } } } } } } }) ); ;
15. まとめ nuxtServerInit , fetch , serverPrefetch , asyncData を理解して快適にサーバーからデータを受け取ろう！
16. ありがとうございました！
17. @steelydylan github twitter