nuxt 服务端渲染数据

香菊网 发表于: 2019-06-18 分类: ssr  前端front  H5部分  

在所有vue的生命周期钩子函数中,beforeCreate 和 created 会在服务端渲染的时候被调用,其它生命周期会在客户端执行。

所以我们在 beforeCreate 和 created 这2个生命周期内不能访问this,也不能访问window,更不能访问组件实例等。

服务端渲染,顾名思义,项目运行在服务端 当客户端请求的时候就已经是服务端渲染好了,方便seo。

axios:

我们发送http请求的库推荐使用axios。又因为axios不仅会用在客户端发送http请求,还会用在服务端发送http请求,所以在给axios设置拦截器的时候需要小心使用和window或者dom相关的方法。

缓存:

我们一般给node server使用 micro-caching 缓存策略:让 node server 把动态内容储存1秒,也就是说无论这一秒有多少请求,node server 只会生成一次动态内容。这个是通过LRU库来实现的。另外还有组件级别的缓存,

nuxt 进行服务端渲染

利用nuxt的生命周期中的 异步数据层 asyncData 和 fetch 都是服务层的 render

  ...
  <li v-for="(item,idx) in list" :key="idx">{{item}}</li>
  ...

...
export default {
  layout: 'search',
  data() {
    return {
      list: []
    }
  },
  async asyncData(){
    let { status, data: {list}} = await axios.get('http://localhost:3000/city/list')
    if(status === 200){
        return {
            list
        }
    }
  }
}

然后右键查看源码就可以看到渲染了 

标签: ssr前端frontH5部分
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮