@reaxis/koa-render

Preact asynchronous view renderer for Koa webservers. Extends the Koa context with a .render method to start streaming an HTML response to the client.
Opportunistically uses out-of-order streaming renders through renderToPipeableStream when clients are capable of re-assembling the content. This is checked by injecting a script tag that sets a cookie, which will be included in future requests from that client to signal that the client executes JS.

More information on out-of-order streaming rendering can be found in the React docs for their version of renderToPipeableStream.

JavaScript

const app = new Koa();
const { addPreactRender } = require("@reaxis/koa-render");

addPreactRender(app, { views: __dirname + "/views" });

// context passed to middlewares now has the .render() method
app.use(async (ctx) => {
	// render views/index.js with props {title: "Example"}
	await ctx.render("index", {title: "Example"});
});

With TypeScript types

import Koa from "koa";
import { addPreactRender } from "@reaxis/koa-render";
import type { KoaRendercontext } from "@reaxis/koa-render";

// KoaRenderContext can also extend an existing Context type with KoaRenderContext<OtherContext>
const app = new Koa<Koa.DefaultState, KoaRenderContext>();

addPreactRender(app, { views: __dirname + "/views" });

// context passed to middlewares now has the .render() method
app.use(async (ctx) => {
	// render views/index.js with props {title: "Example"}
	await ctx.render("index", {title: "Example"});
});

License, donations

AGPL-3.0. If you want to support my work, you can:

Changelog

0.0.1 (January 11, 2025)

• Initial release