Nuxt.jsをアップデートしてFull Static Generationを試す

Nuxt.jsをアップデートしてFull Static Generationを試す

Tips
2020.08.21

先日Nuxt.jsにFull Static Generationという機能が実装されました。

Nuxt.jsはもともと静的サイトを生成できたのですが、ページ遷移時にはAPIリクエストが発生してしまう仕組みになっており、遷移のスピードが少し遅かったり、仮にAPIサーバーが障害で落ちてしまった場合にエラーになってしまったりなどの問題などがありました。

Full Static Generationはそんな問題を解消し、APIリクエストが発生しない完全な静的サイトを生成できるようになった機能です。

さっそく当サイトでも導入してみましたので、そのアップデート作業の手順を書いていきたいと思います。

1. Nuxt.jsをアップデートする

まず公式サイトの手順に従ってNuxtをアップデートしました。

アップグレード – NuxtJS

  1. package.jsonのnuxtのバージョンを2.14に更新
  2. yarn.lock、node_modulesを削除
  3. yarn コマンドを実行

2. nuxt.config.jsを修正

nuxt.config.jsに「target: static」の記述を追記しました。

export default {
	mode: 'universal',
	target: 'static',
}

※また旧generateでは動的なルーティングを自分で設定する必要がありましたが、Full Static Generationではその設定が不要になったそうです。nuxt.config内のgenerate設定を消しても問題ありませんでした。

3. あとはnuxt generateするだけ

バージョン2.13では「nuxt build && nuxt export」というコマンドを実行しなくてはならなかったのですが、2.14以降は「nuxt generate」に統一されたとのこと。

なので普通に

yarn generate

と実行すればFull Staticなサイトが生成されると思います。

さっそく当サイトでも試してみたのですが、ページ遷移のスピードが段違いに早くなりました。めちゃくちゃ良い感じです！

静的サイトを運用している方は是非検討してみてください。
それでは。

平山 友之
記事を書いた人
平山 友之
@Tom106_
山梨県在住。フリーランスのフロントエンドエンジニアです。
記事一覧