Skip to main content

Renderer

The Renderer class aggregates all promises and recursively executes them with subsequent renders.

import { Renderer } from '@archibald/server';

render

This method streams the JSX tree to a string using React's streaming renderer, waiting for pending data requests along the way. If the render fails or exceeds the render budget (abortAfterMSeconds, falling back to render.abortAfterMSeconds from the archibald config and then to the built-in RENDER_BUDGET), it returns an empty string and the application falls back to client-side rendering. An empty string is not a reliable failure signal on its own — use renderResult, hasFallenBack() or getRenderError() to detect the fallback and its cause.

import { Renderer } from '@archibald/server';

const renderer = new Renderer(OPTIONS);

const markup = await renderer.render(PARAMETERS);

Options

NameTypeOptionalDescriptionDefault
dataClientDataClientA DataClient instance (provide a cloned copy via DataClient.getInstance()).
optimizeTranslationsbooleanIf translations should be stripped down to only the ones used.true
abortAfterMSecondsnumberThe render budget in milliseconds: how long the whole render may take before SSR is abandoned in favour of client-side rendering.
onRenderError(error: RenderError) => voidCalled with the cause whenever SSR falls back to client-side rendering (including budget timeouts, reason: 'timeout' with elapsedMs). Use it to log/report failures with your own request context.

Parameters

NameTypeOptionalDescriptionDefault
treeJSX.ElementA JSX element that should be rendered.

renderResult

Like render, but reports the outcome structurally: it returns { markup, fallback } on success and { markup: '', error, fallback: true } when SSR fell back to client-side rendering, so the caller can log the cause, report it to monitoring, or serve an error page.

const { markup, error, fallback } = await renderer.renderResult(tree);

getRenderError / hasFallenBack

getRenderError() returns the RenderError that caused the client-side fallback of the last render (or undefined when the render succeeded). hasFallenBack() returns whether the last render failed and fell back to client-side rendering.