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

EN

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

阅读更多关于这两种这里之间的区别的文章。

Next.js docs 他说

如果您使用的是Next.js 9.3或更高版本，我们建议您使用getStaticProps或getServerSideProps而不是getInitialProps。 这些新的数据获取方法允许您在静态生成和服务器端呈现之间进行粒度选择。了解有关页面和数据获取的文档的更多信息。

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

• 呈现页面所需的数据在用户请求之前的构建时可用。
• 这些数据来自无头CMS。
• 数据可以公开缓存(不特定于用户)。
• 页面必须预先呈现(对于SEO)并且非常快- getStaticProps生成HTML文件，这两个文件都可以由CDN缓存以提高性能。

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

如果不需要预呈现数据，那么应该考虑在客户端获取数据。点击这里到了解更多。

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

示例是一个投资组合网站，其内容大多是静态的。

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

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

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

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

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

因此，您可以将获取的客户端数据与getStaticProps结合起来(很可能是使用重新验证键)。