[備忘録]Nuxt.jsでgenerateする場合はssr:falseにしないとレイアウトが正しく動作しない

ローカルではnuxtで動確していて、本番環境ではnuxt generateしたものを@nestjs/serve-staticで配信するようにしていたんですが、ローカルと本番で挙動に違いがあったので、調べてみました。

やりたいこと

• ログイン画面のレイアウト（layouts/no-auth.vue）
  • ヘッダはロゴのみ
• ログイン後の画面のレイアウト（layouts/default.vue）
  • ヘッダにログアウトボタン追加
  • サイドメニューを表示

layouts/default.vueで認証されてなければログイン画面にリダイレクトする処理を入れてたのですが、本番環境だとログイン画面への無限リダイレクトが発生してしまいました。

ログイン画面でlayout: 'no-auth'を指定しているにも関わらずlayouts/default.vueが呼ばれていました。

回避策

真の原因はよくわかってないですが、ssr: falseでSSRを無効にすることで発生しなくなりました。

nuxt.config.js

export default {
  target: 'static',
  ssr: false,

参考