⭐️ 平凡的程序员节 / Remix 相关讨论

2023-10-24

今天是一年一度的程序员节,但对我来说就是平平凡凡的一天。在推和朋友圈上看着别人的公司在这一天“放假”搞活动和其他福利,而自己这边却连一个全员祝福都没有。

今天的编程主要发现了一个问题,就是折腾 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 命令改一次代码就更换一次接口

    • 暂时没找到原因

我认为既然是程序员节,那就更应该给自己一点时间放松,而不是闷闷不乐的玩什么程序员答题解密游戏,这不比打工还烧脑么。晚上饭后出去外面公园走了走,顺便锻炼一下。

回到家之后就是原神了,同时还在思考给小窝项目页面增加点赞功能的位置,主要感觉设计调整了很多次都没有得到满意的答案。

星灯晕染之街 Coruscating Street 多云 一般
概览页 时间轴
奇趣音乐盒 技术源于 Kico Player
Emmm,这里是歌词君