Tutorial: SSR

Render HTML with renderToString and hydrate with mount.

On the server:

import { const atom: AtomFnatom, function 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, any, any> | Stream<number, any, any>): AtomHandle<number>atom(0);
  return <IntrinsicElements[string]: anyp>{const count: AtomHandle<number>count}</IntrinsicElements[string]: anyp>;
};

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 { function mount(el: Element, fn: Component, opts?: MountOptions): () => voidmount } from "ilha";

const const Counter: () => ViewCounter = () => <IntrinsicElements[string]: anyp>0</IntrinsicElements[string]: anyp>;

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): () => voidmount(const host: Elementhost, const Counter: () => ViewCounter, { hydrate?: boolean | undefinedhydrate: true });

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