NextJS,_app,SSG,getInitialProps vs getStaticProps,我应该如何坚持DRY?

cygmwpex  于 2023-06-29  发布在  其他
关注(0)|答案(3)|浏览(177)

我知道这个主题并不新鲜,我发现(并阅读)了一些讨论。我找不到的是我那悬而未决的问题的答案。
其他人如何解决无法在_app.js中使用getStaticProps的问题?getInitialProps 对我来说不是一个选项,因为我想使用 SSG。是否有 * 一种方法来强制SSG,即使使用getInitialProps*?或者我真的需要从我的Headless CMS获取每一页上的所有数据吗?因为我想建立一个标题(包括导航)和页脚,例如。目前我看到的唯一选择是重复大量的代码。
任何提示非常赞赏和感谢阅读!

imzjd6km

imzjd6km1#

Next.js建议使用getStaticPropsgetServerSideProps代替getInitialProps,以获得Next.js的最佳性能。
如果您使用的是Next.js 9.3或更高版本,我们建议您使用getStaticProps或getServerSideProps而不是getInitialProps
Next.js建议这样做的原因是getInitialProps禁用Automatic Static Optimization并使用服务器端渲染。
在_app. js中使用getInitialProps将禁用应用程序中所有页面的自动静态优化。此外,它将强制在每次请求时生成所有页面,因为它们使用服务器端渲染,这将导致糟糕的Time to First Byte (TTFB)
我在Github上做了一个cheat sheet about Next.js page rendering的现场演示和代码示例,以帮助快速理解它是如何工作的。这将帮助您根据您的用例选择正确的Next.js页面渲染策略。

v440hwme

v440hwme2#

有没有办法在使用getInitialProps时强制SSG
虽然Nextjs团队正在努力为_app.js添加对getStaticProps的支持,但目前它禁用了静态优化。
正如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} };
}
unhi4e5o

unhi4e5o3#

我已经找到了一种方法来解决这个问题,通过使用getServerSideProps并在getServerSideProps文档中设置Cache-Control头。

相关问题