SSR简称服务端渲染,是一种在服务端上生成动态内容并将其发送到客户端的技术。
在本次SSR初遇中,是在PC端react项目结合BFF层的express.render做的一个比较小的SSR。
【注】:
"BFF层"指的是"Backend for Frontend"。在软件开发中,BFF层是指在前端和后端之间添加的一个服务层,旨在处理特定于前端的逻辑和需求,以提高系统的性能和灵活性。
项目背景
在BFF层统一管理着某些跨项目的变量。浏览器通过网址访问服务器上的打包代码文件时,打包的代码文件内部需要读取BFF层的变量进行做一些处理展示。
初遇过程
一、在react项目中添加ejs语法
react项目采用的是vite+react为主要技术栈。使用了vite打包构建为可浏览器运行的bundle代码(HTML+JS+CSS)。在HTML模版中,使用script
标签进行插入一段ejs代码。
xml
<script>
window.__backendData = <%- JSON.stringify(backendData).replace(/(^"|"$)/gi, "") %>
</script>
二、BFF层
BFF层采用的是NodeJS+express。这里使用了express的engine和render函数进行处理。当浏览器访问网址的时候,根据访问路径渲染特定的代码资源,
dart
// 实例化app服务
const app = express()
// 配置程序设置的视图目录views
app.set('views', config.VIEW_DIR)
// Express使用特定的模板引擎来处理后缀为.html的文件
app.engine('html', ejs.__express)
// 配置程序设置的模版引擎
app.set('view engine', config.VIEWS_ENGINE)
// 根据user路径,响应特定的资源,渲染的时候将
res.render('user', { name: 'Tobi' }, (err, html) => {
// ...
})
三、整体流程
在react项目中插入ejs执行语句,后vite构建生成可在浏览器运行的html文件。将构建打包生成好的html放在express的视图目录下,express程序设置对应的视图目录views和模版引擎。当通过浏览器输入地址访问时,express程序按照设定的模版引擎和res.render
传入的服务端数据render出响应。
心得总结
到此为止,小星初遇服务端渲染SSR的过程就完整讲述结束了。第一次遇到SSR,打破了以往的开发认知,服务端和web端不是只有通过请求进行通信,还可以通过SSR在资源初次渲染的时候就可以将服务端的变量融合进请求资源中,实现BFF层和web层资源的隔断打破。"路漫漫其修远兮",路还很长,需要学习的还有很多。加油,小星永远在路上。