NextJS、_app、SSG、getInitialProps 与 getStaticProps，我应该如何坚持 DRY？答案

【问题标题】：NextJS, _app, SSG, getInitialProps vs getStaticProps and how am I supposed to stick to DRY?NextJS、_app、SSG、getInitialProps 与 getStaticProps，我应该如何坚持 DRY？
【发布时间】：2021-01-26 23:14:09
【问题描述】：

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

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

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

【问题讨论】：

半年后，你有什么感悟吗？
在_app.js 中使用getInitialProps 实际上不会禁用SSG（将其添加到_app.js 并构建您的应用程序，您可以查看哪些页面使用SSG，哪些不使用）。

标签： next.js dry getstaticprops ssg

【解决方案1】：

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 将禁用应用程序中所有页面的自动静态优化。此外，它会强制在每个请求上生成所有页面，因为它们使用服务器端呈现，这将导致错误的Time to First Byte (TTFB)。

我在 Github 上创建了一个 cheat sheet about Next.js page rendering，其中包含实时演示和代码示例，以帮助快速了解它的工作原理。这将帮助您根据用例选择正确的 Next.js 页面呈现策略。

【讨论】：

【解决方案2】：

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

没有。虽然 Nextjs 团队是 working to add support for getStaticProps for _app.js，但目前它禁用了静态优化。

按照 nextjs 的建议，"The data comes from a headless 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} };
}

【讨论】：