在 NextJS 中获取客户端和服务器端的数据

Question

我需要在 NextJS 项目中的某些组件中使用第三方 API 获取数据

我希望服务器使用该 API 为 SEO 预渲染组件。 但在那之后，当用户与应用程序交互时，组件 props 应该在客户端获取。

我可以通过使用 NextJS getInitialProps方法来实现这种行为。 但在 NextJS 官方文档中，建议使用getStaticProps或getServerSideProps 。

我想知道推荐的方法是什么。

Answer 1

当我们使用getServerSideProps而不是getInitialProps时，包的大小更小，因为 getServerSideProps 在服务器上而不是在浏览器上执行代码。

在此处阅读有关这两者之间差异的更多信息。

Answer 2

Next.js 文档说：

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

这些新的数据获取方法允许您在静态生成和服务器端渲染之间进行精细的选择。 了解有关页面和数据获取文档的更多信息。

如果出现以下情况，您应该使用 getStaticProps：

• 呈现页面所需的数据在用户请求之前的构建时间可用。
• 数据来自无头 CMS。
• 数据可以公开缓存（不是特定于用户的）。
• 该页面必须预渲染（用于 SEO）并且速度非常快 — getStaticProps 生成 HTML 和 JSON 文件，这两个文件都可以由 CDN 缓存以提高性能。

我应该什么时候使用 getServerSideProps？ 仅当您需要预呈现其数据必须在请求时获取的页面时，才应使用 getServerSideProps。 到第一个字节的时间（TTFB）将比 getStaticProps 慢，因为服务器必须对每个请求计算结果，并且结果不能在没有额外配置的情况下被 CDN 缓存。

如果您不需要预渲染数据，那么您应该考虑在客户端获取数据。 单击此处了解更多信息。

Answer 3

如果您已经知道您的网站将包含多少页面，那么使用静态站点生成，即使用getStaticProps 。 这将在构建期间预先生成所有页面。

示例内容主要是静态的投资组合网站。

注意：- 使用 getStaticProps 不会反映对您网站所做的任何更改，您需要重新部署才能查看更改。

因此，如果您的投资组合还包含一个博客，那么getStaticProps将不是一个理想的解决方案，相反您可以通过在getStaticProps函数中添加一个重新验证键来使用增量静态再生，这意味着最多每 X 在每个请求上重新生成页面-秒。

现在，如果您需要为每个请求预渲染，或者您需要访问请求对象（例如设置 cookie），那么服务器端渲染是一个选项，使用getServerSideProps函数。 getServerSideProps 仅在服务器上运行，而不是在构建过程中运行

对于客户端数据获取，您可以使用 NEXT JS 提供的 useEffect 钩子或swr钩子。

所以在你的情况下，

对于服务器端数据获取，您可以使用函数getServerSideProps并且它们返回的道具可以在您的useState钩子中使用以将其设置为您的初始状态。

然后对于客户端数据获取，您可以使用 Next JS 团队提供的useEffect钩子或swr钩子来实现。