Vue.jsベースのjavascriptフレームワークであるNuxt.js。Vueベースのフレームワークなだけあり、Vue.jsでSPA(シングルページアプリケーション)を制作したことがあるフロントエンドエンジニアならば学習コストをほとんどかけずにNuxtでWebアプリが作れるようになります。
唯一Vue.jsと大きく異なる部分といえば、Nuxt.jsの特徴であり、一番のメリットであるSSR(サーバーサイドレンダリング)です。
ただ、SSRの難しい処理はNuxt.jsの方でラッピングしてくれているので、私達はNuxt.jsの記法を覚えるだけで、SSR対応のSPAが制作できます。
本日は、SSRでSPAを作るために、Nuxt.js特有のasyncDataを紹介します。
※Vue.jsが使える人は、asyncDataさえ覚えてしまえば、すぐにNuxtで最低限のSSR対応SPAを作成できるようになります！
Vue.jsでデータを描写する場合
|
1 2 3 4 5 6 7 8 9 10 11 |
data() { return { posts: [] } }, created() { axios.get(エンドポイント) .then(res => { this.posts = res; }); } |
created()したタイミングでAPIサーバーにリクエストを送り、返ってきたデータをdata()に代入して、DOMを描写する流れです。
クライアントサイド(ブラウザ)でcreated()が呼ばれたあとに、APIサーバーにリクエストを送り描写するため、
- クライアントサイドの性能や通信に処理速度が依存する
- SSR(サーバーサイドレンダリング)できない
という問題がありました。
この問題を解決するために、Nuxt.jsのasyncDataがあります。
Nuxt.jsでデータを描写する場合
|
1 2 3 4 5 6 7 8 9 |
asyncData(context) { return axios.get(エンドポイント) .then(res => { return { posts: res } }) .catch(e => context.error(e)); } |
asyncDataはcreatedのようにブラウザで実行されるのではなく、サーバーサイドで実行されます。
そのため、サーバーサイドでAPIサーバーからデータを取得してデータを保持、そのデータを使ってDOMを生成した状態でクライアントに送られます。
サーバーサイドでレンダリングをすることで
- 初期表示が早くなる(パワーのあるサーバーサイドで描写するため)
- SEOやSNSマーケティングに有利(OGPタグ等)
というメリットがあります。
asyncDataの特徴
Vue.jsのcreatedとNuxt.jsのasyncDataの大きな違いは実行される場所。
その差によって、
- console.logのlogは、Nuxtの場合、サーバー側のログにでる
- Nuxt.jsの場合、thisが使えない(contextを使う)
の2点に注意しなければなりません。
Vue.js経験者にとってNuxt.jsは学習コストが低い
ルーティングの方法等、細々とVue.jsとの違いはありましたが、asyncDataさえ覚えてしまえば、Vue.js経験者ならばNuxt.jsで簡単にSSR対応のSPAが作れる印象でした
これからもNuxt.jsの勉強を通して得た知見をBlogで共有していきますので、どうぞ遊びに来てください！
