{
  "id": "36fa353d86f05ddd0251b2a6",
  "source": "solid:signals",
  "type": "github-document",
  "title": "hydration-script",
  "content": "---\ntitle: hydrationScript\nuse_cases: \u003e-\n  ssr hydration, server-side rendering, initial page load optimization,\n  capturing events before js loads\ntags:\n  - ssr\n  - hydration\n  - performance\n  - events\n  - bootstrap\nversion: '1.0'\ndescription: \u003e-\n  Bootstrap client-side hydration in SSR apps with HydrationScript. Capture and\n  replay events before JavaScript loads for seamless user experience.\n---\n\n```ts\nimport { generateHydrationScript, HydrationScript } from \"solid-js/web\"\nimport type { JSX } from \"solid-js\"\n\nfunction generateHydrationScript(options: {\n\tnonce?: string\n\teventNames?: string[]\n}): string\n\nfunction HydrationScript(props: {\n\tnonce?: string\n\teventNames?: string[]\n}): JSX.Element\n\n```\n\nHydration Script is a special script that should be placed once on the page to bootstrap hydration before Solid's runtime has loaded.\nIt comes both as a function that can be called and inserted in an HTML string, or as a Component if you are rendering JSX from the `\u003chtml\u003e` tag.\n\nThe options are for the **nonce** to be put on the script tag and any event names for that Solid should capture before scripts have loaded and replay during hydration.\nThese events are limited to those that Solid delegates which include most UI Events that are composed and bubble.\nBy default it is only click and input events.",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/rendering/hydration-script.mdx",
  "metadata": {
    "path": "src/routes/reference/rendering/hydration-script.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 1319,
    "source_type": "github"
  },
  "hash": "5c73dba6a7754cbbc3b33816b530f92869dc1334fdadc931a057c25560cac517",
  "timestamp": "2026-02-23T11:43:00.190338299+01:00"
}