什么是SSR
SSR就是服务端渲染,指的是服务器端完成把数据和模板转换成最终的 HTML ,区别于 CSR(客户端渲染),后者是在客户端通过调用dom api完成。SSR 实际上并没有限定语言和框架
- 传统的 PHP,jsp,asp 的模板渲染也是服务端渲染
- Node JS 领域,包含了 React 或者 Vue 这种前后端同构 的模式(本文章说的是这种)
也 包含了 Express / Koa / Egg 等基于模板渲染的 模式
服务端渲染与客户端渲染相比
优点
更好的SEO, 由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面
- 更快的内容到达时间,白屏时间短
React 或者 Vue 这种前后端同构渲染相比与传统的 PHP,jsp,asp 的模板渲染
优点
- 可以利用庞大的前端npm生态
- 使用webpack等构建工具,使用es6+ 的js语法,无需学习java 模版语法
- 提升开发效率,热更新无需重启服务器和编译代码(主要)
什么是Vue SSR
默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记”激活”为客户端上完全可交互的应用程序。大部分代码都可以在服务器(nodejs)和客户端上运行
生命周期
渲染一个 Vue 实例
// 第 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 err
console.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)
})
与服务器集成
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.end(`
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>${html}</body>
</html>
`)
})
})
server.listen(8080)
TODO