今天遇到一个头疼的问题，花了几天时间把功能写好了，在 dev 模式下运行正常，然而 build 的时候却意外发现 nextjs 竟然访问数据库了。
简化下代码，仅拿出问题相关的代码。
// ./src/app/page.js
export default async function Page() {
const data = await getData(); // next build 调用了 getData
return ...
}
检查了一遍项目中的代码，确认没有在代码文件中硬编码写入访问数据库的代码，那是什么原因造成的呢？
在 pages router 模式下并没有遇到这个问题，按照 pages router 模式推荐的使用 getServerSideProps 方法提供数据，在 build 阶段不会调用到 getData 方法。
// ./src/pages/index.js
export default function Page({data}) {
return ...
}
export const getServerSideProps = async () => {
const data = await getData(); // getData 仅在访问页面时被调用
return { props: { data } };
};
根据这个情况，我找到了 app router 的迁移指导，里面提到了设置 fetch 的 cache 参数为 'no-store' 即可达到与 getServerSideProps 一样的效果。
const res = await fetch(`https://...`, { cache: 'no-store' })
但是，我是直接从数据库取数据的，所以这个方法不适合我，再找下缓存设置，发现可以使用 unstable_noStore 来禁用缓存。
// ./src/app/page.js
import { unstable_noStore as noStore } from 'next/cache';
export default async function Page() {
noStore();
const data = await getData(); // getData 仅在访问页面时被调用
return ...
}
到这里，问题基本上已经定位准确了，但是看到那个 unstable 就觉得还不稳，于是继续往下查，文档中提到当你使用第三方库获取数据时，在页面 export 一个 dynamic 变量将页面设置为 dynamic，这样也等同于使用 getServerSideProps 方法获取数据。
// ./src/app/page.js
// 将当前页面设置为动态页面
export const dynamic = 'force-dynamic';
export default async function Page() {
const data = await getData(); // getData 仅在访问页面时被调用
return ...
}
为了避免每个页面都去加 dynamic 设置，可以在 layout 上加这个设置，这样可以作用到每个页面上。
// ./src/app/layout.js
// 将所有使用当前 layout 的页面设置为动态页面
export const dynamic = 'force-dynamic';
export default async function Layout() {
return ...
}
好了，到这里问题就算是完美解决了。可怜忙了一整天，最后就产出了一行代码~
参考链接：
