基于BFF架构的vue项目及实现同构渲染的延申

1. 什么是BFF架构
2. 什么时候使用BFF架构
3. Koa2介绍及简单应用（看书阅读）
4. 什么是同构渲染
5. 改造BFF架构简单实现同构渲染

什么是BFF架构？

BFF架构全称Backends For Frontends，即服务于前端的后端。可以简单认为是在前后端分离中的一个中间层，也可称为用户体验适配层。

由于后端在设计API时会考虑不同设备的需求以及不同设备的特殊性，对API的访问有不同的特点，所以虽然有些服务是提供相同的功能，但它们却因为必须区别处理。

BFF架构则是在前端和后端之间再添加一个控制层，在控制层对不同的接口进行合并、数据筛选等处理来使服务适配不同端之间的需求。

 在BFF架构下，理想情况下后端提供基于领域模型的RPC接口，前端则在BFF层直接调用服务端RPC接口获取数据，并按需加工数据，并实现人机交互。

这种架构一方面可以让后端更加专注于业务领域，更多从领域模型的视角思考问题，页面视角的数据则交给前端全栈工程师在BFF层处理。领域模型和页面数据是两种思维方式，而通过BFF架构可以很好地解耦开，让分工更彻底，更专业高效。

 

蚂蚁金服BFF架构(Biz Service-商务服务)
​​​

什么时候使用BFF架构？

•  不同端之间功能需求对数据要求相似，只有部分数据不同时，可以合并为一个服务，而通过BFF处理来适配不同端的数据需求。
• 后端微服务的发展或客户端实现某个功能需要调用多个不同的服务端接口时，可以通过BFF层编写API实现接口的合并及数据处理，而不需改动基层的公共服务，并且客户端不需要直接向多个服务器发送请求，可以优化性能。

Koa2介绍

Koa2是由Express原班人马打造的Web框架，它通过利用 async 函数可以使我们更少地使用回调函数（回调地狱）。

Koa应用通过一系列的中间件实现Web服务，实现机制属于类似堆栈的方式来组织和执行操作。

Koa2的主要概念：

• app.listen()：创建并返回HTTP服务器，一个Koa应用程序可以创建多个HTTP服务
• app.use(function)：应用程序添加中间件
• Context：上下文，Koa将Node的request和response对象分装到单个对象中，可以很方便的操作请求和回应，实现Web服务和API

同构渲染

同构渲染指Javascript应用可以同时运行于客户端和服务端。因此，只需编写一次代码，在服务器上执行它来渲染静态页面，在客户端运行实现快速的交互。

同构渲染可以当作服务器渲染（SSR）的一种实现方式。

同构渲染的优点：

• SEO
• 更好的页面展示速度

同构渲染的缺点：

• 更复杂的开发方式
• 构建及部署更复杂
• 加重服务器负载

改造BFF架构简单实现同构渲染 

使用技术：

• Koa2
• vue
• vue-server-renderer