微服务的主要思想是:保持前端路由状态的情况下,多个服务端提供渲染。只要部署了新的微前端服务器,只需要更新前端路由表就可以注入新的路由服务。
在 next.config.js 中提供了 rewrites 配置,可以将前端路由请求代理到另外一台 next.js 服务器,同时保持前端路由状态。
Nextjs 微前端架构实现
先部署一台用于配置路由系统的 nextjs 实例作为整个平台应用的框架。现在在平台上需要开发 A,B 两个应用,所以可以起两个 nextjs 实例来分别开发应用 A 和 B。A 和 B 开发部署完成后,在平台上的 rewrites 中配置好路由分发就可以了。
nextjs 微服务架构要求所有应用都应该使用 nextjs 实现
module.exports = {
async rewrites() {
return [
{
source: '/a',
destination: 'https://a.xxx.com',
},
{
source: '/b',
destination: 'https://b.xxx.com',
},
]
},
}
注意,如果/a 和/b 在平台中已实现的话,将优先渲染平台本地实现,而不会触发 rewrite.
和 Redirects 的区别
上面的微前端你是否觉得多此一举?直接用 a 标签跳转不就好了?不,微前端的意义是作为一种巨量级前端应用的性能优化手段,它可以保持前端路由的状态,不必重载整个网页的情况下更新页面数据。
微服务优点
当一个前端应用变得越来越大的时候,项目也会变得特别臃肿,这时可以将应用根据功能、风格进行拆分,划分到不同的项目、仓库中分别进行管理,人员可以更专心于某一块内容的开发,而对外部来说这看起来还是一个整体的应用。