nuxtJs 服务端渲染

香菊网 发表于: 2019-04-19 分类: ssr  服务器  前端front  seo优化  

一、为什么要SSR

   为什么要SSR,而不用csr , 为了体验,还有SEO。且,我们还需要在 SSR 的基础上实现 SPA,即:首屏渲染。既然要考虑seo的优化 对于前端的框架来说, 比较流行的就是nxutJs了 ,他可以把数据放在服务端进行渲染 然后 生成页面之后再返回到客户端。

二、生命周期

   众所周知,Vue的生命周期全都跑在客户端(浏览器),而Nuxt的生命周期有些在服务端(Node),客户端,甚至两边都在:

<script>
export default {
  asyncData() {
    console.log(window) // 服务端
  },
  fetch() {
    console.log(window) // 服务端
  },
  created () {
    console.log(window) // 客户端 undefined
  },
  mounted () {
    console.log(window) // 客户端 Window { …}
  }
}
</script>

三、nuxt.config 中配置  ssr

   对于ui组件最好的应该就是 elements-UI 他即支持客户端 同时又支持服务端

  plugins: [
    { src: '~/plugins/element-ui', ssr: true },
    { src: '~/plugins/common', ssr: false },
  ],

四、局部页面 配置 title meta

  head () {
    let keywords = []
    this.tags && this.tags.forEach(item => keywords.push(item.name))
    return {
      title: `${this.article.title.rendered}`,
      meta: [
        { hid: 'keywords', name: 'keywords', content: keywords.join(',') },
        { hid: 'description', name: 'description', content: this.article.articleInfor.summary }
      ],
      style: [
        { cssText: this.$store.state.info.detailsCss, type: 'text/css' }
      ]
    }
  },
标签: ssr服务器前端frontseo优化
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮