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

Posted 2023-02-22

【中文标题】NextJS 在客户端和服务器端获取数据

【英文标题】：Fetch data on both client and server side in NextJS

【发布时间】：2021-10-28 12:31:25

【问题描述】：

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

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

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

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

【参考方案1】：

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

示例内容大部分是静态的作品集网站。

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

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

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

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

所以在你的情况下， 如果您正在使用客户端数据获取，那么结合使用 getServerSideProps 可能没有任何意义，除非您需要该请求响应对象。

因此，您可以将客户端数据获取与 getStaticProps（很可能与该重新验证密钥）结合使用。

【参考方案2】：

Next.js 文档says:

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

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

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

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

什么时候应该使用 getServerSideProps？你应该使用 getServerSideProps 仅当您需要预渲染其数据的页面时 必须在请求时获取。时间到第一个字节（TTFB）将是 比 getStaticProps 慢，因为服务器必须计算结果 在每个请求上，结果不能被 CDN 缓存 额外配置。

如果您不需要预渲染数据，那么您应该考虑 在客户端获取数据。点击这里learn more。

【参考方案3】：

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

详细了解这两个here 之间的区别。