Vue.jsでサーバサイドレンダリング(SSR)ができるNuxt.jsを使ってみます。
今回は、まずはNuxt.jsについて調べ、「Hello World」を出してみます。
Nuxt.jsとは
Nuxt.jsとは、Vue.jsでサーバサイドレンダリングを実現するためのフレームワークになります。
Vue.jsに限らずですが、SPAの問題点として
- OGP対応(SNSなどへのシェア時の画像や説明を表示させる仕組み)
- 初期表示速度が遅い
の2点があげられます。
サーバ側でレンダリングを済ませた状態でクライアントへ返答することでそれらを解決することができます。
サーバサイドレンダリングの問題点としては、
- サーバのCPUの負荷が高くなる
- 開発コストがかかる
などがありますが、簡単にできるのであればやっておいてもいいかなと思うので、とりあえずやってみます。
Nuxt.jsを使ってみる
Vue CLIのインストール
すでに入ってある場合は必要ありませんが、入っていない場合はいれます。
※入れたくない場合は、Zipでテンプレートをダウンロードも可能です。
以下のコマンドを叩いてVue CLIをインストールします。
npm install -g @vue/cli @vue/cli-init
Nuxt.jsのテンプレートを取得
Nuxt.jsのテンプレートをVue CLIで取得します。
以下のコマンドを入力します。
vue init nuxt-community/starter-template <project-name>
今回は、「nuxt-test」という名前でプロジェクトを作成していきます。
Nuxt.jsを動かす
テンプレート取得時に表示された通りに、「フォルダに移動」→「npm install」→「 npm run dev」していきます。
動作確認
「http://localhost:3000」へアクセスしてページが表示されるか確認します。
とくに問題なく表示できました。
取得したテンプレートのフォルダにはREADMEが入っているのでそこに何をおけばいいのか明確に書かれていてわかりやすくなってます。