Vue.js経験者ならば、asyncDataさえ覚えればNuxt.jsでSSRでSPA(シングルページアプリケーション)アプリを作れる!?

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でデータを描写する場合

Vue.jsでAPIサーバからデータを取得してブラウザに描写する場合、このような書き方をします。

created()したタイミングでAPIサーバーにリクエストを送り、返ってきたデータをdata()に代入して、DOMを描写する流れです。

クライアントサイド(ブラウザ)でcreated()が呼ばれたあとに、APIサーバーにリクエストを送り描写するため、

  • クライアントサイドの性能や通信に処理速度が依存する
  • SSR(サーバーサイドレンダリング)できない

という問題がありました。

この問題を解決するために、Nuxt.jsのasyncDataがあります。

Nuxt.jsでデータを描写する場合

Nuxt.jsのasyncDataを使って、APIサーバーからデータを取得してブラウザに描写する場合は、このように記述します。

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で共有していきますので、どうぞ遊びに来てください!

ABOUTこの記事をかいた人

新卒ノマドエンジニアとして独立し、半年で月収100万円を達成する。フリーランスのエンジニアとして活動しながら、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んでいる。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは好きなことだけ仕事にしています。