最近简单的研究了一下SSR，对SSR已经有了一个简单的认知，主要应用于单页面应用，Nuxt是SSR很不错的框架。也有过调研，简单的用了一下，感觉还是很不错。但是还是想知道若不依赖于框架又应该如果处理SSR,研究一下做个笔记。
什么是SSR
把Vue组件渲染为服务器端的HTML字符串，将他们直接发送到浏览器，最后将静态标记混合为客户端上完全交互的应用程序。
为什么要使用SSR
更好的SEO，搜索引擎爬虫爬取工具可以直接查看完全渲染的页面
更宽的内容达到时间（time-to-content），当权请求页面的时候，服务端渲染完数据之后，把渲染好的页面直接发送给浏览器，并进行渲染。浏览器只需要解析html不需要去解析js。
SSR弊端
开发条件受限，Vue组件的某些生命周期钩子函数不能使用
开发环境基于Node.js
会造成服务端更多的负载。在Node.js中渲染完整的应用程序，显然会比仅仅提供静态文件server更加占用CPU资源，因此如果你在预料在高流量下使用，请准备响应的服务负载，并明智的采用缓存策略。
准备工作
在正式开始之前，在vue官网找到了一张这个图片，图中详细的讲述了vue中对ssr的实现思路。如下图简单的说一下。
下图中很重要的一点就是webpack，在项目过程中会用到webpack的配置，从最左边开始就是我们所写入的源码文件，所有的文件都有一个公共的入口文件app.js，然后就进入了server-entry(服务端入口)和client-entry(客户端入口)，两个入口文件都要经过webpack，当访问node端的时候，使用的是服务端渲染，在服务端渲染的时候，会生成一个server-Bender，最后通过server-Bundle可以渲染出HTML页面，若在客户端访问的时候则是使用客户端渲染，通过client-Bundle在以后渲染出HTML页面。so~通过这个图可以很清晰的看出来，接下来会用到两个文件，一个server入口，一个client入口，最后由webpack生成server-Bundle和client-Bundle，最终当去请求页面的时候，node中的server-Bundle会生成HTML界面通过client-Bundle混合到html页面中即可。
对于vue中使用ssr做了一些简单的了解之后，那么就开始我们要做的第一步吧，首先要创建一个项目，创建一个文件夹，名字不重要，但是最好不要使用中文。
mkdir dome cd dome npm init
npm init命令用来初始化package.json文件：
{ "name": "dome", // 项目名称 "version": "1.0.0", // 版本号 "description": "", // 描述 "main": "index.js", // 入口文件 "scripts": { // 命令行执行命令 如：npm run test "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Aaron", // 作者 "license": "ISC" // 许可证 }
初始化完成之后接下来需要安装，项目所需要依赖的包，所有依赖项如下：
npm install express --save-dev npm install vue --save-dev npm install vue-server-render --save-dev npm install vue-router --save-dev
如上所有依赖项一一安装即可，安装完成之后就可以进行下一步了。前面说过SSR是服务端预渲染，所以当然要创建一个Node服务来支撑。在dome文件夹下面创建一个index.js文件，并使用express创建一个服务。
代码如下：
const express = require("express"); const app = express(); app.get('*',(request,respones) => { respones.end("ok"); }) app.listen(3000,() => { console.log("服务已启动") });
完成上述代码之后，为了方便我们需要在package.json添加一个命令，方便后续开发启动项目。
{ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node index.js" } }
创建好之后，在命令行直接输入npm start即可，当控制台显示服务已启动则表示该服务已经启动成功了。接下来需要打开浏览器看一下渲染的结果。在浏览器地址栏输入locahost:3000则可以看到ok两个字。
SSR渲染手动搭建
前面的准备工作已经做好了，千万不要完了我们的主要目的不是为了渲染文字，主要的目标是为了渲染*.vue文件或html所以。接下来就是做我们想要做的事情了。接下来就是要修改index.js文件，将之前安装的`vue
和vue-server-render`引入进来。
由于返回的不再是文字，而是html模板，所以我们要对响应头进行更改，告诉浏览器我们渲染的是什么，否则浏览器是不知道该如何渲染服务器返回的数据。