@ryupold/vode-ssr (0.1.0)

Published 2026-08-17 20:25:07 +02:00 by michi in ryupold/vode-ssr

Setup this registry in your project .npmrc file:

@ryupold:registry=

To install the package using npm, run the following command:

npm install @ryupold/vode-ssr@0.1.0

or add it to the package.json file:

"@ryupold/vode-ssr": "0.1.0"

For more information on the npm registry, see the documentation.

vode-ssr

Server-side rendering utilities for vode apps.

Note: this is a very early/untested implementation

Usage

There are 2 main render functions.

renderURL(options, req)

Vode independent rendering of a url inside an isolated window. Waits for all asynchronous operations to settle (with timeout) and the returnes the full html document as string.

Hono Example

import { Context } from "hono";
import { H } from "hono/types";
import { renderURL, ForwardedRequest, RequestBasedRenderOptions } from "@ryupold/vode-ssr";

/**
 * Creates a Hono endpoint that performs server-side rendering (SSR) for a given request URL.
 * @param { RequestBasedRenderOptions } options
 * @returns Hono endpoint handler function
 */
export function createSSREndpoint(options: RequestBasedRenderOptions): H {
    return async (c: Context) => {
        if (c.req.method !== "POST") {
            return new Response("Method Not Allowed. You must POST with a ForwardedRequest ({url: string, headers?: Record<string, string>;}) as JSON body.", { status: 405 });
        }

        const forwardedRequest: ForwardedRequest = JSON.parse(await c.req.text());

        if (typeof forwardedRequest.url !== "string")
            return new Response("forwarded request must contain a { url: string }", { status: 400 });

        if (forwardedRequest.headers && typeof forwardedRequest.headers !== "object")
            return new Response("forwarded request contained invalid headers. must be: { url: string, headers?: Record<string, string> }", { status: 400 });

        const renderedHTML = await renderURL(options, forwardedRequest);

        return new Response(renderedHTML, {
            headers: { "Content-Type": "text/html" },
        });
    };
}

Then use it in your api backend.

const app = new Hono();

app.post('/ssr', createSSREndpoint({
    baseUrl: "https://ryupold.de",
    ssrHeader: { "X-SSR": "IGNORE" }
}));

renderVodeApp(options, state, view, initialPatches = [])

Specific to vode and with more control you can render a vode view as app for a specific state (+ patches) in a given HTML shell

renderVodeApp(
    // Render Options
    {
        shell: {
            html: `<html>
                    <head><meta charset="utf-8"></head>
                    <body><div id="app"></div></body>
                    </html>`,
            containerSelector: '#app',
        },
        prefersColorScheme: 'dark',
        windowSize: { width: 1024, height: 768 },
        timeoutMs: 30000,
    },
    
    // App State
    { name: "World" },
    
    // App View
    (s) => [DIV, { id: 'app' }, [H1, "Hello"], [P, s.name]],

    // you can add an optional array of patches that will be applied after the first render
    // ...
)

Thanks

I'm very thankful that we live in a world where libraries like happy-dom exist for free to use and tinker with.

License

Dependencies

ID	Version
@ryupold/vode	1.11.6
happy-dom	20.11.2

Development dependencies

ID	Version
@microsoft/api-extractor	7.58.12
esbuild	0.28.1
typescript	7.0.2

vode ssr server-side-rendering happy-dom prerender hydration

Details

npm

ryupold/vode-ssr

2026-08-17 20:25:07 +02:00

Michael Scherbakow

Project website

MIT

latest

1.1 MiB

Assets (1)

vode-ssr-0.1.0.tgz 1.1 MiB

Versions (1) View all

0.1.0

2026-08-17

Issues

@ryupold/vode-ssr (0.1.0)

Installation

About this package