Tutorial: SSR

Render HTML with renderToString and hydrate with mount.

On the server:

import { const atom: AtomFnatom, const renderToString: (fn: Component, opts?: RenderToStringOptions) => Promise<string>renderToString } from "ilha";

const const Counter: () => ViewCounter = () => {
  const const count: AtomHandle<number>count = atom<number>(init: number | Atom<number> | Effect<number, unknown, AtomRegistry> | Stream<number, unknown, AtomRegistry>, options?: AtomOptions<number> | undefined): AtomHandle<number>atom(0);
  return <JSX.IntrinsicElements.p: HTMLAttributes<HTMLParagraphElement>p>{const count: AtomHandle<number>count}</JSX.IntrinsicElements.p: HTMLAttributes<HTMLParagraphElement>p>;
};

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

In the browser, mount with hydrate: true when the host already contains that markup:

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

const const Counter: () => ViewCounter = () => <JSX.IntrinsicElements.p: HTMLAttributes<HTMLParagraphElement>p>0</JSX.IntrinsicElements.p: HTMLAttributes<HTMLParagraphElement>p>;

const const host: Element | nullhost = 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.ParentNode.querySelector<Element>(selectors: string): Element | null (+4 overloads)
Returns the first element that is a descendant of node that matches selectors.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/querySelector)querySelector("[data-ilha]");
if (const host: Element | nullhost) function mount(el: Element, fn: Component, opts?: MountOptions): (() => void)mount(const host: Elementhost, const Counter: () => ViewCounter, { MountOptions.hydrate?: boolean | undefinedhydrate: true });

@ilha/router and @ilha/astro do this for you.