今天是一年一度的程序员节,但对我来说就是平平凡凡的一天。在推和朋友圈上看着别人的公司在这一天“放假”搞活动和其他福利,而自己这边却连一个全员祝福都没有。
今天的编程主要发现了一个问题,就是折腾 Remix 框架出现水合错误。起初看第一条错误消息,以为是节点的收尾符号(服务端 />
和客户端 >
不一致)导致,但结果并非如此。
Expected server HTML to contain a matching <meta> in <head>.
Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
根据类似 Issue 和 Remix 的文档信息,排查发现其实是浏览器插件引起的,开隐身模式就正常了,这个问题 NextJS 也存在(例如翻译页面之后操作页面的内容就会导致 500 错误)。关于折腾 Remix 我还和一位前同事聊了聊,大致总结如下:
使用 Remix 出现水合报错
- 因为公司部分项目的选型有问题,该 SSR 的地方没有 SSR,影响 SEO 收录
- 基本情况是有一个前台需要 SSR,而后台不需要 SSR,就直接用了 CSR 的方案
还有一些项目是直接使用 NextJS 写但并没有使用到 SSR 的能力,体验很差
- 大多数功能都是 CSR,例如获取用户信息会闪烁一下,而不是 SSR 那样立即显示
- NextJS 用 Zustand 就怪怪的,貌似得绑定 Provider 的 Value 才能保证状态同步正确
关于官网和后台一起写的项目,他的方案是官网 NextJS,后台 CSR 两个项目
- 部署起来 Nginx 的配置肯定麻烦点,但是可以结合各个框架模式的优劣点
- 但是 Types 不能共享,我觉得挺头疼的,不想两个项目分别写一次
- 他尝试过前端各种新兴技术栈,最终都放弃了,说是通通一把梭,不要太纠结技术框架
- 他说官网可以用 Astro 或者 Qwik 或者保持 NextJS 也行,应用部分建议就保持 Vite React Router 就好
Remix 使用 Dev 命令改一次代码就更换一次接口
- 暂时没找到原因
我认为既然是程序员节,那就更应该给自己一点时间放松,而不是闷闷不乐的玩什么程序员答题解密游戏,这不比打工还烧脑么。晚上饭后出去外面公园走了走,顺便锻炼一下。
回到家之后就是原神了,同时还在思考给小窝项目页面增加点赞功能的位置,主要感觉设计调整了很多次都没有得到满意的答案。