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