首先 我们要知道 什么是ssr
ssr是一个缩写 他的全名叫
server side render
比较官方的说 就是服务端渲染 之前是一个组件先挂着 在渲染内容 而现在 是这个组件完全加载好 成一个字符串 再一起挂着在html里 最终让他成为一个可交互的应用程序
ssr传统技术来讲 有 asp .net php jsp
但这些技术 其实并没有太多学习的价值 因为大部分现在市场都比较少见了 大部分前端工程师会更熟悉vue和react
我们在电脑中找一个相对大一点的盘符 创建一个文件夹 叫 vueSsr
在下面打开终端
执行
vue create 项目名称
例如 我这里
vue create vuewebsitem
创建一个vue2工程
然后 我们打开项目
然后 首先 我们需要两个依赖
vue-server-renderer 渲染器
express nodejs服务器
npm i vue-server-renderer -d
npm i express -d
这样 我们的依赖就进来了
在 项目根目录下创建一个文件夹 叫 server 用于存放我们服务端脚本
我们在里面创建一个文件 叫 index.js 参考代码如下
//nodeJs 服务器
const express = require('express');
const Vue = require('vue');
//创建express实例和vue实例
const app = express();
//创建渲染器
const renderer = require('vue-server-renderer').createRenderer();
const page = new Vue({
template: "<div>hello, vue ssr!</div>"
})
app.get("/", async (req, res) => {
try {
const html = await renderer.renderToString(page);
res.send(html);
}
catch (error) {
res.status(500).send("服务器内部错误");
}
})
app.listen(3000,() => {
console.log("渲染服务器启动成功");
})
我们先通过引入的express 创建了一个node的服务器
然后 通过 vue-server-renderer中的createRenderer创建一个渲染器
new一个vue脚本实例 叫 page
然后 用 express下的get来一个根目录 返回renderer.renderToString(page)创建的vue实例 这里我们也捕获了异常
如果出现问题 则返回 500的状态 并渲染服务器内部错误
最后 编写启动脚本 app.listen 指定占用的端口是 3000 启动成功后 在控制台执行脚本 渲染服务器启动成功
我们来到项目终端 输入 node ./server/index.js
渲染 这是 我们的项目就起来了
因为 我们指定了 3000端口 这里 我们用浏览器 访问 http://localhost:3000/
显然 我们的vue实例 就渲染成功了
我们在页面右键 选择 查看网页源代码
就可以看到 我们的脚本是直接在html的结构中的了
然后 我们还可以试一下vue响应式数据的渲染
将index.js中的page实例代码修改如下
const page = new Vue({
data:{
title: "服务端渲染"
},
template: "<div>{{ title }}</div>"
})
这里 我们简单定义了一下data的响应式数据 里面有一个title 值是 服务端渲染 然后 下面模板中定义了一个插值表达式 插入了title
我们把项目重启一下,服务端渲染的坏处就是 每次修改不会实时变动 而是需要手动重启
再次访问 http://localhost:3000/
可以看到 data响应式数据中的title也是成功出来了 我们再右键查看一下页面的源代码
内容也是和html一气呵成