現在Nuxtで絶賛ブログ移行構築中です。
あらかたできたかなってところで、本番サーバを用意して
実際に稼働するかテストしてみることにしました。
普段の開発の様子
普段はMacで開発しています。
npm run devで簡易サーバー(loclhost:3000)を建て挙動や見た目の構築をしています。
本番サーバーについて
これまで、当Wordpressブログはラズパイで構築したものです。
処理能力に不安を感じ、せっかくなので、その他のサーバーを構築しようと思い立ったのです。
Nuxtの公式ドキュメントにデプロイのことも書いてあるので、設定はほぼそのままです。
本番サーバーに開発中のプロジェクトをコピーし、
npm install → npm run build → npm run startで稼働させてました。
サーバ上でlocalhost:3000で確認。
おー。ちゃんと表示されている。
ところが画面遷移できない。
個別の記事のリンクをクリックして
そのページが出ると思った。しかし
TypeError: Cannot read properties of undefined (reading 'get')
んーなんかエラー。
試しにリロード。あっ出た。
この時は開発環境と本番環境の差が起きていると思っていた。
本来、開発環境と本番環境は揃えるものだが、今回は色々と検証のため
あえて異なる環境でやっています。
開発環境でstartしたときも同じ症状
もうサーバのせいではない。
buildがおかしいのだ。しかしエラーが出るわけではない。
結論:<nuxt-link>をやめた
参考記事:https://medium.com/veltra-engineering/ssr-behavior-of-nuxt-js-6d95f20afff0
今回、SSR(サーバーサイドレンダリング)を採用している。
<nuxt-link>はクライアントサイドでの遷移が行われようだ。
メソッドとしてはasyncDataをつかっている。
なので遷移先を直接呼び出したりリロードしたりしたときに
正しく表示されるのはこのためだった。
結局のところ、<nuxt-link>を使っていたところを<a>タグに書き換えたところ
正しく表示されたのであった。