我们如何使 Next.js 静态生成 getStaticProps() 在组件级别上工作？

Question

以下代码可以在构建时在 Home 组件级别获取数据时进行 Next.js 的静态生成：

export async function getStaticProps() {
  const dataAtBuild = await fetch(
    "https://api.weather.gov/gridpoints/MTR/84,105/forecast"
  ).then((res) => res.json());

  return {
    props: {
      dataAtBuild
    }
  };
}

演示：https://codesandbox.io/s/quirky-zhukovsky-l7wb9?file=/pages/index.js

并使用卷曲其输出

curl https://l7wb9.sse.codesandbox.io/ | grep -o -E '.{30}Time of.{60}'

可以显示

<p>Time of forecast: <!-- -->3/12/2021, 6:00:00 AM

在构建时生成。

但是，如果将代码 getStaticProps() 移动到组件 Weather 中，则它不能具有构建时间数据，如

演示：https://codesandbox.io/s/cool-night-08cz7?file=/pages/Weather.js

然后卷曲它：

curl https://08cz7.sse.codesandbox.io/ | grep -o -E '.{30}Time of.{60}'

在构建时无法再获取静态生成的内容。

如何让它在组件级别工作？

Answer 1

恐怕现在不可能，如果您想获取服务器端数据，那么只能在Page Component级别进行。

引用：

getStaticProps 只能从页面导出。不能从非页面文件中导出。

这个限制的一个原因是React需要在页面被渲染之前拥有所有需要的数据。

此外，您必须使用导出异步函数 getStaticProps() {} — 如果您将 getStaticProps 添加为页面组件的属性，它将不起作用。

您也可以阅读what counts as Page Component

React 发布服务器组件时可能会出现一些问题，我认为 React 团队与 NextJs 团队合作。

https://github.com/reactjs/rfcs/pull/188