@gluonjs/ssr / packages/ssr/src / prepareForHydration

Function: prepareForHydration()

prepareForHydration(value, options?): Promise<PreparedHydration>

Resolves server async contracts once and returns the matching marker HTML and value tree.

Parameters

value

TemplateValue

options?

RenderSerializationOptions = {}

Returns

Promise<PreparedHydration>

Example

Resolve current asynchronous server contracts once and retain both the resulting value tree and its matching marker HTML:

import { html } from '@gluonjs/core';
import {
  SsrRenderError,
  prepareForHydration,
  renderProgressively,
  renderToChunks,
  renderToString,
  type PreparedHydration,
  type ProgressiveRenderChunk,
  type ProgressiveRenderOptions,
} from '@gluonjs/ssr';

const product = html`<article><h1>Orbit lamp</h1><p>€129</p></article>`;
const prepared: PreparedHydration = await prepareForHydration(product);
const complete = await renderToString(prepared.value);
let chunked = '';
for await (const chunk of renderToChunks(prepared.value)) chunked += chunk;
const controller = new AbortController();
const options = { signal: controller.signal } satisfies ProgressiveRenderOptions;
for await (const chunk of renderProgressively(prepared.value, options)) {
  const progressive: ProgressiveRenderChunk = chunk;
  console.log(progressive.kind, progressive.html);
}
if (complete !== chunked) throw new SsrRenderError('GLUON_SSR_INVALID_VALUE', 'Chunk output changed.');