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
- 提高首页渲染速度