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

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

Nuxt v2.13 is out ✨

▵ Full Static Generation
▵ Runtime Config
▵ Components Discovery
▵ Nuxt Telemetry
▵ .env support
▵ And more 👀

Read more on https://t.co/ukNMnI0UMN

Thread 👇 pic.twitter.com/7UhPPf4ynU

— Nuxt.js (@nuxt_js) June 18, 2020

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なサイトが生成されると思います。

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

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