ServerPortals

The markup of the portals a server render produced (see createServerPortals).

The markup of the portals a server render produced (see createServerPortals). Pass it to the render as its portals option, then emit html() at the end of <body>, after the app markup. The client adopts each block when it hydrates the portal that wrote it.

Import#

import type { ServerPortals } from "@shadow-js/web/server";

Signature#

interface ServerPortals {
  /**
   * The collected blocks, in the order the render produced them: each is `<!--portal:KEY-->` markup
   * `<!--/portal:KEY-->`. Emit it once, at the end of `<body>`.
   * @returns The markup; empty when no portal was rendered.
   */
  html(): string;
}

Members#

Name	Type	Description
`html`	`html(): string`	The collected blocks, in the order the render produced them: each is `<!--portal:KEY-->` markup `<!--/portal:KEY-->`. Emit it once, at the end of `<body>`.

Examples#

import { createComponent, createServerPortals, renderToString } from "@shadow-js/web/server";

function App() {
  return <main>Hello</main>;
}
const portals = createServerPortals();
const app = renderToString(() => createComponent(App, {}), { portals });
const page = `<!doctype html><html><body><div id="app">${app}</div>${portals.html()}</body></html>`;