Ultra-performante Web-APIs mit Bun, Hono und Cloudflare Workers

1. Einleitung

Die Entwicklung moderner Webanwendungen erfordert schnelle, skalierbare und wartungsarme Backends. Traditionelle Setups bringen oft einen erheblichen Overhead mit sich. Dieser Artikel zeigt, wie die Kombination aus Bun, Hono und Cloudflare Workers ein wahres “Power-Trio” bildet, um ultra-performante Web-APIs zu erstellen. Wir werfen einen Blick auf die einzelnen Technologien und bauen ein kleines Beispielprojekt.

2. Überblick der Technologien

2.1 Bun

Bun ist eine moderne, blitzschnelle JavaScript- und TypeScript-Runtime, die als direkter Konkurrent zu Node.js und Deno auftritt. Zu den entscheidenden Vorteilen gehören ein integrierter Transpiler, ein Test-Runner und ein eigener Package-Manager, was die Entwicklung erheblich beschleunigt. Obwohl es mit dem Node.js-Ökosystem weitgehend kompatibel ist, bietet es eine deutlich höhere Ausführungsgeschwindigkeit.

2.2 Hono

Hono ist ein minimalistisches Web-Framework, das mit nur 14 KB Größe beeindruckt. Seine API orientiert sich an etablierten Frameworks wie Express, ist aber von Grund auf für moderne Web-Standards wie die Request- und Response-API optimiert. Hono läuft auf einer Vielzahl von Plattformen, darunter Bun, Deno und Cloudflare Workers. Ein weiteres mächtiges Feature ist der integrierte JSX-Support für serverseitiges Rendering (SSR).

2.3 Cloudflare Workers

Cloudflare Workers ist eine Serverless-Plattform, die es ermöglicht, Code direkt am Rande des Cloudflare-Netzwerks auszuführen. Dies bringt entscheidende Vorteile:

Global verteilte Ausführung: Anfragen werden vom nächstgelegenen Rechenzentrum bearbeitet, was die Latenz minimiert.
Built-in Caching: Inhalte können effizient zwischengespeichert werden.
Persistenz: Lösungen wie KV Storage, Durable Objects, D1 (SQL-Datenbank) und R2 (S3-kompatibler Speicher) sind nahtlos integriert.
Zusätzliche Features: Die Plattform bietet integrierte KI-Funktionen und APIs für Rate Limiting.

3. Projekt-Setup

3.1 Projektinitialisierung mit Bun

Ein neues Hono-Projekt lässt sich mit Bun in wenigen Sekunden aufsetzen:

bun create hono my-api
cd my-api
bun install

3.2 Beispiel: Hello World API mit Hono

Die Einstiegshürde ist extrem niedrig. Eine einfache “Hello World”-API in src/index.ts sieht so aus:

import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => c.text('Hello from Bun + Hono!'))

export default app

4. Erweiterung mit Cloudflare Workers

4.1 Deployment-Konfiguration (wrangler.toml)

Um das Projekt auf Cloudflare Workers zu deployen, wird eine wrangler.toml-Konfigurationsdatei benötigt:

name = "hono-worker"
main = "src/index.ts"
compatibility_date = "2025-03-01"

4.2 Worker-Handler (src/index.ts)

Der Code muss leicht angepasst werden, um den Worker-Handler zu exportieren:

import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => c.text('Running on Cloudflare Workers!'))

export default {
  fetch: app.fetch
}

4.3 Deployment

Das Deployment erfolgt anschließend mit einem einzigen Befehl:

npx wrangler deploy

5. Features: Rate Limiting, Caching & SSR mit JSX

Die Stärke von Hono liegt in seiner erweiterbaren Middleware-Architektur.

5.1 Rate Limiting mit Middleware

Ein Rate Limiting zum Schutz der API lässt sich mit einer vorgefertigten Middleware einfach hinzufügen:

import { Hono } from 'hono'
import { rateLimit } from 'hono-rate-limit'

const app = new Hono()

app.use('*', rateLimit({ windowMs: 60_000, limit: 100 }))

// ... rest of the routes

5.2 Caching mit Cloudflare

Das Caching auf Cloudflare Workers kann direkt über die Standard-Cache-API gesteuert werden:

app.get('/cached', async (c) => {
  const cache = caches.default
  const url = new URL(c.req.url)
  const key = new Request(url.toString(), c.req)
  const cachedResponse = await cache.match(key)

  if (cachedResponse) {
    console.log('Cache hit!')
    return cachedResponse
  }

  const response = new Response('Fresh content from the edge!', {
    headers: { 'Cache-Control': 's-maxage=60' },
  })
  c.executionCtx.waitUntil(cache.put(key, response.clone()))
  
  return response
})

5.3 Server Side Rendering mit JSX

Dank des JSX-Supports kann Hono auch für serverseitig gerenderte HTML-Seiten verwendet werden:

import { jsx } from 'hono/jsx'

const Layout = (props: { children?: any }) => {
  return (
    <html>
      <body>{props.children}</body>
    </html>
  )
}

app.get('/ssr', (c) => {
  return c.html(<Layout><h1>Hello from SSR JSX!</h1></Layout>)
})

Hinweis: Um JSX zu nutzen, muss die tsconfig.json entsprechend konfiguriert werden.

6. Ein letzter Gedanke

Die Kombination aus Bun, Hono und Cloudflare Workers stellt eine moderne und hochperformante Alternative für die Fullstack-Entwicklung dar. Mit minimalem Code und Konfigurationsaufwand lassen sich skalierbare Microservices, APIs und am Edge gerenderte Webseiten realisieren. Dieses Trio ist die perfekte Wahl für Projekte, bei denen Geschwindigkeit und Effizienz im Vordergrund stehen.

Insights