NextJS 热重载保留状态
虽然 Next.js 不仅是一个不错的前端服务端框架,在极端情况下也可以用作后端服务。通过 API Router,可以在 pages/api/
目录下,添加相应的代码。对于没必要前后端分离的小型项目,前后端合在一起在部署可以提升开发效率。
众所周知,动态语言做开发,由于热重载的存在,每次改动代码时服务端会自动重启,会为开发者带来极佳的开发体验。通常而言,对于前端项目,由于 Web 的特性,页面本身不存在状态,因此热重载基本不存在副作用(Next.js 对于已经加载后的页面,目前也已经可以保留上次渲染的 state)。
而对于后端而言,服务往往是有状态的。比如后端服务需要与数据库建立连接,如果每次热重载都新建一条连接,并且由于热重载缺乏析构函数,相当于每次代码变动都会建立一条不会析构的数据库连接,这些连接以类似野指针的形式存在,会占用大量的资源
在 zhblogs 的开发中,使用了 LokiJS 作为内嵌数据库,以确保整个系统可以结合成为一个整体,方便部署和开发。需要确保数据可持久化更可控,因此这里需要自己实现的定时函数执行数据持久化。在热重载的加成下,5 min 一次的数据持久化飞速就变成了每秒一次,并且由于每个定时任务对应的实际上是不同的 LokiJS 实例,因此真正的数据修改可能会被之前已成为野指针的内存数据覆盖掉,导致真正的改动无法生效。
确定原因后,可以从两个方向解决
- 实现一个缓存保存数据库实例,确保程序中只有一个在运行
- 实现析构函数,在重载时销毁上一个实例
由于 JavaScript 本身不存在析构函数(甚至搜这个概念很多人都在讨论 GC,很少有生命周期的讨论),因此这里没法实现。那么另一个思路就是使用一个缓存机制。热重载并不是重启服务,而是重新加载用到的代码,因此在这个过程中 global
是不变的,因此只需要在 global
上写入一个全局变量,在初始化数据库前检查是否已设置该变量。如果未设置则正常初始化,否则返回之前的变量内容。
采用这个机制,也可以实现析构函数,不过这里不进一步讨论
相关代码如下
declare module globalThis { let loki: DatabaseLoki; } export function newLokiCached(path: string){ /** * using cache in development mode * see https://github.com/vercel/next.js/tree/canary/examples/with-mongodb */ if (!globalThis.loki) { globalThis.loki = new DatabaseLoki(path); } else { log.log("使用已连接的 loki 数据库缓存"); } return globalThis.loki; }