我需要在 NextJS 项目中的一些组件中使用第三方 API 获取数据
我希望服务器使用该 API 为 SEO 预渲染组件。 但在那之后，当用户与应用程序交互时，组件道具应该在客户端获取。
我可以通过使用 NextJS getInitialProps 方法来实现此行为。但在 NextJS 官方文档中，建议使用 getStaticProps 或 getServerSideProps 。
我想知道推荐的方法是什么。
【问题讨论】：
标签： javascript reactjs web next.js seo
如果您已经知道您的网站将包含多少页面，请使用静态站点生成，即使用getStaticProps。这将在构建期间预先生成所有页面。
示例内容大部分是静态的作品集网站。
注意：- 使用 getStaticProps 对您的网站所做的任何更改都不会反映，您需要重新部署才能看到更改。
因此，如果您的作品集还包含一个博客，那么 getStaticProps 将不是一个理想的解决方案，相反，您可以通过在 getStaticProps 函数中添加一个重新验证键来使用 增量静态再生意味着最多每 X 秒在每个请求上重新生成页面。
现在，如果您需要为每个请求预渲染，或者您需要访问请求对象（例如设置 cookie），那么 服务器端渲染 是一个使用 getServerSideProps 函数的选项。 getServerSideProps 仅在服务器上运行，而不是在构建过程中运行
对于客户端数据获取，您可以使用 useEffect 挂钩或 NEXT JS 提供的 swr 挂钩。
所以在你的情况下，
如果您正在使用客户端数据获取，那么结合使用 getServerSideProps 可能没有任何意义，除非您需要该请求响应对象。
因此，您可以将客户端数据获取与 getStaticProps（很可能与该重新验证密钥）结合使用。
【讨论】：
Next.js 文档says:
如果您使用 Next.js 9.3 或更高版本，我们建议您使用 getStaticProps 或 getServerSideProps 而不是 getInitialProps。
这些新的数据获取方法允许您进行精细选择 在静态生成和服务器端渲染之间。了解更多关于 页面和数据获取的文档。
如果出现以下情况，您应该使用 getStaticProps：
- 呈现页面所需的数据在用户请求之前的构建时可用。
- 数据来自无头 CMS。
- 数据可以公开缓存（不是用户特定的）。
- 页面必须预先渲染（用于 SEO）并且速度非常快 — getStaticProps 生成 HTML 和 JSON 文件，这两个文件都可以 由 CDN 缓存以提高性能。
什么时候应该使用 getServerSideProps？你应该使用 getServerSideProps 仅当您需要预渲染其数据的页面时 必须在请求时获取。时间到第一个字节（TTFB）将是 比 getStaticProps 慢，因为服务器必须计算结果 在每个请求上，结果不能被 CDN 缓存 额外配置。
如果您不需要预渲染数据，那么您应该考虑 在客户端获取数据。点击这里learn more。
【讨论】：
当我们使用 getServerSideProps 而不是 getInitialProps 时，Bundle 会更小，因为 getServerSideProps 在服务器上而不是在浏览器上执行代码。
详细了解这两个here 之间的区别。
【讨论】：