我目前正在使用Next.js,并使用Fetch方法检索数据:

const res = await fetch(`${process.env.url}/test`, {
  cache: 'no-store',
})

据我所知,指定cache: 'no-store'应该会在用户每次加载页面时强制获取新数据.

这让我怀疑这个选项是否会使组件的行为更像它的客户端呈现.通常,当我执行npm run build时,Next.js会在构建时获取数据后生成静态的HTML文件.

但是,使用cache: 'no-store'似乎会导致在每次加载页面时提取数据,而不是在生成时.这是否意味着我的组件本质上就像是在客户端呈现的一样?如能对此事作出任何澄清,我将不胜感激.

async function fetchItems() {
  const res = await fetch(`${process.env.url}/test`, {
    cache: 'no-store',
  })

  const items: Item[] = await res.json()
  return items
}

export const ItemList = async () => {
  const items = await fetchItems()
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          {item.title}
        </li>
      ))}
    </ul>
  )
}

推荐答案

当您将cache: 'no-store'作为选项添加到fetch中时,这意味着禁用Static Rendering(在构建时生成HTML文件、缓存它们,并在有请求时发送它们)和使用Dynamic Rendering(在有请求后生成HTML文件并发送它们).

该组件仍然获取数据并在服务器上呈现,所以不,这不像在useEffect中调用客户端,在这种情况下,依赖于获取的数据的部分将不在服务器发送的初始HTML中.

Javascript相关问答推荐

通过实现regex逻辑自定义数据表搜索

JS、C++和C#给出不同的Base 64 Guid编码结果

如何获取转换字节的所有8位?

基于变量切换隐藏文本

jQuery提交按钮重新加载页面,即使在WordPress中使用preventDefault()

如何在Javascript中的控制台上以一行形式打印循环的结果

你怎么看啦啦队的回应?

如何将Cookie从服务器发送到用户浏览器

Prisma具有至少一个值的多对多关系

如何在每次单击按钮时重新加载HighChart/设置HighChart动画?

将核心模块导入另一个组件模块时存在多个主题

当用户点击保存按钮时,如何实现任务的更改?

DOM不自动更新,尽管运行倒计时TS,JS

使用NextJS+MongoDB+Prisma ORM获取无效请求正文,无法发布错误

是否可以在不更改组件标识的情况下换出Reaction组件定义(以维护状态/引用等)?如果是这样的话,是如何做到的呢?

Reaction useState和useLoaderData的组合使用引发无限循环错误

为什么我不能使用其同级元素调用和更新子元素?

固定动态、self 调整的优先级队列

Plotly.js栏为x轴栏添加辅助文本

如何按区域进行过滤并将其从结果数组中删除?