renderToStringAsync

Renders an app to an HTML string once its data has loaded: each pass renders with the resource values found so far, the fetches it starts are awaited, and another pass runs while one of them produced a new value. Resources that reject are not cached and render their fallback. The error reporters (onCaughtError, onUncaughtError) are called once, for the pass that gives the answer.

Import#

import { renderToStringAsync } from "@shadow-js/web/server";

Signature#

async function renderToStringAsync(
  code: () => unknown,
  options?: AsyncRenderOptions,
): Promise<AsyncRenderResult>

Parameters#

Returns#

A promise of the final markup and the resolved resource values, to embed in the page.

Throws#

• TypeError (synchronously rejected) for an invalid renderId, timeoutMs or maxPasses. The promise rejects with an Error named SsrError whose code is SSR_BOUNDARY_WATERFALL when more than maxPasses passes are needed, or SSR_TIMEOUT when the time budget runs out; and with the error of a failing render.

Examples#

import { createComponent, renderToStringAsync, serialize } from "@shadow-js/web/server";

function App() {
  return <h1>Hello</h1>;
}
async function page(): Promise<string> {
  const { html, data } = await renderToStringAsync(() => createComponent(App, {}));
  return `${html}<script type="application/json" data-sh="0">${serialize(data)}</script>`;
}