MFE聚合层-SSR方案

SSR方案

说到前端SSR大部分都会想到React+nextjs或者vue-server-renderer，或者是同构渲染，其实还有一种就是模板引擎。模板引擎是从后端编程解决前端问题的一种方式。

在微前端的落地方案中，模板引擎作为一个可选项，来看看模板引擎解决了哪些问题。

常见的ToB业务平台或SaaS平台一般都有顶部菜单或侧面菜单作为一级功能入口，我简称为容器框架。

在这种模式下，有二种方案：

1. SSR作为一级网关处理所有请求，将路由规划中的api代理到二级网关。
2. SSR作为二级网关，一级网关将除了api开头的所有请求代理到SSR。

运行模式：

1. 首次加载

   SSR负责将容器框架渲染成html页面，并根据一级路由将对应子应用入口js嵌入到该页面返回，子应用加载完成后接管二级路由。

2. 路由变更

   如果是二级路由以下的路由变更，将由子应用处理；如果是一级路由变更，由于在二级路由中不会匹配，因此将直接请求到SSR，重新进入首次加载流程。子系统前端路由不应该处理404。

3. 刷新页面

   同首次加载逻辑

SPA注册中心

容器框架渲染成html页面并嵌入对应的资源是由SSR部分完成，但是拉取对应SPA应用资源这一步肯定不会是一成不变的。作为SSR平台，需具有灵活性，能动态的注册和下线对应的SPA应用。那么SPA注册中心作为SSR平台的支撑应用，需作为聚合层的必要基础设施。

实现步骤：

1. 注册中心注册SPA一级路由，对应资源CDN地址和入口js前缀，如：MySPA1
2. SPA打包时生成manifest和入口js，入口js的前缀需固定，再加上content hash，如: mySPA1_1234567.js
3. SSR认证鉴权，若未认证重定向到SSO；鉴权后获取菜单并渲染出容器框架
4. 根据一级路由，读取注册的SPA资源manifest
5. 根据SPA注册信息中的入口js前缀，获取对应入口js文件
6. 向SSR的结果容器框架嵌入入口js和入口css文件
7. 返回document给到请求端，请求端进行渲染

总结

这种方式可以满足微前端的独立开发、独立运行、独立部署的要求。同时，该方式满足了子应用的框架无关性，对老旧系统的支持非常友好。缺点是如果平台采用统一框架，那么共有依赖无法公用，子应用切换会重新加载丢失前端状态数据。