Was ist Svelte & SvelteKit?

Svelte ist ein Compiler

Die meisten Frontend-Frameworks (React, Vue) sind Laufzeit-Bibliotheken: Der Browser lädt das Framework und dieses sorgt zur Laufzeit dafür, dass die Oberfläche mit deinen Daten synchron bleibt (Stichwort „Virtual DOM").

Svelte geht einen anderen Weg. Es ist ein Compiler: Zur Build-Zeit verwandelt Svelte deine Komponenten in kleines, gezieltes JavaScript, das genau die DOM-Knoten aktualisiert, die sich wirklich ändern. Es gibt kein Framework, das mitgeliefert wird — nur deinen kompilierten Code.

Der Unterschied in Code

In React sagst du dem Framework über useState/setState explizit, wann etwas neu gerendert wird:

// React: du beschreibst, WANN neu gerendert wird
function Zaehler() {
  const [count, setCount] = useState(0);
  // setCount triggert ein Re-Render der ganzen Funktion
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

In Svelte 5 markierst du mit der $state-Rune einfach eine Variable als reaktiv — und änderst sie wie eine ganz normale Variable:

<script>
  // Svelte: du beschreibst, WAS reaktiv ist — den Rest macht der Compiler
  let count = $state(0);
</script>

<button onclick={() => count++}>{count}</button>

# Rails rendert einmal auf dem Server:
class ZaehlerController < ApplicationController
  def show
    @count = 0   # danach ist Schluss — für "+1" braucht es einen neuen Request
  end
end

Svelte vs. SvelteKit

Zwei Begriffe, die zusammengehören, aber Unterschiedliches meinen:

• Svelte ist die Sprache/Komponenten-Ebene — vergleichbar mit ERB + Stimulus: Wie sieht eine Komponente aus, wie ist sie reaktiv?
• SvelteKit ist das Anwendungs-Framework drumherum — vergleichbar mit Rails selbst: Routing, Server-Rendering, Datenladen, Formulare, API-Endpunkte, Build & Deployment.