NextJS、_app、SSG、getInitialProps 与 getStaticProps 以及我应该如何坚持 DRY？

Question

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

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

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

Answer 1

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

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

Next.js 推荐这样做的原因是 getInitialProps 禁用了自动静态优化并使用服务器端渲染。

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

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

Answer 2

即使使用 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} };
}