Preload

Preload acquires a set of nodes before its children render. It suspends until they are ready, so the subtree below paints with its data already loaded. Use it at route boundaries and to consolidate Suspense above a screen that reads several nodes.

import * as FrondReact from "@frondruntime/react";

<FrondReact.Preload nodes={[{ profile: [ProfileNode, { userId }] }]}>
  <ProfileScreen userId={userId} />
</FrondReact.Preload>;

The nodes prop

nodes is an array of layers. Each layer is a map of { key: [Spec, args] }. Within a layer, nodes load together; layers load in order — a later layer does not start until the earlier one is ready.

<FrondReact.Preload
  nodes={[
    { session: [SessionNode, {}] },                 // layer 1
    { profile: [ProfileNode, { userId }], billing: [BillingNode, { userId }] }, // layer 2
  ]}
>
  <Dashboard />
</FrondReact.Preload>;

Use a single layer when order does not matter. Use multiple layers to gate later acquisitions behind earlier ones.

What it does and does not do

Preload suspends exactly like useNode and throws readiness failures to the error boundary. It acquires the nodes; the children still read them with their own hooks. It does not pin nodes alive on its own — once the children mount and observe, their observation is what keeps the nodes live. See Liveness.

The map key set within each layer must be stable across renders.

The hook form

useNodes is the hook behind Preload. It takes one layer map and returns the ready instances keyed the same way.

const { profile, billing } = FrondReact.useNodes({
  profile: [ProfileNode, { userId }],
  billing: [BillingNode, { userId }],
});

Like useNode, it suspends until every node in the map is ready. Wrap consumers in observer to track their results.

---

Next: Suspense and errors — where boundaries go and how to retry.