Building your application

数据加载

编辑此页面

SolidStart 旨在简化从数据源加载数据的过程,以保持 UI 与数据的同步更新。对于大部分数据需求,路由可能会用于决定加载哪些数据。SolidStart 包含嵌套路由,以帮助以层级方式构建应用程序的 UI,从而实现布局共享。


客户端数据加载

Solid 提供了一种使用 createResource 原语从数据源加载数据的方法。它接收一个异步函数并从中返回一个 signalcreateResourceSuspenseErrorBoundary 集成,以帮助管理生命周期和错误状态。

在组件内进行数据获取时,特别是在懒加载部分下嵌套时,可能会遇到不必要的瀑布流问题。为了解决这个问题,建议将数据获取提升到组件树的顶部,或者在使用 SolidStart时,使用服务端以非阻塞方式获取数据。对于下面的示例,我们将使用 solid-router 中的 API 数据。

使用 solid-router 的一些功能,我们可以为数据创建缓存:

使用此方法时,需要注意以下几点:

  1. 每个路由只会调用一次 preload 函数,即用户首次访问该路由时。之后,细粒度 resources 会保持活跃,实现与 state/url 变化同步,在需要时重新获取数据。如果数据需要刷新,可以使用 createResource 中返回的 refetch 函数。
  2. 在路由渲染之前,会调用 load 函数。它与路由不共享相同的 contextload 函数可以访问的上下文树是 Page 组件之上的所有内容。
  3. load 函数在服务器和客户端都会被调用。如果 resources 在服务端渲染时已序列化其数据,则可以避免重新获取。服务器端渲染只会等待 resources 获取和序列化,前提是 resources 信号在 Suspense 边界内被访问。

始终在服务器端加载数据

作为全栈 JavaScript 框架的一个优势是,可以轻松编写能在服务器和客户端都运行的数据加载代码。SolidStart 提供了实现这一点的方法,而且不止于此。通过 "use server" 注释,你可以告诉打包器创建 RPC 并且不将代码包含在客户端包中。这使你可以编写仅在服务器上运行的代码,而无需为此创建 API 路由。例如,它可以是数据库访问或内部 API,或者当你在函数中需要使用服务器时。

报告此页面问题