13

我知道这个话题并不新鲜，我发现（并阅读了）一些讨论。我找不到的是我仍然存在的问题的答案。

其他人如何解决无法在 _app.js 中使用 getStaticProps 的问题？getInitialProps对我来说不是一个选项，因为我想使用SSG。即使使用 getInitialProps 也有办法强制 SSG吗？或者我真的必须在每一页上从我的 Headless CMS 中获取我的所有数据吗？例如，因为我想构建一个页眉（包括导航）和一个页脚。目前我看到的唯一选择是重复大量代码。

任何提示都非常感谢并感谢您的阅读！

4

2 回答 2

5

Next.js 建议使用getStaticProps或getServerSideProps而不是 getInitialProps 以获得 Next.js 的最佳性能。

如果您使用的是 Next.js 9.3 或更高版本，我们建议您使用 getStaticProps 或 getServerSideProps 而不是getInitialProps。

Next.js 推荐这样做的原因是 getInitialProps 禁用了Automatic Static Optimization并使用了 Server-side Rendering。

在 _app.js 中使用 getInitialProps 将禁用应用程序中所有页面的自动静态优化。此外，它将强制在每个请求上生成所有页面，因为它们使用服务器端呈现，这将导致错误的首字节时间 (TTFB)。

我制作了一份关于 Next.js 页面渲染的备忘单，其中包含 Github 上的实时演示和代码示例，以帮助快速了解它的工作原理。这将帮助您根据用例选择正确的 Next.js 页面呈现策略。

于 2021-07-25T13:39:03.617 回答
0

即使使用 getInitialProps 也有办法强制 SSG

不会。尽管 Nextjs 团队正在努力添加对的getStaticProps支持_app.js，但目前它禁用了静态优化。

正如 nextjs 建议的那样，当“数据来自无头 CMS”时，您应该使用 getStaticProps。

因此，您必须在需要请求的每个页面中执行相同的逻辑。请注意，可以将此逻辑提取到一个函数中并在任何地方重新使用它

getData.js

export async function getData({ req, res }) {
  const data = await getData();

  return { props: { data: data} };
}

pages/example.js

export const getStaticProps = getData

作为另一种选择，您可以在 getInitialProps 中获取一次数据。

易于设置（但请记住，您将失去静态优化。）

_app.js

App.getInitialProps = ({ req, res }) => {
  const data = await getData();

  return { props: { data: data} };
}
于 2021-08-15T14:19:07.550 回答