Wer React kennt und nach mehr Performance sucht, stößt früher oder später auf SolidJS. Auf den ersten Blick sieht Solid-Code fast wie React aus: JSX-Syntax, Komponenten als Funktionen, vertraute Konzepte. Doch unter der Oberfläche funktioniert SolidJS grundlegend anders – und das hat erhebliche Auswirkungen auf Performance und Entwicklererfahrung. Ryan Caravellas 2019 veröffentlichtes Framework hat sich in der Frontend-Community einen festen Platz erarbeitet, auch wenn es noch nicht die Verbreitung von React oder Vue erreicht hat.
Der entscheidende Unterschied: kein Virtual DOM
React und Vue nutzen ein Virtual DOM: Bei jeder Zustandsänderung wird ein neuer virtueller Komponentenbaum erstellt, mit dem alten verglichen (Diffing) und dann das echte DOM gezielt aktualisiert. Dieser Prozess ist intelligent, aber nicht kostenlos – er erzeugt Garbage-Collection-Druck und erfordert Laufzeit-Overhead für das Diffing.
SolidJS geht einen anderen Weg. Komponenten werden nur einmal ausgeführt, beim ersten Rendern. Das JSX kompiliert nicht zu virtuellen DOM-Knoten, sondern direkt zu echten DOM-Operationen. Reaktivität wird durch ein feingranulares Signal-System erreicht: Wenn sich ein Signal ändert, wird genau der DOM-Knoten aktualisiert, der dieses Signal liest – ohne Diffing, ohne Komponenten-Re-Render.
Das Ergebnis: SolidJS landet in nahezu allen unabhängigen Benchmarks auf den vordersten Plätzen – nah an vanillem JavaScript, aber mit dem Komfort eines modernen Frameworks.
Signals: die reaktive Grundeinheit
Signals sind das Herzstück von SolidJS. Ein Signal ist ein reaktiver Wert-Container, der automatisch Abhängigkeiten verfolgt:
import { createSignal } from 'solid-js';
const [zaehler, setZaehler] = createSignal(0);
// Signal lesen:
console.log(zaehler()); // 0
// Signal setzen:
setZaehler(1);Auffällig: zaehler ist eine Funktion, kein Wert. Das ist kein Zufall – durch den Funktionsaufruf kann SolidJS exakt verfolgen, welche Codeabschnitte das Signal "lesen" und bei Änderungen gezielt neu ausführen.
Effects und Memos
Effects (erstellt mit createEffect) sind Seiteneffekte, die automatisch ausgeführt werden, wenn sich ihre abhängigen Signals ändern:
createEffect(() => {
document.title = `Klicks: ${zaehler()}`;
});Memos (erstellt mit createMemo) sind berechnete, gecachte Werte. Sie werden nur neu berechnet, wenn sich ihre Eingabe-Signals ändern, und vermeiden so redundante Berechnungen:
const doppelt = createMemo(() => zaehler() * 2);Diese drei Primitive – Signal, Effect, Memo – bilden das gesamte reaktive System von SolidJS. Wer diese verstanden hat, hat das Kernkonzept des Frameworks erfasst.
JSX, das echtes DOM produziert
Auch wenn SolidJS JSX verwendet, kompiliert es dieses zur Build-Zeit in direktes DOM-API-Code. Es gibt keinen Framework-Runtime für das Rendering. Das bedeutet: Der ausgelieferte JavaScript-Code ist deutlich kleiner als bei React-Anwendungen, weil keine Virtual-DOM-Runtime mitgeliefert werden muss.
createEffect oder JSX-Ausdrücke.
SolidStart: das Meta-Framework
SolidStart ist das offizielle Meta-Framework für SolidJS, vergleichbar mit Next.js für React. Es bietet Server-Side Rendering (SSR), Static Site Generation (SSG), File-based Routing und API-Routen. SolidStart baut auf Vinxi auf, einem universellen App-Builder, der verschiedene Deployment-Targets (Node, Cloudflare Workers, Deno, etc.) unterstützt.
Besonders interessant ist SolidStarts Unterstützung für Server Functions (früher "Server Actions") – TypeScript-Funktionen, die auf dem Server laufen, aber direkt aus dem Client-Code aufgerufen werden können, ähnlich wie in Remix oder Next.js 13+.
Wann sollte man SolidJS verwenden?
SolidJS glänzt in Szenarien, in denen Performance kritisch ist: Dashboards mit vielen Echtzeitdaten, komplexe Animationen, interaktive Datenvisualisierungen. Auch für Entwickler, die React mögen aber die VDOM-Overhead stört, ist Solid die natürlichste Alternative – die API ist vertraut, das mentale Modell aber sauberer.
Vergleich: SolidJS vs. React vs. Svelte vs. Qwik
| Kriterium | SolidJS | React | Svelte | Qwik |
|---|---|---|---|---|
| Virtual DOM | Nein | Ja | Nein | Nein |
| Bundle-Größe (Hallo-Welt) | ~7 KB | ~45 KB | ~3 KB | ~1 KB |
| Performance (Benchmark) | Sehr hoch | Gut | Sehr hoch | Sehr hoch |
| DX / Lernkurve | Gut (React-ähnlich) | Mittel | Sehr gut | Mittel |
| Ökosystem-Reife | Wächst | Sehr reif | Reif | Jung |
| Reaktivitätsmodell | Feingranular (Signals) | Komponent-basiert | Compiler-basiert | Resumability |
SolidJS bietet das beste Gleichgewicht aus React-ähnlicher Entwicklererfahrung und hoher Performance. Wer sich für die technischen Details interessiert, findet in der offiziellen SolidJS-Dokumentation zur Reaktivität eine hervorragende Erklärung des Signal-Modells.
Häufig gestellte Fragen (FAQ)
- Kann ich meine React-Kenntnisse direkt in SolidJS einsetzen?
- Zu einem großen Teil ja. JSX, Komponenten als Funktionen und Props funktionieren ähnlich. Der wichtigste Unterschied: In Solid werden Komponenten nur einmal ausgeführt, es gibt kein Re-Rendering. Wer das verinnerlicht hat, ist schnell produktiv.
- Warum liest man Signals mit einem Funktionsaufruf (
signal()) statt direkt? - Der Funktionsaufruf ist kein Designfehler, sondern Absicht. Durch ihn kann SolidJS verfolgen, welcher reaktive Kontext das Signal gerade liest. Das ermöglicht die feingranulare Reaktivität ohne zusätzliche Proxies oder Compiler-Magie.
- Unterstützt SolidJS TypeScript?
- Ja, SolidJS bietet erstklassige TypeScript-Unterstützung. Neue Projekte werden standardmäßig mit TypeScript eingerichtet. Die Typen sind gut gepflegt und decken alle reaktiven Primitive ab.
- Ist SolidJS produktionsreif?
- Ja. SolidJS 1.0 wurde 2021 veröffentlicht und wird aktiv weiterentwickelt. Mehrere Unternehmen setzen Solid in Produktion ein. Das Meta-Framework SolidStart hat 2023 Version 1.0 erreicht. Das Ökosystem ist kleiner als das von React, aber für viele Projekte ausreichend.