ssr seo 必須添加在asyncData，如果用到router-view轉頁用router immediate

Altough we talk about the keyname asmetaInfo variable on Vue by default, please note that the keyName is configurable and could be different in your case. E.g. Nuxt.js uses head as keyName.

If you want to avoid concatenate metadata, then give it a vmid.

If a child returns null as content value then the parent metaInfo property with the same vmid will be ignored. 這裡的content value指的是 :

the value of a key for object types as htmlAttrs
the value of [contentKeyName] or innerHTML keys for collection types as meta

就像

{
  metaInfo: {
    htmlAttrs: {
      lang: 'en',
      amp: true
    },
    bodyAttrs: {
      class: ['dark-mode', 'mobile']
    }
  }
}

或

metaInfo: {
  style: [{
    vmid: 'page-load-overlay',
    innerHTML: `
      body div.loading {
        z-index: 999;
        background-color: #0f0f0f;
        opacity: 0.9;
      }
    `,
  }]
}

If you wish to use a child property conditionally and use the parents' property as default value, make sure the child returns undefined as content value.

It is possible to use cross app vmid's with a caveat:

The value of the last updated app is used.

To keep track of which tag has been added by which Vue app, VueMeta stores an unique appId in the data-vue-meta attribute.

To optimize performance, VueMeta will only initialize for a Vue app when it finds a metaInfo property on any of the loaded components. That means if you render all your components by passing the component instance directly to the render function, Vue will only know of these components once the app gets mounted (see snippet below). And this means VueMeta is unable to find any metaInfo when it looks if its need to initialize in the beforeCreate hook and the appId will not be changed to the ssrAppId.

This will result in all the metaInfo properties of your ssr app to be rendered twice, once with ssrAppId and once with appId 1.

To prevent this, either make sure there is any metaInfo configured (on any component) when the beforeCreate hook runs. Alternative (but not recommended) you could set ssrAppId to 1 as well.

大概是說要避免渲染兩次，要在 beforeCreate (或 Created )時設定VueMeta (或是相反，不確定有機會再實作一下)

https://github.com/muwoo/vue-meta-info

SSR

如果您使用了Vue SSR 来渲染页面，那么您需要注意的是：

由于没有动态更新，所有的生命周期钩子函数中，只有 beforeCreate 和 created 会在服务器端渲染(SSR)过程中被调用。这就是说任何其他生命周期钩子函数中的代码（例如 beforeMount 或 mounted），只会在客户端执行。此外还需要注意的是，你应该避免在 beforeCreate 和 created 生命周期时产生全局副作用的代码，例如在其中使用 setInterval 设置 timer。在纯客户端(client-side only)的代码中，我们可以设置一个 timer，然后在 beforeDestroy 或 destroyed 生命周期时将其销毁。但是，由于在 SSR 期间并不会调用销毁钩子函数，所以 timer 将永远保留下来。为了避免这种情况，请将副作用代码移动到 beforeMount 或 mounted 生命周期中。

基于以上约束，我们目前可以使用静态的数据来渲染我们的metaInfo，下面给出一个使用示例：

<template>
  ...
</template>

<script>
  export default {
    metaInfo: {
      title: 'My Example App', // set a title
      meta: [{                 // set meta
        name: 'keyWords',
        content: 'My Example App'
      }]
      link: [{                 // set link
        rel: 'asstes',
        href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</script>

此时vueMetaInfo会帮我们在ssr的context中挂载出一个title变量和一个render对象。类似于这样：

context = {
  ...
  title: 'My Example App',
  render: {
    meta: function () { ... },
    link: function () { ... }
  }
}

至此，我们可以改造我们的模板：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{title}}</title>
    {{{render.meta && render.meta()}}}
    {{{render.link && render.link()}}}
  </head>
  <body>
    <!--vue-ssr-outlet-->
  </body>
</html>

这样便可以渲染出需要的数据。值得注意的是：虽然我们可以使用

<template>
  ...
</template>

<script>
  export default {
    name: 'async',
    metaInfo () {
      return {
        title: this.pageName
      }
    },
    data () {
      return {
        pageName: 'loading'
      }
    },
    mounted () {
      setTimeout(() => {
        this.pageName = 'async'
      }, 2000)
    }
  }
</script>

这种形式来定义数据，但是最终渲染出来的title 依然是 loading，因为服务端渲染除了created 和 beforeCreate并没有mounted钩子。

On the client, vue-meta batches DOM updates using requestAnimationFrame. 但這func其實不太懂，請見:https://vue-meta.nuxtjs.org/faq/performance.html

英文單詞:

resolve 解析 (verb)

recursively 遞歸地 (adv)

prerequisite 先決條件(noun)

recognised 公認的 (adj)

specify 定義 (verb)

concatenate 串聯 (verb)

far-fetched 牽強(adj)

caveat 警告 (noun)

retrieve 找回(verb)

considerations 注意事項 (noun)

repaint 刷新,重畫 (noun, verb)

quene 排隊 (noun, verb)

interoperability 互通性(norn)

verbose 冗長的(adj)

extraneous 無關的(adj)

downside 缺點 (noun)

unusable 無法使用 (adj)

unchecked 未被制止的(adj)

程式學習

文章加密

2020年8月8日星期六

vue-meta, nuxt本身就有了: metaInfo->head, vid->hid

SSR

沒有留言:

張貼留言

文章加密

2020年8月8日 星期六

vue-meta, nuxt本身就有了: metaInfo->head, vid->hid

SSR

沒有留言:

張貼留言

2020年8月8日星期六