初遇SSR

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层资源的隔断打破。"路漫漫其修远兮",路还很长,需要学习的还有很多。加油,小星永远在路上。

相关推荐
类人_猿1 小时前
ASP.NET Web(.Net Framework) Http服务器搭建以及IIS站点发布
前端·iis·asp.net·.net·http站点服务器
组态软件4 小时前
web组态软件
前端·后端·物联网·编辑器·html
前端Hardy4 小时前
HTML&CSS:MacBook Air 3D 动画跃然屏上
前端·javascript·css·3d·html
cnsxjean7 小时前
SpringBoot集成Minio实现上传凭证、分片上传、秒传和断点续传
java·前端·spring boot·分布式·后端·中间件·架构
ZL_5677 小时前
uniapp中使用uni-forms实现表单管理,验证表单
前端·javascript·uni-app
沉浮yu大海7 小时前
Vue.js 组件开发:构建可重用且高效的 UI 块
前端·vue.js·ui
代码欢乐豆7 小时前
软件工程第13章小测
服务器·前端·数据库·软件工程
莘薪8 小时前
JQuery -- 第九课
前端·javascript·jquery
好青崧8 小时前
CSS 样式入门:属性全知晓
前端·css·tensorflow
光头程序员9 小时前
工程化开发谷歌插件到底有爽
前端·react·工程化·前端工程化·谷歌插件