数据加载
编辑此页面SolidStart 旨在简化从数据源加载数据的过程,以保持 UI 与数据的同步更新。对于大部分数据需求,路由可能会用于决定加载哪些数据。SolidStart 包含嵌套路由,以帮助以层级方式构建应用程序的 UI,从而实现布局共享。
客户端数据加载
Solid 提供了一种使用 createResource
原语从数据源加载数据的方法。它接收一个异步函数并从中返回一个 signal。createResource
与 Suspense
和 ErrorBoundary
集成,以帮助管理生命周期和错误状态。
在组件内进行数据获取时,特别是在懒加载部分下嵌套时,可能会遇到不必要的瀑布流问题。为了解决这个问题,建议将数据获取提升到组件树的顶部,或者在使用 SolidStart时,使用服务端以非阻塞方式获取数据。对于下面的示例,我们将使用 solid-router
中的 API 数据。
使用 solid-router
的一些功能,我们可以为数据创建缓存:
使用此方法时,需要注意以下几点:
- 每个路由只会调用一次
preload
函数,即用户首次访问该路由时。之后,细粒度 resources 会保持活跃,实现与 state/url 变化同步,在需要时重新获取数据。如果数据需要刷新,可以使用 createResource 中返回的refetch
函数。 - 在路由渲染之前,会调用
load
函数。它与路由不共享相同的context
。load
函数可以访问的上下文树是Page
组件之上的所有内容。 load
函数在服务器和客户端都会被调用。如果 resources 在服务端渲染时已序列化其数据,则可以避免重新获取。服务器端渲染只会等待 resources 获取和序列化,前提是 resources 信号在 Suspense 边界内被访问。
始终在服务器端加载数据
作为全栈 JavaScript 框架的一个优势是,可以轻松编写能在服务器和客户端都运行的数据加载代码。SolidStart 提供了实现这一点的方法,而且不止于此。通过 "use server"
注释,你可以告诉打包器创建 RPC 并且不将代码包含在客户端包中。这使你可以编写仅在服务器上运行的代码,而无需为此创建 API 路由。例如,它可以是数据库访问或内部 API,或者当你在函数中需要使用服务器时。