ILHA006: Hydration mismatch

Hydration found server markup that differs from the client render, so Ilha mounted from scratch.

mount(host, Component, { hydrate: true }) reuses the server markup. When the first element differs from what the client renders, Ilha warns with ILHA006 and replaces the host content with a full mount. Users see a flash and lose the server work.

Why it happens

• The server and the client render different components or different props.
• The markup in the host came from a different page or an older build.
• Conditional primitives changed the render order. See ILHA002.

Bad

import { mount } from "ilha";

const Page = () => <section>Hello</section>;

// The server sent <article>…</article> into this host.
mount(document.body, Page, { hydrate: true });

Fixed

Render the same component with the same props in both places:

import { const mount: (el: Element, fn: Component, opts?: MountOptions) => (() => void)mount, const renderToString: (fn: Component, opts?: RenderToStringOptions) => Promise<string>renderToString } from "ilha";

const const Page: () => ViewPage = () => <JSX.IntrinsicElements.section: HTMLAttributes<HTMLElement>section>Hello</JSX.IntrinsicElements.section: HTMLAttributes<HTMLElement>section>;

const const html: stringhtml = await function renderToString(fn: Component, opts?: RenderToStringOptions): Promise<string>renderToString(const Page: () => ViewPage);

var document: Document
**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.body: HTMLElement
The **`Document.body`** property represents the <body> or <frameset> node of the current document, or null if no such element exists.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/body)body.Element.innerHTML: string
The **`innerHTML`** property of the Element interface gets or sets the HTML or XML markup contained within the element, omitting any shadow roots in both cases.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/innerHTML)innerHTML = const html: stringhtml;
function mount(el: Element, fn: Component, opts?: MountOptions): (() => void)mount(var document: Document
**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.body: HTMLElement
The **`Document.body`** property represents the <body> or <frameset> node of the current document, or null if no such element exists.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/body)body, const Page: () => ViewPage, { MountOptions.hydrate?: boolean | undefinedhydrate: true });