时间戳

首页 > 解决方案 > 如何在 NextJS 的变量中缓存某些内容？

javascript - 如何在 NextJS 的变量中缓存某些内容？

问题描述

我从在线 API 获得一些 JSON，我想缓存响应直到我的应用程序运行。

如何在 Next.js 中缓存该 API 的输出？

我不想使用第三方库只是在某处存储一个简单的 JSON 对象。

在 C# 中，我只是创建了一个静态变量，它在我的进程的整个生命周期中都存在。

我怎样才能在 Next.js 中做到这一点？

标签： javascriptnode.jsnext.js

解决方案

您可以将数据放在导出的变量中。导入它的所有模块都将共享一个对该变量的只读实时绑定（因此它们可以看到对其的更新，但无法更改它）。

如果您不希望它阻止加载并且您不介意围绕它进行编码而不存在，那么：

export let theData = null;
getTheData()
.then(data => {
    theData = data;
})
.catch(error => {
    // ...error handling...
});

任何使用import { theData } from "the-module";都会有一个实时绑定。

如果您不想围绕它进行编码null，您可以导出一个promise，然后使用（比如说）await它；假设您fetch用于获取数据：

export const theData = fetch(/*...the data...*/)
.then(response => {
    if (!response.ok){
        throw new Error(`HTTP error ${response.status}`);
    }
    return response.json();
});

然后任何使用它的东西都会等待导入。

推荐阅读