nextjs微服务原理

微服务的主要思想是：保持前端路由状态的情况下，多个服务端提供渲染。只要部署了新的微前端服务器，只需要更新前端路由表就可以注入新的路由服务。

在 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 标签跳转不就好了？不，微前端的意义是作为一种巨量级前端应用的性能优化手段，它可以保持前端路由的状态，不必重载整个网页的情况下更新页面数据。

微服务优点

当一个前端应用变得越来越大的时候，项目也会变得特别臃肿，这时可以将应用根据功能、风格进行拆分，划分到不同的项目、仓库中分别进行管理，人员可以更专心于某一块内容的开发，而对外部来说这看起来还是一个整体的应用。