SSR framework for Web components standard, which is based on WebCell design & infrastructure.

WebSSR is a lightweight server-side rendering framework for the Web Components standard. It renders pages using JSX on the server via DOM-Renderer and serialises shadow roots with the Declarative Shadow DOM standard so browsers can hydrate without JavaScript.

• Node.js ≥ 22

npm install
npm start          # production
npm run dev        # development (auto-restarts on file changes)

The server listens on port 3000 by default. Override with the PORT environment variable.

Pages live under the app/ directory and follow the Next.js App Router naming convention:

app/
  page.tsx              →  GET /
  about/
    page.tsx            →  GET /about
  users/
    [id]/
      page.tsx          →  GET /users/:id

Each page.tsx must export an async default function that returns JSX:

// app/page.tsx
import type { PageProps } from '../source/types.js';

export default async function HomePage({ params, searchParams }: PageProps) {
  return <h1>Hello, {searchParams.name ?? 'World'}!</h1>;
}

Mark a module as a client component using the import attribute with { runtime: 'client' }:

import { MyButton } from './MyButton' with { runtime: 'client' };

The Parcel 2 transformer plugin (source/parcel-plugin/index.ts) intercepts these imports:

• Server build – replaces the import with a lightweight stub object so that the SSR renderer can emit the right custom-element tag without executing browser-only code.
• Client build – leaves the import unchanged so Parcel bundles the real component code for the browser.

source/
  server.ts           Koa HTTP server entry point
  router.ts           File-based routing (scans app/**/page.tsx)
  renderer.ts         JSX → HTML via DOMRenderer (static + streaming)
  polyfill.ts         happy-dom DOM environment setup for SSR
  types.ts            Shared TypeScript types (PageProps, PageComponent)
  parcel-plugin/
    index.ts          Parcel 2 Transformer for client component boundaries

app/
  page.tsx            Example home page  (GET /)
  about/
    page.tsx          Example about page (GET /about)