我正在阅读Next.js文档,了解如何在React 18中使用流服务器渲染,其中有一节是关于数据获取的,内容如下:暂挂边界内的数据提取当前仅在客户端受支持。服务器端数据提取尚不受支持。我知道数据只能从页面的服务器端获取,然后通过props传递给组件。这是否意味着我们不能在包含Suspense Package 的组件的页面中使用getServerSideProps,或者只是我们不能将获取的数据传递给这些组件?
Suspense
carvr3hs1#
从理论上讲,你可以在页面组件中使用Suspense组件,但是它没有什么价值。在SSR还没有呈现页面之前,你不会在浏览器中获得该页面。当SSR呈现页面时,你会获得完整的HTML,因此,使用Suspense组件不会给页面组件增加任何价值。因为在前端,您需要等待数据来修改DOM,Suspense可能会带来一些价值,但是对于SSR,我看不出有任何理由实现它。
lf5gs5x22#
它在next13,app目录中可用。
// fetch users const getUsers=async ()=>{ const res=await fetch(UserURL) return res.json} const User=()=>{ const users=getUsers() return ( <> jsx here</> )}
类似地,“订单”组件
// fetch orders const getOrders=async ()=>{ const res=await fetch(OrderURL) return res.json } const Order=()=>{ const orders=getOrders() return ( <> jsx here</> ) }
假设我们有管理页面,并呈现这两个组件
import {Suspense} from "react" const Admin=()=>{ return( <> <Suspense fallback=(<div>Loading Users</div>)> <Users/> </Suspense> <Suspense fallback=(<div>Loading Orders</div>)> <Orders/> </Suspense> </> )}
文档显示了使用新的fetch API获取数据。我认为fetch API必须以某种方式让React Suspense知道数据获取已完成,以便React Suspense可以呈现主jsx。我不确定其他库是否也这样做另一件事,在每个路由的next.js应用程序目录中,还有loading.js文件,它将在主页面挂载时自动呈现。如果Users组件需要1秒来获取,Orders组件需要2秒来获取,则loading.js内容将显示2秒,直到我们的Admin页面完全加载。但对于Suspense,1秒后,将显示User组件,Orders组件将显示其自己加载回退,直到其获取完成
fetch
React Suspense
loading.js
Users
Admin
2条答案
按热度按时间carvr3hs1#
从理论上讲,你可以在页面组件中使用
Suspense
组件,但是它没有什么价值。在SSR还没有呈现页面之前,你不会在浏览器中获得该页面。当SSR呈现页面时,你会获得完整的HTML,因此,使用Suspense
组件不会给页面组件增加任何价值。因为在前端,您需要等待数据来修改DOM,
Suspense
可能会带来一些价值,但是对于SSR,我看不出有任何理由实现它。lf5gs5x22#
它在next13,app目录中可用。
类似地,“订单”组件
假设我们有管理页面,并呈现这两个组件
文档显示了使用新的
fetch
API获取数据。我认为fetch
API必须以某种方式让React Suspense
知道数据获取已完成,以便React Suspense
可以呈现主jsx。我不确定其他库是否也这样做另一件事,在每个路由的next.js应用程序目录中,还有
loading.js
文件,它将在主页面挂载时自动呈现。如果Users
组件需要1秒来获取,Orders组件需要2秒来获取,则loading.js
内容将显示2秒,直到我们的Admin
页面完全加载。但对于Suspense
,1秒后,将显示User组件,Orders组件将显示其自己加载回退,直到其获取完成