SSR，CSR 与nuxt

一、SSR服务器端渲染

Server Side Render：页面上的内容是通过服务器端渲染生成的，浏览器直接显示服务器端返回的html。

Vue.js是构建客服端应用程序的框架。默认情况下，可以在浏览器中输出Vue组件，进行生成DOM和BOM。也可以将同一个组件渲染为服务器端的HML字符串，将他们直接发送到浏览器，最后将这些静态标记“激活”为客户端上完全可交互的应用程序。

服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。

二、CSR浏览器端渲染

页面上的内容是由加载的JS文件渲染出来的，js文件运行在浏览器上面，服务端只返回一个html模版。

三、SSR的优缺点

优点：

　　1. 更好的SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

　　2. 更快的内容到达时间，利于首屏渲染。

缺点：

　　1. 开发条件受限。浏览器特定的代码，只能在某些生命周期钩子函数中使用，一些外部扩展库可能需要特殊处理，才能在服务器渲染应用程序中运行。

　　2. 涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序(SPA)不同，服务器渲染应用程序，需要处于Node.js server运行环境。

　　3. 更多的服务器端负载。在Node.js中渲染完整的应用程序，显然会比仅提供静态文件的server更加大量占有CPU资源，因此如果在高流量环境下使用，应准备相应的服务器负载，且采用缓存战略。

四、使用

1. npm i express vue vue-server-renderer --save

2. 创建服务

　　const express = require('express')

　　const server = express()

3. 引入转换为app字符串的方法

　　const renderer = require('vue-server-renderer').createRenderer()

4. 创建app实例

　　const Vue = require('vue')

　　const app = new Vue({

　　　　data: {},

　　　　templae: ``

　　})

2. 服务端渲染

　　server.get('/index', (req, res) => {

　　　　renderer.renderToString(app, (err, html) => {

　　　　　　if(err) {

　　　　　　　　throw err;

　　　　　　}

　　　　　　res.send(html);

　　　　})

　　}

　　server.listen(2000, () => {

　　　　console.log('2000端口已经启动');

　　})

五、nuxt

1. npx create-nuxt-app demo

2. cd demo

3. npm run dev