服务端渲染SSR
通常情况下，用户请求网页，都是后端先调用数据库，获得数据之后，将数据和页面元素进行拼装，组合成完整的 html 页面，再直接返回给浏览器，以便用户浏览。
然而，也可以将渲染为服务器端的 html 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。这种方式就称之为***服务端渲染***
1> 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
2> 更快的内容到达时间 (time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。
1> 涉及构建设置和部署的更多要求。
2> 更多的服务器端负载
下面以VUE为例,将进一步演示一下,服务端渲染:
npm install vue vue-server-renderer --save
// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({
data: {
name: 'Jack'
},
template: `<div>Hello {{ name }}</div>`
})
// 第 2 步：创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()
// 第 3 步：将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
if (err) throw err
console.log(html)
// => <div data-server-rendered="true">Hello World</div>
})
运行结果:
需要安装express,
npm install express --save
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>`
})
renderer.renderToString(app, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.writeHead(200, {
'Content-Type': 'text/html; charset=utf-8'
})
res.end(`
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>${html}</body>
</html>
`)
})
})
server.listen(8080)
使用node运行此文件,然后在浏览器端访问
需要安装axios,
npm install axios --save
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
const axios = require('axios')
server.get('*', async (req, res) => {
const postsRes = await axios({
url: 'http://jsonplaceholder.typicode.com/posts'// json线上测试数据地址
})
console.log(postsRes)
const app = new Vue({
data: {
url: req.url,
posts: postsRes.data
},
template: `
<div>
<h1>访问的 URL 是： {{ url }}</h1>
<ul>
<li v-for="item in posts">标题：{{ item.title }}</li>
</ul>
</div>
`
})
renderer.renderToString(app, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.writeHead(200, {
'Content-Type': 'text/html; charset=utf-8'
})
res.end(`
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>${html}</body>
</html>
`)
})
})
server.listen(8080)
运行结果,如图下:
就先写到这儿吧~