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