next.js - 您应该如何使用 getServerSideProps 在路由转换时获取客户端数据？

Question

Next.js 9.3 引入getServerSideProps. 现在在getInitialProps文档中说：

如果您使用的是 Next.js 9.3 或更高版本，我们建议您使用getStaticPropsorgetServerSideProps代替getInitialProps.

问题是：getInitialProps不只是在服务器端提供道具。它还在客户端上运行并在路由转换时提供道具。在初始服务器渲染后，如果路由更改，getInitialProps则在客户端上运行。那么，9.3 中引入的新方法如何解释这个非常基本的用例呢？

标签： next.js

Answer 1

getServerSideProps

getServerSideProps只在服务器端运行，从不在浏览器上运行。如果页面使用getServerSideProps，则：

当您直接请求此页面时，getServerSideProps在请求时运行，并且此页面将使用返回的道具进行预渲染。

当您通过 next/link（文档）或 next/router（文档）在客户端页面转换请求此页面时，Next.js 会向服务器发送一个 API 请求，该服务器运行getServerSideProps. 它将返回包含运行 getServerSideProps 的结果的 JSON，该 JSON 将用于呈现页面。

所有这些工作都会由 Next.js 自动处理，所以你不需要做任何额外的事情，只要你getServerSideProps定义好了。

欲了解更多信息。

getStaticProps

仅在构建时运行

在构建时预渲染带有 getStaticProps 的页面时，除了页面 HTML 文件之外，Next.js 还会生成一个 JSON 文件，其中包含运行 getStaticProps 的结果。

此 JSON 文件将用于通过 next/link（文档）或 next/router（文档）进行客户端路由。当您导航到使用 getStaticProps 预呈现的页面时，Next.js 会获取此 JSON 文件（在构建时预先计算）并将其用作页面组件的道具。这意味着客户端页面转换不会调用 getStaticProps，因为只使用导出的 JSON。

欲了解更多信息