vue服务器端渲染

Posted 2021-02-11 qqprincekin

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

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

 

传统的SPA（单页应用（Single-Page Application））浏览器渲染在SEO，搜索引擎爬虫抓包的时候页面呈现的方式是这样的

并没有多余的dom元素，就只有一个div，那么页面要怎么呈现呢？答案是js append，下面的那些js会负责innerHTML。而js是由浏览器解释执行的，所以呢，称之为浏览器渲染。

缺点：

1.js放在dom结尾，如果js文件过大，那么必然造成页面阻塞。

2.不利于SEO（爬虫抓到的只是一个HTML框架）

Vue官网的服务端渲染示意图

从图上可以看出，ssr 有两个入口文件，client.js 和 server.js， 都包含了应用代码，webpack 通过两个入口文件分别打包成给服务端用的 server bundle 和给客户端用的 client bundle. 当服务器接收到了来自客户端的请求之后，会创建一个渲染器 bundleRenderer，这个 bundleRenderer 会读取上面生成的 server bundle 文件，并且执行它的代码， 然后发送一个生成好的 html 到浏览器，等到客户端加载了 client bundle 之后，会和服务端生成的DOM 进行 Hydration(判断这个DOM 和自己即将生成的DOM 是否相同，如果相同就将客户端的vue实例挂载到这个DOM上， 否则会提示警告)。

具体实现：

我们需要vuex，需要router，需要服务器，需要服务缓存，需要代理跨域....

 

在使用服务端渲染的时候，首先要有个server端。因为在开发vue项目时，需要起一个webpack-dev-server的服务，端口8000。因为我们要使用它的热更替，这样能加快开发效率。

由于webpack是一个自主的server，我们没有办法在里面添加服务端渲染的代码，而这段代码是需要自己去写的，所以需要再起一个node server，去执行服务端渲染的逻辑。我们会用到vue-server-renderer这个包来帮我们在node.js环境里面去渲染出vue代码生成的HTML代码，这部分代码是直接返回给用户的，用户可以在浏览器里直接看到HTML的内容。

以图为例，我们看到两个渲染的过程，两种server。如果直接访问webpack-dev-server，就跟我们之前开发的过程一样，它是一个纯前端渲染的过程。如果我们要走服务端渲染的流程，就要走node server服务，端口3333以示区别。而且需要打包一个逻辑到node端运行，通过webpack-server-compiler去生成一个server bundle，也就是服务端的app.js。 当node server 获取到server bundle之后，就可以执行vue-server-renderer，去渲染出HTML的代码，直接返回给用户，这样的话就不需要通过js再去渲染出页面内容，减少了用户的等待时间。

 

安装

npm install vue vue-server-renderer --save

VUE SSR：https://ssr.vuejs.org/zh/

东西太多详情参考：https://www.jb51.net/article/132424.htm