Die Welt der Frontend-Frameworks und Static-Site-Generatoren ist heute vielfältiger denn je. Was früher von wenigen Platzhirschen wie Jekyll oder Hugo dominiert wurde, hat sich inzwischen in ein Ökosystem mit hochspezialisierten Tools entwickelt. Manche sind Content-first, andere App-first – und fast alle lassen sich problemlos auf modernen Plattformen wie Cloudflare betreiben.

Dieser Überblick basiert auf realen Projekterfahrungen und der aktuellen Entwicklung der Tools.

Top-Empfehlungen: Astro & SvelteKit

Astro – Content-first und extrem performant

Astro gilt als erste Wahl für Content-getriebene Projekte: Blogs, Dokumentationsseiten, Unternehmenswebsites, Landingpages.

Grundprinzip: „Ship less JavaScript” – nur interaktive Teile werden als Islands ausgeliefert.

Besonderheit: Framework-agnostisch – React, Vue, Svelte, Solid, Preact u.v.m. lassen sich problemlos einbinden.

Stärken von Astro:

• Ideal für Headless-CMS-Integration: Strapi, Contentful, Sanity – alles lässt sich nahtlos integrieren
• Hervorragend für SEO und Core Web Vitals: Durch minimalen JavaScript-Overhead
• Einfache Lernkurve: HTML-ähnliche Syntax mit modernen Features
• Flexible Content-Struktur: Markdown, MDX oder direkte API-Calls

Praxisbeispiel:

---
// pages/blog/[slug].astro
import { getCollection } from 'astro:content';
import Layout from '../layouts/Layout.astro';

export async function getStaticPaths() {
  const blogEntries = await getCollection('blog');
  return blogEntries.map(entry => ({
    params: { slug: entry.slug },
    props: { entry },
  }));
}

const { entry } = Astro.props;
const { Content } = await entry.render();
---

<Layout title={entry.data.title}>
  <article>
    <h1>{entry.data.title}</h1>
    <Content />
  </article>
</Layout>

Astro repräsentiert damit den modernsten Ansatz im Content-first-Bereich.

Nachteile von Astro:

• Begrenzte Interaktivität: Für hochdynamische Apps weniger geeignet
• Islands-Architektur: Kann bei komplexen State-Management-Anforderungen limitierend sein
• Kleineres Ökosystem: Weniger Plugins als Next.js oder Gatsby
• Learning Curve: Islands-Konzept erfordert Umdenken

SvelteKit – App-first, modern und flexibel

Für dynamische Webanwendungen – Shops, Dashboards, Plattformen – ist SvelteKit eine führende Lösung.

Grundprinzip: Svelte ist ein Compiler, der extrem effizienten JavaScript-Code generiert. SvelteKit bringt Routing, SSR, SSG, Edge-Rendering und API-Routen hinzu.

Stärken von SvelteKit:

• App-first-Architektur: Gedacht für komplexe, interaktive Anwendungen
• Sehr moderne Developer Experience: Hot Module Replacement, TypeScript out-of-the-box
• Performance durch minimale Framework-Overheads: Kein Virtual DOM, direkte DOM-Updates
• Zukunftsorientiert: Starke Community und kontinuierliche Innovation

Praxisbeispiel:

<!-- src/routes/dashboard/+page.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  import type { PageData } from './$types';
  
  export let data: PageData;
  
  let loading = false;
  
  async function refreshData() {
    loading = true;
    // API-Call mit SvelteKit's load function
    await invalidateAll();
    loading = false;
  }
</script>

<div class="dashboard">
  <h1>Dashboard</h1>
  {#if loading}
    <div class="spinner">Loading...</div>
  {:else}
    <div class="stats">
      {#each data.metrics as metric}
        <div class="metric-card">
          <h3>{metric.title}</h3>
          <p>{metric.value}</p>
        </div>
      {/each}
    </div>
  {/if}
  
  <button on:click={refreshData}>Refresh</button>
</div>

Nachteile von SvelteKit:

• Kleineres Ökosystem: Weniger Third-Party-Libraries als React
• Jobmarkt: Weniger Stellen als React/Vue/Angular
• Enterprise-Adoption: Noch nicht so verbreitet wie etablierte Frameworks
• Breaking Changes: Svelte 5 brachte signifikante API-Änderungen

Zusammenfassung:

• Astro für Content-Sites
• SvelteKit für komplexe Anwendungen

Weitere spannende Kandidaten

Remix – Webstandards im Fokus

Remix setzt kompromisslos auf Webstandards und Progressive Enhancement. Es nutzt native Formulare und arbeitet mit Standard-Browser-APIs – und trotzdem lassen sich moderne SPAs und SSR-Anwendungen realisieren.

Warum Remix interessant ist:

• Ideal für Apps, die auch ohne JavaScript funktionieren sollen
• Shopify als Haupt-Sponsor → starke Zukunftschancen
• Sauberes SSR, gutes Routing, serverseitige Daten-Loader
• Nested Routing: Komplexe UI-Strukturen werden elegant abgebildet

Praxisbeispiel:

// app/routes/products.$productId.tsx
import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData, Form } from "@remix-run/react";

export async function loader({ params }: LoaderFunctionArgs) {
  const product = await getProduct(params.productId);
  if (!product) {
    throw new Response("Product not found", { status: 404 });
  }
  return json({ product });
}

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const quantity = formData.get("quantity");
  
  // Add to cart logic
  await addToCart({ productId, quantity });
  
  return redirect("/cart");
}

export default function Product() {
  const { product } = useLoaderData<typeof loader>();
  
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      
      <Form method="post">
        <input type="number" name="quantity" defaultValue="1" />
        <button type="submit">Add to Cart</button>
      </Form>
    </div>
  );
}

Qwik – Resumability statt Rehydration

Qwik verfolgt einen revolutionären Ansatz: Statt dass eine App im Browser nachgeladen (rehydrated) werden muss, setzt Qwik auf Resumability – die App „startet” einfach dort, wo der Server aufgehört hat.

Das Qwik-Konzept:

• Besonderheit: Sofort interaktiv, auch bei komplexen Apps
• Noch jung, aber technologisch extrem spannend
• Gut geeignet für Projekte, die maximale Performance brauchen
• Lazy Loading auf Stereoiden: Jede Funktion wird nur geladen, wenn sie gebraucht wird

Praxisbeispiel:

// src/components/counter.tsx
import { component$, useSignal } from '@builder.io/qwik';

export const Counter = component$(() => {
  const count = useSignal(0);
  
  return (
    <div>
      <p>Count: {count.value}</p>
      <button 
        onClick$={() => count.value++}
        class="btn"
      >
        Increment
      </button>
    </div>
  );
});

Das $ in onClick$ signalisiert Qwik, dass diese Funktion lazy geladen werden soll.

Content-Alternativen

Eleventy (11ty) – schlank und flexibel

Eleventy ist ein JavaScript-basierter Static-Site-Generator, der auf Schlichtheit und Flexibilität setzt.

Stärken:

• Unterstützt viele Template-Sprachen: Nunjucks, Liquid, Markdown, Handlebars, Pug
• Beliebt in der Open-Source- und Content-Community
• Weniger „fancy” als Astro, aber robust und stabil
• Ideal für Blogs, Dokumentationen, kleine und mittlere Content-Seiten

Konfigurationsbeispiel:

// .eleventy.js
module.exports = function(eleventyConfig) {
  // Copy static assets
  eleventyConfig.addPassthroughCopy("src/assets");
  
  // Add a custom filter
  eleventyConfig.addFilter("dateFormat", (date) => {
    return new Date(date).toLocaleDateString('de-DE');
  });
  
  // Add a collection for blog posts
  eleventyConfig.addCollection("posts", (collection) => {
    return collection.getFilteredByGlob("src/posts/*.md");
  });
  
  return {
    dir: {
      input: "src",
      output: "_site"
    }
  };
};

Eleventy repräsentiert die klassische Alternative zu Astro, wenn Einfachheit im Vordergrund steht.

⚖️ Aktiv, aber eher klassisch

Hugo – Geschwindigkeit pur

• Go-basiert, unglaublich schnell (Builds in Millisekunden)
• Riesige Community und viele Themes
• Eher konservative Template-Sprache (Go Templates)
• Für große Content-Sites nach wie vor stark

MkDocs – Python für Dokumentation

• Spezialisiert auf Dokumentationsseiten
• Nutzt Markdown als Input
• Besonders im DevOps- und Data-Science-Bereich verbreitet
• Material Theme ist sehr professionell

Zola – Rust-basiert und blitzschnell

• Rust als Unterbau → sehr performant und speichersicher
• Kleinere, aber aktive Community
• Interessant für Entwickler, die Performance und Typsicherheit schätzen
• Tera Templates (ähnlich Jinja2)

Die „alten Bekannten”

Jekyll – der frühere Standard

• Ruby-basiert, lange Zeit das Standard-Framework (z. B. GitHub Pages)
• Wird noch gepflegt, aber neue Projekte greifen eher zu Astro oder Eleventy
• Status: Wartungsmodus – funktioniert, aber nicht mehr zeitgemäß

Ember.js – einst ein Schwergewicht

• Früher große Rolle bei SPAs (2010er Jahre)
• Heute wirkt es schwerfällig, Community ist kleiner geworden
• Convention over Configuration war damals innovativ
• Für neue Projekte kaum attraktiv

Andere weniger aktive Vertreter

• Brunch – Build-Tool aus einer anderen Zeit, praktisch tot
• Gridsome – Vue-basiert, aber durch Nuxt.js überholt
• Elder.js – Svelte-SSG, aber durch SvelteKit abgelöst
• Slate – für API-Dokumentationen, Nischenprodukt
• GitBook – mittlerweile SaaS-Plattform, kein klassisches Framework mehr

Performance-Vergleich in der Praxis

Eine Einschätzung der Build-Performance basierend auf realen Projekten:

Framework	Build-Zeit (1000 Seiten)	Entwickler-Experience	Lernkurve
Hugo	~500ms	Mittel	Steil
Zola	~800ms	Gut	Mittel
Astro	~2s	Sehr gut	Flach
Eleventy	~3s	Gut	Flach
SvelteKit	~4s	Sehr gut	Mittel
	Remix	~5s	Gut

Bundle-Size-Vergleich

Die Client-Bundle-Größe ist entscheidend für Performance und User Experience:

Framework	Minimal Bundle	Typisches Projekt	Hydration
Astro	~0KB (rein statisch)	~5-15KB	Optional (Islands)
SvelteKit	~2KB	~20-40KB	Vollständig
Qwik	~1KB (initial)	~10-20KB	Keine (Resumable)
Remix	~25KB	~50-80KB	Vollständig
Next.js	~85KB	~120-200KB	Vollständig
Gatsby	~50KB	~100-150KB	Vollständig

Key Takeaway: Astro und Qwik haben die kleinsten Bundles, da sie JavaScript nur bei Bedarf ausliefern.

TypeScript-Integration

Moderne Frameworks bieten unterschiedlich starke TypeScript-Unterstützung:

Erstklassige TypeScript-Unterstützung:

• Astro: Native .ts/.tsx-Unterstützung, automatische Type-Inference
• SvelteKit: Vollständige TypeScript-Integration mit svelte-check
• Remix: React + TypeScript, starke Typisierung für Loader/Actions
• Qwik: TypeScript-first, starke Typen für alle APIs

Code-Beispiel SvelteKit mit TypeScript:

// src/routes/api/users/+server.ts
import type { RequestHandler } from './$types';
import { json } from '@sveltejs/kit';

interface User {
  id: number;
  name: string;
  email: string;
}

export const GET: RequestHandler = async ({ url }) => {
  const limit = Number(url.searchParams.get('limit')) || 10;
  
  const users: User[] = await fetchUsers(limit);
  
  return json(users);
};

Testing-Strategien

Unit & Integration Tests:

Astro:

# Vitest für Unit-Tests
npm install -D vitest

SvelteKit:

# Vitest + Testing Library
npm install -D vitest @testing-library/svelte

Remix:

# Jest + React Testing Library
npm install -D jest @testing-library/react

E2E-Tests:

Alle Frameworks unterstützen Playwright oder Cypress:

// tests/e2e/homepage.spec.ts
import { test, expect } from '@playwright/test';

test('homepage loads correctly', async ({ page }) => {
  await page.goto('/');
  await expect(page.locator('h1')).toContainText('Welcome');
});

Migration zwischen Frameworks

Von Jekyll/Hugo zu Astro:

Strategie:

1. Markdown-Inhalte direkt übernehmen
2. Layouts in Astro-Komponenten konvertieren
3. Frontmatter-Struktur anpassen

Aufwand: Relativ gering für kleine Sites, da Content direkt übernommen werden kann

Von Gatsby zu Astro:

Herausforderungen:

• GraphQL-Queries durch Content Collections ersetzen
• React-Komponenten können beibehalten werden (Islands)
• Plugins müssen neu evaluiert werden

Aufwand: Moderat bis hoch, je nach Komplexität der GraphQL-Queries und Custom-Plugins

Von Next.js zu Remix:

Strategie:

1. Pages zu Routes konvertieren
2. getServerSideProps/getStaticProps zu Loader-Functions
3. API-Routes zu Action/Loader-Pattern

Aufwand: Signifikant, besonders bei komplexen Apps mit vielen API-Routes

Entscheidungsmatrix

Kriterium	Astro	SvelteKit	Remix	Qwik	Eleventy
Content-First	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐
App-First	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐
Performance	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
DX	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐
Ökosystem	⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐	⭐⭐⭐
Lernkurve	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐	⭐⭐	⭐⭐⭐⭐⭐
TypeScript	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
Community	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐	⭐⭐⭐
Enterprise-Ready	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐

Deployment-Landschaft 2025

Deployment ist kein Problem mehr. Alle modernen Frameworks unterstützen:

Edge-Plattformen:

• Cloudflare Pages
• Vercel
• Netlify
• AWS Amplify

Traditionelle Hosting-Optionen:

• GitHub Pages (statisch)
• Self-hosted mit Docker
• CDN + Object Storage (S3 + CloudFront)

Beispiel Cloudflare Pages Deployment:

# wrangler.toml
name = "my-astro-site"
compatibility_date = "2024-01-01"

[build]
command = "npm run build"
cwd = "."

[[build.environment_variables]]
NODE_VERSION = "18"

Empfehlungen für 2025

Die Landschaft teilt sich 2025 klar auf:

Primäre Empfehlungen:

1. Astro als erste Wahl, wenn Content im Vordergrund steht

   • Blogs, Marketing-Sites, Dokumentation
   • Beste Performance bei Content-Sites
   • Framework-Flexibilität

2. SvelteKit ist das modernste Framework für Apps und dynamische Projekte

   • E-Commerce, Dashboards, SaaS-Plattformen
   • Beste Developer Experience
   • Zukunftssicher

Spannende Zukunftskandidaten:

3. Remix und Qwik sind die Kandidaten, die Standards neu definieren könnten
   • Remix für standardkonforme Web-Apps
   • Qwik für maximale Performance

Solide Alternativen:

4. Eleventy ist eine schlanke, klassische Alternative für Content
5. Hugo, MkDocs und Zola sind stabil und aktiv, aber nicht mehr cutting-edge

Historisch interessant:

6. Jekyll, Ember und Co. sind vor allem aus historischer Sicht interessant

Auswahlhilfe: Welches Framework für welches Projekt?

Content-Site (Blog, Unternehmenswebsite):

→ Astro (modern) oder Eleventy (klassisch)

E-Commerce / SaaS-Plattform:

→ SvelteKit oder Remix

Dokumentation:

→ MkDocs (Python-Umfeld) oder Astro (modern)

Maximale Performance erforderlich:

→ Hugo (Build) oder Qwik (Runtime)

Legacy-Migration:

→ Astro (Framework-Flexibilität)

Alle genannten Frameworks laufen out-of-the-box auf Cloudflare Pages. Deployment ist damit keine Frage mehr von Hosting-Limits, sondern eine reine Architektur-Entscheidung.

Zusammenfassung

Die Framework-Landschaft 2025 bietet Lösungen für jeden Anwendungsfall:

Für Content-Sites dominieren Astro und Eleventy durch minimalen JavaScript-Overhead und exzellente Performance.

Für dynamische Anwendungen führen SvelteKit und Remix das Feld an – mit unterschiedlichen Philosophien aber gleichermaßen starken Developer-Experience.

Für Performance-Critical-Apps zeigt Qwik innovative Ansätze, die die nächste Generation von Frameworks prägen könnten.

Die Zukunft gehört Frameworks, die sowohl für Entwickler als auch für Endnutzer optimiert sind – und die Auswahl ist 2025 größer und besser als je zuvor.