hydrateDusk

Starts the app in the browser on top of the server's markup.

Steps: read the router payload (<script id="__shadow_router">) and the resource payload (<script data-sh>); create the router on the browser history and seed it, so loaders that the server ran are not run again; await the first load; load the lazy code of the routes on screen; hydrate. A missing or broken payload is reported and the page falls back to loading its data in the browser; the page is never left blank. When the container is empty (the server sent no app markup: a route with ssr = false or "data-only", or a single-page-app shell) there is nothing to claim, so the app is rendered into it, from the router payload when there is one.

Import#

import { hydrateDusk } from "@shadow-js/dusk/client";

Signature#

async function hydrateDusk(options: HydrateDuskOptions): Promise<DuskClient>

Parameters#

Returns#

The router and a dispose function.

Throws#

• TypeError when the container element does not exist.

Examples#

// src/entry-client.ts
import { hydrateDusk } from "@shadow-js/dusk/client";
import { preloadRoutes, routeTree } from "./routeTree.gen";
import App from "./app";
await hydrateDusk({ routes: routeTree, App, preload: preloadRoutes });