我们如何使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

恐怕这是不可能的，现在，如果你想有服务器端数据抓取那么它只能有它的页面组件级别。

:

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

这个限制的原因之一是React需要在呈现页面之前拥有所有必需的数据。

另外，你必须使用导出异步功能getStaticProps() {}-它将无法工作，如果你添加getStaticProps作为页面组件的属性。

你也可以读取什么是页面组件

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

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