将带有 Material UI 的 React.js 应用程序迁移到 Next.js 以进行服务器端渲染：Tailwind CSS vs Material UI vs Chakra UI

Question

我目前有一个使用 Material UI 组件的 React.js 应用程序，并且正在将其迁移到 Next.js 以实现服务器端渲染 (SSR)。除了这次迁移之外，我还考虑进行一些 UI 更改。在评估过程中，我遇到了三个 UI 框架：Material UI、Chakra UI 和 Tailwind CSS。

据我了解，Material UI 和 Chakra UI 都支持 Next.js，但由于它们依赖于客户端渲染，因此需要将服务器端组件转换为客户端以获得最佳性能。这涉及将某些组件和钩子（例如 useState）转换到客户端，而主文件保留在服务器端。问题是我发现 MUI 加载整个库，这往往加载速度很慢，因此决定研究其他 UI。

另一方面，Tailwind CSS 提供了实用程序优先的方法，我可以简单地利用它们的类，而不需要将服务器端组件转换为客户端。这看起来更简单，特别是考虑到迁移到 Next.js 进行服务器端渲染的主要目标。

鉴于这种情况，我正在寻求以下方面的建议：

考虑到将服务器端组件转换为客户端所需的额外工作，是否建议在使用 Material UI 或 Chakra UI 时继续迁移到 Next.js？

在使用 Next.js 实现服务器端渲染并高效进行 UI 更改方面，Tailwind CSS 是否会比 Material UI 和 Chakra UI 更好？

在此迁移过程中选择 Tailwind CSS 时，我应该注意什么潜在的缺点或注意事项，特别是与 Material UI 和 Chakra UI 相比？

我们真的需要在客户端实现 MUI 或 Chakra 和 useState 吗？

任何见解、经验或建议将不胜感激。谢谢！

Answer 1

我们先来分解一下吧

材质UI：

Material UI 虽然功能丰富且被广泛采用，但由于其综合库，在包大小和性能方面确实存在缺点。这可能会减慢应用程序的初始加载时间。

脉轮用户界面：

Chakra UI 提供了比 Material UI 更精简的方法，但仍然需要考虑服务器端渲染转换。

现在，关于 Tailwind CSS， 首先，无需将服务器端组件转换为客户端，并且可以轻松与 Next.js 等框架集成。

推荐：

如果您的首要任务是以最少的转换工作实现服务器端渲染，Tailwind CSS 可能是一个合适的选择。

但是，如果您看重现成的组件和更结构化的样式方法，Material UI 或 Chakra UI 可能仍然值得考虑，特别是如果您愿意投入精力进行转换以获得附加功能和设计一致性。

最后的想法

尝试查看其他库，例如 Shadcn 或 Next UI。

但是，这又取决于您真正喜欢什么 - 现成的组件或以最少的转换工作实现服务器端渲染