chore(ci): blog sync

Author: coderPerseus

data/blog/post-10.mdx

@@ -0,0 +1,48 @@
+---
+title: Next.js 项目太坑了，一个简单的样式库，就把项目玩坏了
+date: 2024-08-16T04:46:22Z
+slug: post-10
+author: chaseFunny：https://github.com/chaseFunny
+tags: ["bug","Next.js","踩坑记录"]
+---
+
+离大谱，我引入一个库，然后就成功把 Next.js 项目干卡死，而且通过容器化部署，实例达到了惊人的 4 个，什么概念，后端服务的实例也就才三个。前端竟然 4 个。下面看看我的干了什么吧！
+
+## 背景
+
+最近在开发 Next.js 项目。有一个需求是把之前一个项目的功能搬到另外一个项目。写好的代码是 antd + tailwindcss 写的页面。新的项目是 Next.js + 没有tailwindcss 的。我就想能不能通过一个库直接把 tailwind 样式转为原生的样式。这样我就省事多了，确实是“省事”呢！
+
+## 开发
+
+于是我就去找 tailwind css 转为行内样式的库。还真让我找到了 [tw-to-css](https://www.npmjs.com/package/tw-to-css) 。看了它的简介，我就更加开心了。
+
+![image-20240816085714940](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/typora/image-20240816085714940.png)
+
+兼容客户端和服务端，而且减少构建时间，多好啊！我赶紧引入来使用它。使用它确实是很快就把原来的代码搬运到了新的项目，不需要再去定义 css 类，再创建 css 文件，写样式。但是我本地开发就发现，点击进入我的那个页面非常卡。最长达到了 13 秒，
+
+![企业微信截图_119ad3f1-1bcf-4790-bc60-d87ec077a95b](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/typora/%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_119ad3f1-1bcf-4790-bc60-d87ec077a95b.png)
+
+然后。我还专门去前端小分队群里问了一下，大家会不会。但是大家的意思就是这可能是正常的，**这也是我为什么一直都没有怀疑我的代码有问题的原因**，啊啊啊啊啊，如果是正常项目，我肯定会先检查我的代码是不是出问题了，但是，我刚启动这个项目的时候，这个 Next.js 项目就经常卡死，点击反应很慢，导致我以为我开发的这个新页面很慢也是正常的，是 Next.js 的服务端渲染的问题。
+
+## 发现问题、找出问题
+
+我就忍着这么卡，开发完成，直到上线，通过容器化部署，上线后，实例数达到了 4 ，我那个时候差不多就肯定，一定是我的代码写的有问题了，然后我就赶紧去紧急回滚到之前的代码再部署。然后我就去对比我这个新的页面和其他不卡的服务端渲染页面的区别。最终锁定了 `tw-to-css` ，我就把所有 `tw-to-css` 方法去掉，然后刷新，结果不到一秒就响应了。太快啦！
+
+## 最小复现
+
+我写一个代码进行最小复现，使用 tw-to-css 后，客户端组件和服务器组件都会卡死，我去看一下源码，它依赖了 tailwind css 库，下次必须要看看引入新的库的源码了，不能简单看一下简介就好，感兴趣可以去看看：https://github.com/coderPerseus/nextjs-with-antd/tree/tw-to-css-bug-show
+
+![image-20240816084628119](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/typora/image-20240816084628119.png)
+
+## 反思 & 总结
+
+1. 引入新库时要谨慎评估其性能影响。仅仅依赖库的描述是不够的，应该进行充分的测试
+2. 不能忽视明显的性能问题。即使其他人认为可能是正常现象，也要深入调查
+3. 在开发过程中引入新的库要进行性能检查和打包部署验证，不要等到部署后才发现问题
+4. 对于 Next.js 项目，要特别注意服务端渲染的性能。某些库可能在客户端运行良好，但在服务端会造成严重的性能问题
+5. 保持代码的简洁和模块化，这样在遇到问题时更容易定位和解决
+
+不知道你们在开发 Next.js 的时候遇到了什么样的坑，分享一下，大家互相转发，不再吃这种亏
+
+---
+此文自动发布于：<a href="https://github.com/coderPerseus/blog/issues/10" target="_blank">github issues</a>