Next.js转htmx — 真实案例

Pouria Ezzati

6年多前,我用Next.js创建了一个开源的URL缩短器,经过多年的工作,我发现Next.js更像是负担而不是帮助。多年来,Next.js发生了变化,我的代码也随之变化以保持兼容。

我的Next.js代码库变得越来越大,其复杂性随着规模的增大而增加。我有几十个组件和一系列依赖需要管理。最终我不得不不断维护代码只是为了保持它正常运行。当然,Next.js在某些方面有所帮助,但代价是什么?

我问自己,在我的网站上有什么复杂的功能需要那么多JavaScript代码来决定渲染什么以及如何在网页上渲染?Next.js试图从服务器端渲染网页,那么为什么我不直接自己发送HTML呢?

所以我决定尝试一条新路线——有人可能会说是一条老路——选择纯HTML并使用htmx的帮助来实现。

视频

观看我详细介绍整个过程:

过程

用htmx支持的等效HTML元素替换我的组件并不是一件容易的任务,但值得花时间。我必须从不同的角度看待问题,有时我觉得在实现用户交互方面受到限制,但我创建的东西是可靠且快速的。

所有的构建步骤都消失了;不再需要转译和编译代码。所见即所得。大多数依赖变得冗余并被移除。网站的所有主要逻辑都移到了服务器端,保持了单一的真实来源。

在Next.js版本中,我有隔离的组件、全局状态和所有处理表单或更新内容的JavaScript,然而,使用htmx后,一切都变得更加直观。尝试之后,发送和接收HTML突然变得有意义了。

总结

这些数字代表着巨大的改进,然而,对我来说最终重要的是用户体验和开发体验,我认为htmx在这两方面都胜出。

</>