nuxt.jsのFull Static Generationで開発

Full Static Generationとは

公式ブログ
https://nuxtjs.org/blog/going-full-static

・バージョン2.14から使える機能です。
　バージョンアップデートは
　①package.jsonのnuxtバージョンを2.14以上に設定
　②yarn.lockとnode.modulesファイルを削除
　③yarn installを実行する
　でできます。

・完全に静的なサイトを作成する為、ページ遷移時のAPI通信も発生しない（＝APIサーバが落ちても動く）

・ページ遷移が早い

さっそく設定

package.json内で下記の様に実行内容を書きます。

package.json

  "scripts": {
    "dev": "nuxt",
    "generate": "nuxt generate",
    "start": "nuxt start",
  }

nuxt.config.jsにstaticを設定

nuxt.config.js

export default {
  target: "static",
}

開発中は"dev": "nuxt"を実行

command

yarn dev

開発が完了したら"generate": "nuxt generate"を実行して静的ファイルを作成

command

yarn generate

実行すると、distフォルダが作成されます。

本来であれば別途HTTPサーバをおいてホスティングする必要がありましたが、

"start": "nuxt start"を実行することで、ローカル環境でそのまま実行して確認する事ができます。

command

yarn start

実行すると下記の様にサーバサイドでレンダリングしてくれます。

http-serverなどのライブラリなど使わなくても確認できて便利でした。