Nuxtのslugを静的ページ生成すると中身が同じになる現象を1行で解決

2020年01月21日

3分くらいで読めます

とりあえず解決法

超絶ハマってたのが突然あっさり解決してしまった、というお話。

結論から言うとnuxt.config.jsのgenerateでconcurrencyオプションを1に指定すると中身がきちんと分かれます。

concurrency: 1

こんな感じで入れてください。

export default {
    generate: {
        concurrency: 1
    }
}

これにたどり着くのに3週間かかりました。。

改めて、どんな問題が起こっていたか

問題が起こっていたのがまさにこのサイト「ブログじゃないもん」なんですが、作りはざっくりと以下の流れにしています。

ローカルでMarkdownで記事を書く
processmdでjsonに変換
それを ~/pages/post/_slug.vue で読み込む
静的ページ生成（generate）したものを本番サーバーにアップロードして公開

nuxt上のファイル構成は以下のような感じ。

/pages
    ├ index.vue
    └ /post
        └ _slug.vue
            ├ /kiji1
            │   └ index.json
            ├ /kiji2
            │   └ index.json
            └ /kiji3
                └ index.json

これを静的ページ生成（generate）すると…

/index.html
    └ /post
        ├ /kiji1
        │   └ index.html ※中身は「kiji3」
        ├ /kiji2
        │   └ index.html ※中身は「kiji3」
        └ /kiji3
            └ index.html ※中身は「kiji3」

3までの部分を localhost:3000 上で確認するには問題なく、きちんと記事URLごとにそれに応じた内容が表示されるように作りました。

しかし最後の静的ページ生成（generate）をすると、slugごとにファイルは生成されるものの、中身がすべて同じ記事になってしまう、という状態でした。

原因は何だったのか

むちゃくちゃググったのですが出てくるのは基本的なslugの使い方とか、ヘッドレスCMSとの連携の仕方ばっかりでした。

基本みんなヘッドレスCMS使ってて、ローカルで書くって人はあんまりいないんでしょうか……？

とにかく情報が全然出てこなかったのでいろいろ試しまくった中で、やっと変化があったのがダメ元で nuxt-generate-cluster のプラグインを入れてみたとき。

/index.html
    └ /post
        ├ /kiji1
        │   └ index.html ※中身は「kiji1」
        ├ /kiji2
        │   └ index.html ※中身は「kiji3」
        └ /kiji3
            └ index.html ※中身は「kiji3」

みたいな感じで、完璧ではないにしても中身に少しバラつきが出たのです。

この nuxt-generate-cluster というのはgenerateの処理を並行化するプラグイン。通常は1ラインで生成するところを、4ライン同時に動かして生成を高速化する、というものです。