SSR服务端渲染

什么是服务端渲染

服务端渲染： 后端先调用数据库，获得数据之后，将数据和页面元素进行拼装，组合成完整的html页面，再直接返回给浏览器，以便用户使用。

客户端渲染： 数据由浏览器通过ajax动态获取，在通过JS将数据填充到dom元素上最终展示到网页中，这样的过程叫做客户端渲染

为什么要用服务器端渲染？

使用服务器端渲染，最主要的问题，其实就是为了解决SEO的问题。如果SPA应用也有良好的SEO，就不用服务器端渲染这么麻烦了。当然服务器端渲染能解决的首屏加载速度的问题也是原因之一。

以下的列举服务器渲染的一些优缺点：

优点

有利于SEO。
首屏加载速度快。因为SPA引用需要在首屏获取所有资源，而服务器端渲染直接拿了成品展示出来就行了。
无需占用客户端资源。解析模板工作交给服务器完成，对于客户端资源占用更少，尤其是移动端，也可以更省电。

缺点

占用服务器资源。服务器端完成html模板解析，如果请求较多，会对服务器造成一定的访问压力。而如果是前端渲染，就是把这些压力分摊给了前端。
不利于前后端分离。

VUE SSR

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器

实现一个简单的SSR服务端渲染

第一步

新建一个文件夹取名叫SSR
打开PowerShell,执行命令 npm init 初始化一个 npm模板生成了一个 package.json文件
新建入口文件 index.js

第二步

安装需要用到的包 vue、 vue-server-renderer
```
npm install vue vue-server-renderer --save
```

在index.js文件书写代码

// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({template: `<div>Hello World</div>`
})// 第 2 步：创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()// 第 3 步：将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {if (err) throw errconsole.log(html)// => <div data-server-rendered="true">Hello World</div>
})// 在 2.5.0+，如果没有传入回调函数，则会返回 Promise：
renderer.renderToString(app).then(html => {console.log(html)
}).catch(err => {console.error(err)
})

上述两种调用方法二选一

打开PowerShell,执行命令 node index.js 回车即会打印vue的模板内容
```
D:ssr> node .\index.js
<div data-server-rendered="true">Hello World</div>
```

与服务器集成

在 Node.js 服务器中使用时相当简单直接，例如 Express：

安装express
```
npm install express --save
```

修改index.js的内容如下

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()server.get('*', (req, res) => {const app = new Vue({data: {url: req.url},template: `<div>访问的 URL 是：{{ url }}</div>`
})
res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});//设置response编码为utf-8renderer.renderToString(app, (err, html) => {if (err) {res.status(500).end('Internal Server Error')return}res.end(`<!DOCTYPE html><html lang="en"><head><title>Hello</title></head><body>${html}</body></html>`)
})
})server.listen(8080, () => {
console.log("SSR is running in 127.0.0.1:8080")
})

执行命令 node index.js , 终端打印出 SSR is running in 127.0.0.1:8080 即表示运行成功,在浏览器打开

localhost:8080或者127.0.0.1:8080 就会看到内容.

使用一个页面模板

新增一个模板文件 index.template.html 内容如下

<!DOCTYPE html>
<html lang="en"><head><title>Hello</title></head><body><!--vue-ssr-outlet--></body>
</html>

注意  注释 -- 这里将是应用程序 HTML 标记注入的地方。

然后，我们可以读取和传输文件到 Vue renderer 中：

// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({template: `<div>Hello World</div>`
})const renderer = require('vue-server-renderer').createRenderer({template: require('fs').readFileSync('./index.template.html', 'utf-8')
})renderer.renderToString(app, (err, html) => {console.log(html) // html 将是注入应用程序内容的完整页面
})

模板插值

修改模板内容

<!DOCTYPE html>
<html><head><!-- 使用双花括号(double-mustache)进行 HTML 转义插值(HTML-escaped interpolation) --><title>{{ title }}</title><!-- 使用三花括号(triple-mustache)进行 HTML 不转义插值(non-HTML-escaped interpolation) -->{{{ meta }}}</head><body><div class="{{name}}">{{name}}</div><!--vue-ssr-outlet--></body>
</html>

我们可以通过传入一个"渲染上下文对象"，作为 renderToString 函数的第二个参数，来提供插值数据：

// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({template: `<div>Hello World</div>`
})const renderer = require('vue-server-renderer').createRenderer({template: require('fs').readFileSync('./index.template.html', 'utf-8')
})const context = {title: 'hello',meta: `<meta ...><meta ...>`,name: "xiaobu"
}renderer.renderToString(app, context, (err, html) => {// 页面 title 将会是 "Hello"// meta 标签也会注入console.log(html)
})

### 完整实例代码

// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')
const server = require('express')();
const app = new Vue({template: `<div>Hello World</div>`
})const template = require('fs').readFileSync('./index.template.html', 'utf-8')
const renderer = require('vue-server-renderer').createRenderer({template
})const context = {title: 'vue ssr',meta: `<meta name="keyword" content="vue,ssr"><meta name="description" content="vue srr demo">`
}server.get('*', (req, res) => {const app = new Vue({data: {url: req.url},template: `<div>访问的 URL 是：{{ url }}</div>`,
});renderer.renderToString(app, context, (err, html) => {// 页面 title 将会是 "Hello"// meta 标签也会注入console.log(html);if (err) {res.status(500).end('Internal Server Error')return;}res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});//设置response编码为utf-8res.end(html);
})
})server.listen(8080, () => {
console.log("SSR is running in 127.0.0.1:8080")
});

这就是简单的服务端渲染

了解SSR并实现简单的SSR实例相关推荐

vue前端进阶之SSR篇 --- 搭建简单的SSR框架
目录理解ssr SSR的重要性非SSR SSR 了解vapper 制作简易版脚手架 vue框架环境区分目录结构 api router views head信息打包运行结束理解ssr 博主 ...
理解vue ssr原理，自己搭建简单的ssr框架
理解vue ssr原理,自己搭建简单的ssr框架前言大多数Vue项目要支持SSR应该是为了SEO考虑,毕竟对于WEB应用来说,搜索引擎是一个很大的流量入口.Vue SSR现在已经比较成熟了,但是如 ...
React SSR: 基于 express 自构建 SSR 服务端渲染
React SSR: 基于 express 自构建 SSR 服务端渲染文章目录 React SSR: 基于 express 自构建 SSR 服务端渲染完整代码示例前情提要构建 CSR 项目项 ...
《简明电路分析》——1.6节简单电路分析实例
本节书摘来自华章社区<简明电路分析>一书中的第1章,第1.6节简单电路分析实例,作者钟洪声吴涛孙利佳,更多章节内容可以访问云栖社区"华章社区"公众号查看 1.6 ...
【转】JS回调函数--简单易懂有实例
JS回调函数--简单易懂有实例初学js的时候,被回调函数搞得很晕,现在回过头来总结一下什么是回调函数. 我们先来看看回调的英文定义:A callback is a function that is ...
php xml对象解析_php解析xml 的四种简单方法(附实例)
XML处理是开发过程中经常遇到的,PHP对其也有很丰富的支持,本文只是对其中某几种解析技术做简要说明,包括:Xml parser, SimpleXML, XMLReader, DOMDocument. ...
python爬虫简单实例-Python 利用Python编写简单网络爬虫实例3
利用Python编写简单网络爬虫实例3 by:授客 QQ:1033553122 实验环境 python版本:3.3.5(2.7下报错实验目的获取目标网站"http://bbs.51tes ...
python3爬虫实例-python3.7简单的爬虫实例详解
python3.7简单的爬虫,具体代码如下所示: #https://www.runoob.com/w3cnote/python-spider-intro.html #Python 爬虫介绍 impor ...
python爬虫实例-python3.7简单的爬虫实例详解
python3.7简单的爬虫,具体代码如下所示: #https://www.runoob.com/w3cnote/python-spider-intro.html #Python 爬虫介绍 impor ...

了解SSR并实现简单的SSR实例