udiot.
Get started ↗
Docs/Web applicationsv1.0.0-rc.1

Configurable SSR document shell

Configure document assets through the web application or server-side renderer. This guide describes the current DocumentShellConfig source contract.

Why

Before 0.14.0, the SSR renderer hardcoded /client.js, /styles.css, a specific Google Fonts URL, and /assets/brand-icons/*. That made the renderer difficult to integrate with Vite manifests, hashed assets, shell/remote composition, or multi-app branding.

Now, no assets are injected by default — the host app drives the shell via config.

Configure via WebAppConfig.documentShell

import { defineWebApp } from '@tagna/udiot/web';

export default defineWebApp({
  documentShell: {
    lang: 'en',
    rootElementId: 'shell-root',
    hydrateScriptSrc: '/assets/app.a1b2c3d4.js',
    hydrateScriptPlacement: 'body-end',
    hydrateScriptAttributes: { type: 'module' },
    stylesheets: ['/assets/app.a1b2c3d4.css'],
    meta: [
      { name: 'theme-color', content: '#0b1020' },
    ],
  },
});

Configure a standalone SSRRenderer

import { SSRRenderer } from '@tagna/udiot/web';

const renderer = new SSRRenderer({
  documentShell: {
    hydrateScriptSrc: viteManifest['src/entry-client.ts'].file,
    stylesheets: viteManifest['src/entry-client.ts'].css,
  },
});

Opt back in to the old brand defaults

import { SSRRenderer } from '@tagna/udiot/web';

const renderer = new SSRRenderer({
  documentShell: SSRRenderer.legacyBrandShell(),
});

Full DocumentShellConfig reference

Field Description
lang <html lang="…"> — default "en".
htmlAttributes / bodyAttributes Raw attribute strings spliced into <html> / <body>.
rootElementTag / rootElementId Mount node — default <div id="app">.
hydrateScriptSrc URL of the hydration script. Omit or false to skip.
hydrateScriptPlacement "body-end" (default) or "head-defer".
hydrateScriptAttributes Attributes for the hydration <script> tag — e.g. { type: 'module' }.
stylesheets Array of rel=stylesheet hrefs.
links Extra <link> tags.
meta Extra <meta> tags.
scripts Extra <script> tags — same shape as HeadConfig.script.

See src/ssr/renderer.ts for the source of truth.

RC.1 SEO head integration

In RC.1, providing an SEO-generated head can replace the default shell head. Verify that the emitted HTML retains required stylesheet, favicon and script tags when combining SEO with documentShell. The udiot.in build currently adds those local asset tags after generation; see website deployment. The shell configuration is not a sanitizer for untrusted HTML or script content.

From the canonical UDIOT public documentation.Try it in the playground ↗