Nuxt.jsの概要

Nuxt.jsについて概要を調査しました。

その前に、SSRとは？

サーバー側でJavaScriptを使って、HTMLを生成する。
そのため、CSRと比べて、ユーザー側でHTMLを生成する待ち時間がなくなる。

またSEOの観点から、SPAの場合、
JSで動的に変えた箇所をGoogleのクローラーが正しく評価できない。
SSRでは、クローラーが解釈する前に生成しているので、その問題を解決できる。

デメリット：開発コストが高い、CPU処理能力が必要

Nuxt.jsとは？

Vue.js
VueRouter
Vuex
VueServerRenderer
VueMeta
を一つのパッケージとして提供しているフレームワーク。

これによって、
通常webpackなどの細かい設定が必要な開発環境の構築を簡略化できたり、
直感的なディレクトリ構成、
SPA・SSR・静的化をサポートしている。

また、クライアントサイドとサーバーサイド間の開発を手助けするたくさんの機能を備えている。
例えば、
非同期でのデータのやり取りや、
ミドルウェアとしての利用、
レイアウト機能
などがある。

Nuxtのビルドの選択肢は３つある。

SPA・SSR・静的化の中から、好きなものを選んで開発できる。

• SSR モード（初期設定済み、nuxt startでSSRできる）
  メリットは上記に記載

• SPA モード（nuxt --spa）
  サーバーサイドレンダリングを使いたくない、
  あるいはアプリケーションを静的にホスティングする必要があるときに使用。

• 静的出力（nuxt generate 静的ファイルのホスティングに利用）
  Node.jsを使用せず、静的サイトとして出力できる。
  更新のたびに再生成が必要。
  ※生成時にはサーバーサイドでレンダリングすることになるので、SSRを考慮した実装が必要

Nuxt.jsの基本ルール

ディレクトリ構成

参考：https://luftgarden.work/tut-nuxt-dog-part1/

ルーティングの仕組み

→　pagesディレクトリの構成によってvue routerを自動生成することで実現
https://ja.nuxtjs.org/guide/routing/

Nuxt.jsでの非同期の仕組み

Vue.jsライフサイクルに入る前に、事前処理をページ単位で行うことができます。

ページ単位（pageコンポーネント）で使用できるキー

• headメソッド
• HTML の head タグを設定
• asyncDataメソッド　
• https://ja.nuxtjs.org/guide/async-data/
• コンポーネントにデータをセットする前に、非同期処理を行う
• fetchメソッド　
• https://ja.nuxtjs.org/api/pages-fetch/
• ページがレンダリングされる前に、データをストアに入れるために使われます。

asyncData？　fetch？

asyncDataとfetchの違い

• asyncDataは、取得したデータをページコンポーネント内で使用する場合に使うメソッド。
• fetchは取得したデータをvuexストアに入れる場合に使うメソッド。

具体的には、ページ読み込み時にstoreのdispatchを呼び出して、
vuexにデータをセットする場合にはfetchメソッドを使うべきだということです。

それに対して、ページ読み込み時に取得したデータを、
そのままそのページのプロパティとして使うような場合はasyncDataを使うべきです。

Pageコンポーネント　例）pages/pref.vue

<template>
    <section class="container">
        <h2>都道府県</h2>
        <div class=“red”>{{ pref }}</div>
    </section>
</template>

<script>
import axios from 'axios'

export default {
    // asyncDataメソッド
    asyncData ({ query }) {
        // コンポーネントをロードする前に毎回呼び出されます
        return axios.get(`http://vue.localhost/pref.php?id=${query.id}`)
        .then((res) => {
            return { 
                pref: res.data.prefecture 
            }
        })
    },
    // fetchメソッド
    fetch () {
        // `fetch` メソッドはページの描画前にストアを満たすために使用されます
    },
    // headメソッド
    head () {
        return {
            title: 'Hello World!',
            meta: [
                { hid: 'description', name: 'description', content: 'My custom description' }
            ]
        }    // このページ向けにメタタグを設定します
        // 共通設定はnuxt.configに記載
    },
}
</script>
<style scoped>
.red {
	color: red;
}
</style>

参考記事

Nuxt概要
https://techblog.scouter.co.jp/entry/2017/11/13/120000

SPA、SSR、静的化の比較
https://qiita.com/noplan1989/items/f42e2f03663b00b5886d

asyncData、fetchについて
https://ja.nuxtjs.org/guide/views
https://webxreal.com/js_nuxt-axios-asyncdata/
https://zen-web.net/blog/nuxtjs-asyncdata-fetch/

Vue.jsを使ったSSR比較　プリレンダリング含む　
https://qiita.com/r548/items/cc3600287f635ecdf9f8

その他調査したいこと

・render使い方
・PC、スマホ判別方法
・適したバージョン
nodeバージョン
npmバージョン
vueバージョン
・ミドルウェア周り
・GA設定
・Nuxtに適したネットワーク構成
・インストール時のフレームワーク比較
・開発、本番環境の切り替え方法