vue的服务端渲染——通用，大部分代码都可以在服务器和客户端上运行
介绍
- Server Side Render (服务端渲染 SSR)：服务器直接生成 HTML 文档返回给浏览器，但页面交互能力有限。适合于任何后端技术：PHP、Java、Python、Go 等。
- 优点：响应速度快(首屏渲染速度快)，有利于 SEO（搜索引擎优化）
- 缺点：前后端代码混合在一起，难以开发和维护，不适合进行前后端分离开发
- Client Side Render (客户端渲染 CSR)：页面初始加载的 HTML 文档中无核心内容，需要下载执行 js 文件，由浏览器动态生成页面，并通过 JS 进行页面交互事件与状态管理
- 优点：适合前后端分离开发，方便维护，单页应用中几乎都是客户端渲染
- 缺点：首次加载慢，不利于 SEO
- SPA（单页面应用程序）
- 好处：页面导航不用刷新整个页面，体验好，有利于前后端分离开发
- 缺点：不利于 SEO（因为单页面应用中都是使用客户端渲染的方式），还有首次响应慢（第1次要加载大量的公共资源）
- isomorphic web apps（同构应用）：isomorphic/universal，基于react、vue框架，客户端渲染和服务器端渲染的结合，在服务器端执行一次，用于实现服务器端渲染（首屏直出），在客户端再执行一次，用于接管页面交互，核心解决SEO和首屏渲染慢的问题。
- 单页面 + 服务端渲染
示例：
服务端渲染，得有服务端，用node作为服务端
在app.js文件中启动命令行[ctrl+`] ， 输入：
node app
app.js文件中
const express = require('express')
const fs = require('fs')
const app = express()
app.use('/js', express.static('js'))
// 演示客户端渲染
app.get('/csr', (req, res) => {
fs.readFile('./views/csr.html', 'utf-8', (err, html) => {
if (err) {
return res.send('服务器处理错误')
}
res.send(html)
})
})
// 演示服务端渲染
app.get('/ssr', (req, res) => {
// 模拟数据库操作
const data = require('./js/data.json')
fs.readFile('./views/ssr.html', 'utf-8', (err, html) => {
if (err) {
return res.send('服务器处理错误')
}
let array = []
data.forEach(item => {
array.push(`<li>姓名：${item.name}，年龄：${item.age}</li>`)
})
html = html.replace('{{list}}', array.join(''))
res.send(html)
})
})
app.listen(3000, () => {
console.log('正在监听：' + 3000)
})
views/csr.html文件 演示客户端渲染
输入网址127.0.0.1:3000/csr 显示页面
<body>
<h2>演示客户端渲染</h2>
<ul>
</ul>
<script src="js/axios.js"></script>
<script>
const ul = document.querySelector('ul')
axios.get('./js/data.json')
.then((res) => {
const data = res.data
let array = []
data.forEach(item => {
array.push(`<li>姓名：${item.name}，年龄：${item.age}</li>`)
})
ul.innerHTML = array.join('')
})
</script>
</body>
views/ssr.html文件 演示服务端渲染
输入网址127.0.0.1:3000/ssr显示页面
<body>
<h2>演示服务端渲染</h2>
<ul>
{{list}}
</ul>
</body>
Vue 的 SSR
服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。
- 便于 ToC 项目的 SEO
- 提高首页渲染速度
