您应该如何使用 getServerSideProps 在路由转换时进行客户端数据获取？

Question

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

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

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

Answer 1

getServerSideProps

\n

\n

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

\n

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

\n

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

\n

所有这些工作都将由 Next.js 自动处理，因此只要您定义了，您就不需要执行任何额外操作getServerSideProps。

\n

\n

欲了解更多信息。

\n

getStaticProps

\n

\n

仅在构建时运行

\n

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

\n

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

\n

\n

欲了解更多信息

\n