ssrHydrationKey

Draws the next hydration key of the current scope and returns it as a data-hk attribute, such as ' data-hk="0-0"': compiled server output calls it for the root element of each template, and the client's hydrate() claims the element by that key. Calls must happen in the same order as on the client, so call it only where the compiler would.

Import#

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

Signature#

function ssrHydrationKey(): string

Returns#

Markup for the data-hk attribute, or "" outside a server render (no key is drawn).

Examples#

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

const html = renderToString(() => ssr(["<div", ">x</div>"], ssrHydrationKey()));
// '<div data-hk="0-0">x</div>'