Nuxtで作ったサイトが表示されない

Question

前提・実現したいこと

Railsで記事を作成して、その情報をNuxtで表示させるサイトを作っています。

発生している問題・エラーメッセージ

ローカル環境では表示されますが、本番環境になるとAPIの読み込みがされず、ブラウザにAPIの情報が表示されません。

 TypeError: Cannot read property 'title' of undefined```

該当のソースコード

<div class="contents-header">
                <h1>{{posts.title}}</h1>
      </div>

    export default { 

head(){
            return{
                title: this.posts.title,
            meta:[
             { hid: 'title', name: 'title', content: this.posts.title }
}

async asyncData({app,params,error}) {
                const {id} = params;
                const response  = await axios.get(`https://hogehoge.com/api/v1/posts/${id}`)
                .catch(err=> {
                    error({
                        statusCode: err.response.status,
                        message: err.response.data.message,
                        });
                        return err.response;
                     });
                const posts = JSON.parse(response.data)
                return {posts};
        },
}

試したこと

APIの呼び出しをmounted内に書いたら表示はされましたが、代わりにOGPが表示されなくなりました...
拙い説明ですいません。どうかよろしくお願いします。

Answer 1

Nuxtを静的サイトジェネレーターとして運用していませんか？
asyncDataはサーバーサイドで動作するように作られているメソッドですので、ローカルサーバー上の表示で問題はなくても静的生成した時点でほとんど動作しなくなりますので動的なメタ設定なども難しいでしょう。

静的のまま運用するのであればファイル生成時にAPIから全情報をとってデータ生成するのがベターです。
参考：【コードある】Nuxt + WordPress で netlify 運用が爆速すぎて神だった

Comments

[Piesuke]

なるほど...静的のまま運用しておりました。
動的に運用したいとなったら、asyncdataを他のメソッドに変更すればよろしいでしょうか？

[nt4c]

動的（サーバーサイドレンダリング）な場合はasyncDataのままで良いと思います