createLoader() function

Create a loader for managing async data boundaries.

On the server: - Create loader without initial data - Use load() with IDs to create async boundaries - After render, call getData() to get all resolved data - Serialize data to a script tag in your HTML

On the client: - Create loader with initial data from the script tag - Same load() calls will use cached data instead of fetching

Signature:

export declare function createLoader(opts: LoaderOpts): Loader;

Parameters

Parameter	Type	Description
opts	LoaderOpts

Returns:

Loader

Example 1

Basic usage

// Server
const loader = createLoader({ signal });
const { load } = loader;

const App = () => load('stats', () => fetchStats(), (state) =>
  match(state.status, (s) => s === 'ready' ? Stats(state.data()!) : Loading())
);

// After render
const data = loader.getData();
// Add to HTML: <script>window.__DATA__ = ${JSON.stringify(data)}</script>

// Client
const loader = createLoader({ signal, initialData: window.__DATA__ });
const { load } = loader;
// Same App component - uses cached data, no re-fetch

Example 2

SSR streaming

const loader = createLoader({
  signal,
  onResolve: (id, data) => {
    // Stream chunk to client as each boundary resolves
    const html = renderFragment(id);
    stream.write(`<script>__LATTICE_HYDRATE__("${id}", ${JSON.stringify(html)})</script>`);
  }
});