generateHydrationScript

Returns the inline <script> that records the events a user makes before the app has hydrated, so hydrate() can replay them once its handlers are attached (a click made while the bundle loads is not lost).

Returns the inline <script> that records the events a user makes before the app has hydrated, so hydrate() can replay them once its handlers are attached (a click made while the bundle loads is not lost). Put it in the <head> of the server-rendered page, before the bundle.

Import#

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

Signature#

function generateHydrationScript(options: HydrationScriptOptions = {}): string

Parameters#

Name	Description
`options`	The CSP nonce and the event types to capture. Undefined uses the defaults of HydrationScriptOptions.

Returns#

The script element as a string of markup.

Examples#

import { generateHydrationScript, renderToString } from "@shadow-js/web/server";

function page(app: () => unknown, nonce: string): string {
  const body = renderToString(app);
  return `<html><head>${generateHydrationScript({ nonce })}</head><body>${body}</body></html>`;
}