nuxtでOGPタグをfirestoreから取得で動的にしたい際につまったところ

3872 ワード
nuxt.js Firestore nuxt.js テキストリンク

やったこと

  • OGPタグの画像URLをfirestoreから取得して動的にした

仕様全体像

  • nuxt×firestore
  • defaultはnuxt.config.jsで指定。個別ページにcomponentのheadプロパティで上書き
  • firestoreから取得したtitleをURLに入れる
  • OGPのURLはcloudinaryのdynamicURLを使用
  • dataとasyncDataを用意し、awaitでfirestoreからtitleを取得
  • componentのheadプロパティでog:imageをset

コード

  data () {
    return {
      room_title: '',
    }
  },
  async asyncData ({ route }) {
    let doc_room_title
    /*room情報取得*/
    var roomRef = db.collection('room').doc(route.params.id)
    await roomRef.get().then(doc => {
      doc_room_title = doc.data().room_title
    })
    return {
      room_title: doc_room_title,
    }
  },
  head () {
    return {
      meta: [
        { hid: 'og:image', property: 'og:image', content: `hogehoge/image/upload/${this.room_title}/hogehoge.png` }
      ]
    }
  },

はまりどころ

SSRでtwitterにogp情報を渡す場合レンダリングタイミングが難しい

twitterが読み込めるようにSSRをしたんだがレンダリングタイミングが難しかった。

レンダリング直前のbeforeCreateでいけんだろと書いてたけど取得できず。beforeCreateでは無理だったのでasyncDataでとってきたが取得する前にレンダリングしてたのか空になっていた。そのためawaitで記述。

Python導入メカニズム-import hook
thinkphpでのデータベース読み書き分離コードの解析