lit-ui-router-ssr / lit-ui-router-ssr / prerender

Function: prerender()

function prerender(options): Promise<PrerenderResult>;

Defined in: packages/lit-ui-router-ssr/src/prerender.ts:318

Emits a static site from a mount table's verdicts: a shell verdict becomes <subpath>/index.html, or a rules line when the transition its renderShell landed was redirected, a response state becomes the body or rules line its handler in responses answers, a redirect becomes a rules line and no page, and the otherwise projection becomes the 404 document. The loop is ui-router-server/prerender's prerender; this supplies its lit render.

The router is provided on the render root for context-request and scoped with withRouterSync around each render, so a template's <ui-router> descendants and its sref attribute directives read the same router. Renders run one at a time: the scope is a module slot, so there is nothing to parallelise.

A rendered page opens on its hydration signature: a JSON data block, <script type="application/json" data-lit-ui-router-ssr>, naming this package's version, the state and parameter values the router stood on, and the fully qualified name of each <ui-view> it drew a routed component into, which hydrateRoot() reads before it touches the document and bootstrap() reports each view's outcome against. `dehydrate`, or a `payload` hook, adds the resolved values the page was drawn with, which bootstrap() adopts; the page's entry in the result's pages reports the bytes they add and, from dehydrate, the resolves left to re-run on the client. A renderShell that returns a string is written as-is, with no signature, so the client renders it cold.

Pages are rendered with deferHydration, so every custom element one holds carries defer-hydration and renders nothing until hydrateRoot()'s walk reaches it on the client. A property binding emits only its part marker: the property is set when the page hydrates, so what an element must show on the served page arrives as an attribute or as children.

Parameters

Parameter	Type	Description
options	PrerenderOptions	the mount table, the router, the paths, and the hooks

Returns

Promise<PrerenderResult>

what was emitted, planned or written

Throws

an Error when neither mounts nor resolver is supplied

Throws

an Error when the 404 document needs a default probe and only a resolver is supplied

Throws

an Error when both dehydrate and payload are supplied

Throws

an Error when a render settles the router where its links don't spell the page's served path: baseHref() plus its url, against base plus the path

Example

import type { TemplateResult } from 'lit';
import type { UIRouterLit } from 'lit-ui-router';
import { prerender, settle, type PrerenderOptions } from 'lit-ui-router-ssr';

declare const mounts: PrerenderOptions['mounts'];
declare const router: UIRouterLit;
declare const titles: Map<string, string>;
declare function page(): TemplateResult;
declare function fillShell(title: string | undefined, body: string): string;

const result = await prerender({
  mounts,
  router,
  outDir: 'dist',
  paths: ['/', '/sheet/7B', '/legacy'],
  renderShell: async (verdict, { path }) => {
    await settle(router, path);
    return page();
  },
  document: (body, { path }) => fillShell(titles.get(path), body),
});