更多的服务器端负载。在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源，因此如果你预料在高流量环境(high traffic)下使用，请准备相应的服务器负载，并明智地采用缓存策略。
二、nuxt.js介绍
1. nuxt.js是什么？
Nuxt.js 是vue官方推荐的一个基于 Vue.js的做Vue SSR的通用应用框架（开箱即用），集成了Vue，Vue-Router，Vuex，Vue-Meta等组件/框架，内置了webpack用于自动化构建，使我们可以更快速地搭建一个具有服务端渲染能力的应用。2. nuxt.js的优势？
作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。Nuxt.js 有以下比较明显的特性
支持各种样式预编译器SASS，LESS等等
本地开发支持热加载
HTML头部标签管理（依赖vue-meta实现）
自动代码分层
强大的路由功能，支持异步数据（路由无需额外配置）
内置 webpack 配置，无需额外配置
3. nuxt.js的使用
npm create nuxt-app <project-name>
4. nuxt.js目录结构
（layouts、pages、static、store、nuxt.config.js、package.json）是Nuxt保留的，不可以更改
5. nuxt.js渲染流程
Incoming Request指的是浏览器发出一个请求，服务端接收请求后
要检查当前有没有nuxtServerInit这个配置项，如果有的话就先执行这个函数。具体的作用和使用可参考官方文档nuxtserverinit-方法
middleware中间件，中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。也就是可以在 匹配布局（layout 组件）前执行某种操作，也可以在解析完 layout 之后，解析 page 组件前 执行某种操作。可以理解为是路由器的拦截器的作用
验证：validate()，可以配合高级动态路由去做验证。如果校验不通过，Nuxt.js 将自动加载显示 404 错误页面或 500 错误页面，或者进行重定向。
获取数据，asyncData方法获取数据并返回给当前组件，fetch方法修改vuex的store
render：最后进行渲染。将渲染后的页面返回给浏览器，用户在页面进行操作，如果再次请求新的页面，此时只会回到生命周期中的 middlerware 中，而非 nuxtServerInit。
nuxt-link，如果是发起一个新的路由，那么这个时候要从头开始循环
我们把服务器端创建的 .vue 文件全部理解成组件，在服务器端环境（node）通过 beforeCreate 和 created 这俩个生命周期节点后服务器端 vue 组件生命周期结束。返回页面给浏览器，在客户端环境（v8）中这个 vue 组件实例创建后会在客户端再次拥有生命周期，此时生命周期中有 mounted 等钩子函数。
需要特别注意的是 nuxt 中没有 mounted 钩子函数也没有组件实例，只有 beforeCreate/created 钩子与 context 对象。beforeCreated()和created()这两个生命周期函数是同时运行在服务端&&客户端，vue的其他钩子则运行在客户端，所以beforeCreated()和created()不存在window对象
三、nuxt.js渲染过程部分详解
1、nuxtServerInit
举例：打开网页要立即显示的内容
// SSR方式： // 1、nuxtServerInit 方法 actions: { async nuxtServerInit({commit},{req,app}) { let {data: {province, city}} = await axios.get('/aa/bb') commit('home/setPosition',{province: '', city: ''}) } } // 2、middleware 属性 middleware: async (ctx) => { let {data: {province, city}} = await axios.get('/aa/bb') } // NO-SSR vue 组件 mounted 函数发送请求
2、异步数据 asyncData
asyncData方法会在组件（限于页面组件）每次加载渲染之前，即在服务端或路由更新之前被调用。在 asyncData() 中可以处理请求得来的数据，通过 return 将处理后的数据返回给当前 vue 组件的 data 。再次强调这里不能使用 this ，因为没有组件实例，asyncData() 默认的参数是 ctx 即 content 对象。该方法用来获取数据，在服务器端把异步获取到的数据扔给浏览器，那是如何抛给浏览器的呢？
通过下发一个`script`标签，然后在`window`上挂了一个对象这个对象，第一个是告诉你用的是哪个模板，第二个给你的是数据
3、布局
Nuxt.js布局方式如下图所示：
