我们怎么升级我们的前端架构以提高性能

作为一家重视用户体验的企业，我们意识到我们网站的性能需要改进。 虽然我们的网站不是应用程序，但它对于提高我们的品牌知名度至关重要。 为了确保用户可以通过搜索引擎优化 (SEO) 快速找到我们，我们需要保持快速的加载速度和丰富的网络活力。 在这篇博文中，我们将分享我们如何升级我们的前端架构以提升我们网站的性能。

我们的网站 repo 是什么？

除了我们产品的前端 repo，我们还有一个 纯公共网站的回购协议。 它显示有关 GoComet、产品、职业、联系人等的信息。它没有任何需要身份验证的页面。 里面的所有页面都是公开的，所有用户的内容都是一样的。

在 GoComet，我们非常注重 SEO，以便用户可以轻松找到我们。 SEO 总是要求性能来排名。 因此，我们必须保持良好的加载速度和丰富的 Web Vitals。

我们网站的加载速度过去很慢。 我们将 NextJS 用于我们的前端，因为 NextJS 页面在服务器上合成并将生成的 HTML 提供给浏览器（请参阅有关我们的前端技术堆栈的更多信息）。 这对 SEO 非常友好（与在浏览器上编译的纯 React 相比）。

但是我们在页面中使用getInitialProps有一个很大的问题。 此函数在收到请求后执行一些任务，然后相应地填充页面。 通常，它用于异步操作，如数据获取。 在我们的例子中，它被用于一些琐碎的目的，比如获取布局。

这是我们如何使用getInitialProps分配页面布局的示例。 然后我们在_app.jsx中获取这个值并相应地渲染布局。

但是，请记住，这种方法有一个明显的缺点——它启用了服务器端渲染，同时禁用了静态页面生成 . 当用户请求页面时，它在服务器上生成并发送到客户端。 此过程使页面加载速度显着变慢，并且还会使服务器的 CPU 紧张。

这是当时我们的 web vitals 得分：

好吧，getInitialProps不是 唯一的问题。 我们发现我们使用的过时版本的 NextJS 功能有限，这是我们面临的几个问题之一。

我们决定立即修复这些问题并使网站超级流畅。

我们做了以下事情来显着改进我们的前端架构：-

1。 升级的NextJS

我们当时的NextJS版本是8，现在的版本是12。在理想的场景下，人们希望避免在一次升级中跳转2或3个主要的框架版本。 升级到下一个大版本然后一个一个升级通常是安全的选择。

尽管如此，我们还是决定直接跳到四个版本上！ 尽管如此，这仍然具有挑战性，但我们的团队付出了巨大的努力，我们花了一些时间来解决兼容性问题。 我们还升级了 node.js从 v8 到 v14用它。 我们准备好了。 在深入研究它的方法之前，我们必须解决更多问题

2。 将所有库升级到与 Next 12 兼容的版本

我们将我们使用的每个库与 NextJS 一起升级到最新版本。

这是我们采取的方法：

我们首先使用yarn create next-app <repo_name>创建了一个全新的应用程序，这创建了一个新的 NextJS 应用程序（显然是当前版本）。

然后我们添加了所有的包 ，包括开发依赖项，使用yarn add <package_name>而未提及版本，因此所有软件包都安装了最新的 LTS 版本。

然后我们将文件和文件夹移动到这个新应用程序。 我们将应用程序配置为匹配最新版本（根据 next.js 文档）。 我们遇到了一个严重的 SWC 不兼容问题，因此我们不得不从 next.config.js中禁用该功能。 修复了所有进一步的问题并使其正常工作。

2。 GoTrack 产品页面3。 GoProcure 产品页面

感谢您阅读此博客，请在评论中让我们知道您的观点，我们很乐意听取您的意见 你。

如果你想加入我们超级酷且不断成长的团队。 通过我们的career page或通过LinkedIn联系我们。我们一直在寻找优秀的人才与我们一起建设和成长