vue ssr 实现方式(学习笔记)
为什么要写本文呢，话说现在vue-ssr 官网上对 vue 服务端渲染的介绍已经很全面了，包括各种服务端渲染框架比如 Nuxt.js 、 集成 Koa 和vue-server-renderer 的 node.js 框架 egg.js，都有自己的官网和团队在维护，文档真是面面俱到功能强大，但是，我个人在刚开始看这些资料的时候，总是忍不住发起灵魂三问：“我是谁？我在哪？我在干什么？”，提前没有相关知识的人开始学这些，肯定是要走一些弯路或者卡在某个点一段时间的，所以我想把我的学习经验做下总结，一方面方便自己以后查阅，一方面也会在文中加一些针对官网上没有细说的点的理解，希望能帮助你减少些学习成本，毕竟这是一个知识共享的时代嘛。本文不涉及到源码解析，主要讲解如何实现 vue 的服务端渲染，比较适合 vue-ssr 小白阅读，下面我们进入正文：
先说下基本概念：
ssr 的全称是 server side render，服务端渲染，vue ssr 的意思就是在服务端进行 vue 的渲染，直接对前端返回带有数据，并且是渲染好的HTML页面；而不是返回一个空的HTML页面，再由vue 通过异步请求来获取数据，再重新补充到页面中。
这么做的最主要原因，就是搜索引擎优化，也就是SEO，这更利于网络爬虫去爬取和收集数据。
为什么这样就有利于网络爬虫爬取呢？
这里简单说一下爬虫的爬取方式，爬虫通过访问 URL 获取一个页面后，会获取当前HTML中已存在的数据，也可以理解为把拿到的 HTML 页面转为了字符串内容，然后解析、存储这些内容，但是如果页面中有些数据是通过异步请求获得的，那么爬虫是不会等待异步请求返回之后才结束对页面数据的解析的，这样就会没有爬取到这部分数据，很不利于其他搜索引擎的收录。
这也就是为什么单页面网站是不具备良好的SEO效果的，因为单页面返回的就是一个基本为空的 HTML 文件，里面就一个带有ID的元素等待挂载而已，页面的内容都是通过 js 后续生成的，比如这样：
<!DOCTYPE html> <html lang="en"> <head><title>Hello</title></head> <body><div id="app"></div></body> <script src="bundle.js"></script> </html>
但对于很多公司来说，公司的产品是希望能被百度、谷歌等搜索引擎收录之后，进行排名，进一步的被用户搜索到，能更利于品牌的推广、流量变现等操作，要实现这些，就必须保证产品的网页是能够被网络爬虫爬取到的，显然一个完整的带有全部数据的页面更利于爬虫的爬取，当然现在也有很多方法可以去实现针对页面异步数据的爬取，github 上也开源了很多的爬虫代码，但是这显然对于爬虫来说更加的不友好、成本更高。
SSR 当然也是有着其他的好处的，比如首屏页面加载速度更快，用户等待时间更短等，其他更多概念可以查看官网 https://ssr.vuejs.org/zh/ ，这些官网上都有介绍。
代码实现
下面我们结合官网上的代码，做一下代码实操，来加深下理解：
在官网中，提供了一个使用模块 vue-server-renderer 简单实现 vue 服务端渲染的示例：
新建一个文件夹vue-ssr-demo，进入其中执行如下命令：
// 安装模块 npm install vue vue-server-renderer --save
创建文件 server.js
// vue-ssr-demo/server.js 示例代码
//第一步，创建vue实例
const Vue = require('vue');
const app = new Vue({
template: "<div>hello world</div>"
});
//第二步，创建一个renderer
const renderer = require('vue-server-renderer').createRenderer();
//第三步，将vue渲染为HTML
renderer.renderToString(app, (err, html)=>{
if(err){
throw err;
}
console.log(html);
});
保存以上代码后，在 vue-ssr-demo 文件夹下打开命令行工具，执行 node server.js 命令，可得到如下 HTML 内容：
➜ vue-ssr-demo node server.js <div data-server-rendered="true">hello world</div>
好，上面的例子中我们已经让 vue 在服务端，也就是 node 环境下运行起来了，到这里其实已经实现了 vue 的服务端渲染了。
可是，实际项目中使用哪有这么简单，起码数据还没渲染啊，那接下来我们看看如何渲染数据：
vue-ssr 渲染数据的方式有两种，我们先看下第一种：
// server.js
const data_vue = {
word: 'Hello World!'
};
//第一步，创建vue实例
const Vue = require('vue');
//vue 实例化过程中插入数据
const app = new Vue({
data: data_vue,
template: "<div>{{word}}</div>"
});
//第二步，创建一个renderer
const renderer = require('vue-server-renderer').createRenderer();
//第三步，将vue渲染为HTML
renderer.renderToString(app, (err, html)=>{
if(err){
throw err;
}
console.log(html);
});
第一种方式，在创建 vue 实例时，将需要的数据传入 vue 的模板，使用方法与客户端 vue 一样；运行 server.js 结果如下，数据 data_vue 已经插入到 vue 模板里面了：
➜ vue-ssr-demo node server.js <div data-server-rendered="true">Hello World!</div>
第二种，模板插值，这里我们也直接先放代码：
const data_vue = {
word: 'Hello World!'
};
const data_tpl = {
people: 'Hello People!'
};
//第一步，创建vue实例
const Vue = require('vue');
const app = new Vue({
data: data_vue,
template: "<div>{{word}}</div>"
});
//第二步，创建一个 renderer 实例
const renderer = require('vue-server-renderer').createRenderer({
template: "<!--vue-ssr-outlet--><div>{{people}}</div>"
});
//第三步，将vue渲染为HTML
renderer.renderToString(app, data_tpl, (err, html)=>{
if(err){
throw err;
}
console.log(html);
});
这里我们增加了数据 data_tpl，你会发现，在 renderToString 方法中传入了这个参数，那么这个参数作用在哪里呢？这就要看下官网中关于 createRenderer和 renderToString 方法的介绍了，
createRenderer: 使用（可选的）选项创建一个 Renderer 实例。
const { createRenderer } = require('vue-server-renderer')
const renderer = createRenderer({ / 选项 / })
在选项中，就有一个参数叫 template，看官网怎么说的：
template: 为整个页面的 HTML 提供一个模板。此模板应包含注释 <!--vue-ssr-outlet-->，作为渲染应用程序内容的占位符。
为整个页面的 HTML 提供一个模板。此模板应包含注释 <!--vue-ssr-outlet-->，作为渲染应用程序内容的占位符。
模板还支持使用渲染上下文 (render context) 进行基本插值：
使用双花括号 (double-mustache) 进行 HTML 转义插值 (HTML-escaped interpolation)；
使用三花括号 (triple-mustache) 进行 HTML 不转义插值 (non-HTML-escaped interpolation)。
根据介绍，在创建 renderer 实例时，可以通过 template 参数声明一个模板，这个模板用来干嘛呢？就用来挂载 vue 模板渲染完成之后生成的 HTML。这里要注意一下，当创建 renderer 实例时没有声明 template 参数，那么默认渲染完就是 vue 模板生成的 HTML；当创建 renderer 实例时声明了 template 参数，一定要在模板中增加一句注释 “<!--vue-ssr-outlet-->” 作为 vue 模板插入的占位符，否则会报找不到插入模板位置的错误。
再次运行 server.js ，结果如下，vue 模板已成功插入，且 template 模板中的 {{people}} 变量也因在 renderToString 方法中第二位参数的传入，显示了数据：
vue-ssr-demo node server.js <div data-server-rendered="true">Hello World!</div><div>Hello People!</div>
如果我们把 template 换成一个 HTML 页面的基本架构，来包裹 vue 模板，是不是就能得到一个完整页面了呢？我们来试一下：
const data_vue = {
word: 'Hello World!'
};
const data_tpl = {
people: 'Hello People!'
};
//第一步，创建vue实例
const Vue = require('vue');
const app = new Vue({
data: data_vue,
template: "<div>{{word}}</div>"
});
//第二步，创建一个renderer
const renderer = require('vue-server-renderer').createRenderer({
template: `<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>
<!--vue-ssr-outlet--><div>{{people}}</div>
</body>
</html>`
});
//第三步，将vue渲染为HTML
renderer.renderToString(app, data_tpl, (err, html)=>{
if(err){
throw err;
}
console.log(html);
});
运行 server.js ，结果如下，我们得到了一个完整的 HTML 页面，且成功插入了数据：
vue-ssr-demo node server.js <!DOCTYPE html> <html lang="en"> <head><title>Hello</title></head> <body> <div data-server-rendered="true">Hello World!</div><div>Hello People!</div> </body> </html>
好，现在页面生成了，该怎么显示呢？这里我们借助下框架 Koa 实现，先来安装：
npm install koa -S
然后修改 server.js ，如下：
const data_vue = {
word: 'Hello World!'
};
const data_tpl = {
people: 'Hello People!'
};
const Koa = require('koa');
//创建 koa 实例
const koa = new Koa();
const Vue = require('vue');
//创建一个renderer
const renderer = require('vue-server-renderer').createRenderer({
template: `<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>
<!--vue-ssr-outlet--><div>{{people}}</div>
</body>
</html>`
});
// 对于任何请求，app将调用该异步函数处理请求：
koa.use(async (ctx, next) => {
// await next();
//创建vue实例
const app = new Vue({
data: data_vue,
template: "<div>{{word}}</div>"
});
//将vue渲染为HTML
const body = await renderer.renderToString(app, data_tpl);
ctx.body = body;
});
// 在端口3001监听:
koa.listen(3001);
console.log('app started at port 3001...');
运行 server.js :
vue-ssr-demo node server.js app started at port 3001...
然后打开浏览器，输入网址 http://localhost:3001/ ，即可看到运行后的效果。
这样就实现了一个简单的服务端渲染项目，但是我们在平常开发的时候，肯定不会这么简单的去构建一个项目，必然会用到一些，比如打包、压缩的工具，这篇就写到这里，下一篇我们尝试使用 webpack 来构建一个 vue 的服务端渲染项目。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
基于vue-ssr服务端渲染入门详解
第一部分 基本介绍 1.前言 服务端渲染实现原理机制:在服务端拿数据进行解析渲染,直接生成html片段返回给前端.然后前端可以通过解析后端返回的html片段到前端页面,大致有以下两种形式: 1.服务器通过模版引擎直接渲染整个页面,例如java后端的vm模版引擎,php后端的smarty模版引擎. 2.服务渲染生成html代码块, 前端通过AJAX获取然后使用js动态添加. 2.服务端渲染的优劣 服务端渲染能够解决两大问题: 1.seo问题,有利于搜索引擎蜘蛛抓取网站内容,利于网站的收录和排名.
-
vue ssr 指南详读
本帖说明 该贴是对vue SSR Guide解读和补充,对于官网文档已有内容会以引用方式体现.由于官网demo在国内无法运行,该贴最后也提供了一个完整的可以运行的demo,帖子中提到的代码均是来自于该demo,供学习交流. 介绍 什么是服务器端渲染(SSR)? Vue.js 是构建客户端应用程序的框架.默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"
-
简单的Vue SSR的示例代码
前言 最近接手一个老项目,典型的 Vue 组件化前端渲染,后续业务优化可能会朝 SSR 方向走,因此,就先做些技术储备.如果对 Vue SSR 完全不了解,请先阅读官方文档. 思路 Vue 提供了一个官方 Demo,该 Demo 优点是功能大而全,缺点是对新手不友好,容易让人看蒙.因此,今天我们来写一个更加容易上手的 Demo.总共分三步走,循序渐进. 写一个简单的前端渲染 Demo(不包含 Ajax 数据): 将前端渲染改成后端渲染(仍然不包含 Ajax 数据): 在后端渲染的基础上,加上 A
-
VUE基于NUXT的SSR 服务端渲染
Server Side Rendering(服务端渲染) SSR 目的是为了解决单页面应用的 SEO 的问题,对于一般网站影响不大,但是对于论坛类,内容类网站来说是致命的,搜索引擎无法抓取页面相关内容,也就是用户搜不到此网站的相关信息. 原理 将 html 在服务端渲染,合成完整的 html 文件再输出到浏览器. 适用场景 客户端的网络比较慢 客户端运行在老的或者直接没有 JavaScript 引擎上 NUXT 作用就是在 node.js 上进一步封装,然后省去我们搭建服务端环境的步骤,只需要遵
-
Vue SSR 组件加载问题
Node 端渲染提示 window/document 没有定义 业务场景 首先来看一个简单的 Vue 组件 test.vue <template> <div> <h2>clientHeight: {{ clientHeight }} px </h2> </div> </template> <script type="text/babel"> export default { data(){ return
-
通过vue-cli3构建一个SSR应用程序的方法
1.前沿 1.1.什么是SSR SSR(服务端渲染)顾名思义就是将页面在服务端渲染完成后在客户端直接展示. 1.2.客户端渲染与服务端渲染的区别 传统的SPA模式 即客户端渲染的模式 Vue.js构建的应用程序,默认情况下是有一个html模板页,然后通过webpack打包生成一堆js.css等等资源文件.然后塞到index.html中 用户输入url访问页面 -> 先得到一个html模板页 -> 然后通过异步请求服务端数据 -> 得到服务端的数据 -> 渲染成局部页面 ->
-
详解Vue基于 Nuxt.js 实现服务端渲染（SSR）
直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js 几小时后,一个基于 Vue.js 的服务端渲染应用框架应运而生,与 Next.js 异曲同工,这就是Nuxt.js 一.快速模板 在已经安装了 vue-cli 的前提下,可以快速创建一个 nuxt 的项目模板 vue init nuxt-commun
-
Vue2 SSR渲染根据不同页面修改 meta
本文主要介绍了Vue2 SSR渲染根据不同页面修改 meta,分享给大家,具体如下: 注意: 经过测试, vue-meta 会导致内存泄漏, 请慎用- 以现在 vue2 的 服务端渲染模式, 都是通过 webpack 生成 html 模版文件(或者直接在 server.js 里拼接), 然后通过fs.readFileSync 读取该文件, 再通过 res.end 输出, 这样就造成 meta 修改很麻烦 这时候我们可以借助 vue-meta 来管理, 下面以官方的vue-hackernews-2
-
最后说说Vue2 SSR 的 Cookies 问题
本来想前面写点什么的, 还是算了, 直接说思路吧. 从 Vue2.3 版本后, SSR 的 cookies, 就变成一个无比麻烦的问题, 具体请访问官网文档: https://ssr.vuejs.org/zh/api.html#runinnewcontext 之前也说不少的思路, 可是都觉得不怎么好用, 虽然都能解决问题, 今天再说一种思路 因为 Vue2.3 以后, bundle 代码将与服务器进程在同一个 global 上下文中运行, 所以不能再将 cookies 丢到 global 给 a
-
理解vue ssr原理并自己搭建简单的ssr框架
前言 大多数Vue项目要支持SSR应该是为了SEO考虑,毕竟对于WEB应用来说,搜索引擎是一个很大的流量入口.Vue SSR现在已经比较成熟了,但是如果是把一个SPA应用改造成SSR应用,成本还是有些高的,这工作量无异于重构前端.另外对前端的技术要求也是挺高的,需要对Vue比较熟悉,还要有Node.js 和 webpack 的应用经验. 引入 Vue是一个构建客户端应用的框架,即vue组件是在浏览器中进行渲染的.所谓服务端渲染,指的是把vue组件在服务器端渲染为组装好的HTML字符串,然后将它们
-
详解vue服务端渲染(SSR)初探
前言 首先来讲一下服务端渲染,直白的说就是在服务端拿数据进行解析渲染,直接生成html片段返回给前端.具体用法也有很多种比如: 传统的服务端模板引擎渲染整个页面 服务渲染生成htmll代码块, 前端 AJAX 获取然后js动态添加 服务端渲染的优劣 首先是seo问题,前端动态渲染的内容是不能被抓取到的,而使用服务端渲染就可以解决这个问题.还有就是首屏加载过慢这种问题,比如在SPA中,打开首页需要初始加载很多资源,这时考虑在首屏使用服务端渲染,也是一种折中的优化方案.但是使用SSR时,势必会增加服