API reference > @kontsedal/olas-react > StreamingHydrator

StreamingHydrator type

Result of createStreamingHydrator(). The plugin field is what you register on the server's root; the flush() method pulls any server-resolved entries that haven't been flushed yet, formatted as a<script> tag.

**Where the tag goes matters.** React writes its stream in fixed-size chunks, so a chunk boundary can fall inside a tag, an attribute value or a text node. A <script> written there breaks the markup, the payload's quotes can close the attribute, and one inside an element React hydrates breaks hydration. Let createStreamingTransform place the tags: it writes one only where React's hydration never sees it. With Node'srenderToPipeableStream, render with renderToReadableStream instead (Node has Web Streams) and pipe through the transform, or writeflush() yourself only after the stream has ended.

const { plugin, flush, dispose } = createStreamingHydrator({ nonce })
const root = createRoot(appDef, { deps, queries: queryEngine(), plugins: [plugin] })
const stream = await renderToReadableStream(
  <OlasProvider root={root}>
    <App />
  </OlasProvider>,
  { bootstrapScriptContent: OLAS_BOOTSTRAP_SCRIPT, nonce },
)
return new Response(stream.pipeThrough(createStreamingTransform(flush)))
// Once the response has finished: root.dispose(), then dispose().

Signature:

type StreamingHydrator = {
  plugin: OlasPlugin;
  flush(): string;
  dispose(): void;
};

References: OlasPlugin