vue/vue-cli+express手把教你搭建SSR-创新互联

最近简单的研究了一下SSR，对SSR已经有了一个简单的认知，主要应用于单页面应用，Nuxt是SSR很不错的框架。也有过调研，简单的用了一下，感觉还是很不错。但是还是想知道若不依赖于框架又应该如果处理SSR,研究一下做个笔记。

什么是SSR

把Vue组件渲染为服务器端的HTML字符串，将他们直接发送到浏览器，最后将静态标记混合为客户端上完全交互的应用程序。

为什么要使用SSR

• 更好的SEO，搜索引擎爬虫爬取工具可以直接查看完全渲染的页面
• 更宽的内容达到时间（time-to-content），当权请求页面的时候，服务端渲染完数据之后，把渲染好的页面直接发送给浏览器，并进行渲染。浏览器只需要解析html不需要去解析js。

SSR弊端

1. 开发条件受限，Vue组件的某些生命周期钩子函数不能使用
2. 开发环境基于Node.js
3. 会造成服务端更多的负载。在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