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

Question

Next.js 9.3引入了getServerSideProps。现在在getInitialProps documentation中说：

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

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

Answer 1

getServerSideProps

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

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

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

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

对于more info。

getStaticProps

仅在构建时运行

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

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

对于more info