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

问题描述 投票:0回答:1

Next.js 9.3引入了getServerSideProps。现在在getInitialProps documentation中显示:

[如果您使用的是Next.js 9.3或更高版本,我们建议您使用getInitialPropsgetStaticProps而不是getServerSideProps

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

next.js
1个回答
0
投票

getInitialProps

getServerSideProps仅在服务器端上运行,而从不在浏览器上运行。如果页面使用getServerSideProps,则:

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

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

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

对于getServerSideProps

more info

仅在构建时运行

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

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

对于getStaticProps

© www.soinside.com 2019 - 2024. All rights reserved.