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

相关推荐
我要洋人死12 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人24 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人24 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR30 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香32 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969334 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai40 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#