还不支持在"Suspense"边界内提取Next.js服务器端数据

Question

我正在阅读Next.js关于如何使用React 18的流媒体服务器渲染的文档，其中有一节关于数据获取，内容如下：

暂挂边界内的数据提取目前仅在客户端受支持。目前还不支持服务器端数据提取。

我知道数据只能从页面的服务器端获取，然后数据将通过道具传递到组件。这是否意味着我们不能在具有封装在Suspense中的组件的页面中使用getServerSideProps，或者仅仅意味着我们无法将提取数据传递给这些组件？

Answer 1

理论上，页面组件中可以有一个Suspense组件，但它在某种程度上毫无价值。在SSR没有渲染之前，你不会在浏览器中获得该页面。当它渲染时，你会获得完整的HTML，因此Suspense不会给页面组件增加任何值。

因为在前端，你需要等待数据来修改DOM，Suspense可能会带来一些价值，但对于SSR，我看不出有任何理由实现它

Answer 2

它可以与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>
</>
)}

文档显示使用新的fetchAPI获取数据。我认为fetchapi必须让React Suspense知道数据获取已经完成，这样React Suspense才能呈现主jsx。我不确定其他图书馆是否也这样做

另外，在每个路由的next.js应用程序目录中，还有一个loading.js文件，它将在主页面挂载时自动呈现。如果Users组件需要1秒才能获取，而Orders组件需要2秒才能获取，则loading.js内容将显示2秒，直到我们的Admin页面完全加载。但对于Suspense，在1秒的用户组件显示后，订单组件将显示自己的加载回退，直到其获取完成。