// technologien
Frontend
Das Frontend entscheidet, was Besucher tatsächlich sehen – und wie schnell. Ich baue Oberflächen server-seitig gerendert, damit Inhalte im ausgelieferten HTML stehen und nicht erst nach dem Ausführen von JavaScript entstehen. Welches Framework zum Einsatz kommt, richtet sich nach dem Projekt und danach, wer die Anwendung später pflegt.
// einsatz
Wie ich das einsetze
Server-Rendering als Standard
Seiten werden auf dem Server gerendert und als fertiges HTML ausgeliefert. Das verkürzt die Zeit bis zum ersten sichtbaren Inhalt und ist die Voraussetzung dafür, dass Suchmaschinen und Sprachmodelle den Text vollständig erfassen.
Komponenten statt Seitenschablonen
Wiederkehrende Bausteine – Karten, Formulare, Navigation – existieren einmal und werden überall verwendet. Eine Änderung am Baustein wirkt auf allen Seiten, statt dass Layouts über die Zeit auseinanderlaufen.
Typen an der Schnittstelle
TypeScript beschreibt, welche Daten eine Komponente erwartet. Fehlende oder falsch benannte Felder fallen beim Bauen auf und nicht im laufenden Betrieb.
Mobil zuerst, zugänglich von Anfang an
Layouts entstehen ab der kleinsten Breite und wachsen nach oben. Semantische Elemente, sichtbarer Tastaturfokus und ausreichende Kontraste gehören zur Umsetzung, nicht in eine spätere Nachbesserung.
// im detail
Die einzelnen Technologien
Next.js
React-Framework mit Server-Rendering, Routing und Bildoptimierung ab Werk. Meine Standardwahl für neue Projekte, weil sich statische Seiten, server-gerenderte Inhalte und API-Endpunkte in einer Codebasis abbilden lassen. Diese Website läuft selbst darauf.
React
Bibliothek für komponentenbasierte Oberflächen und die Grundlage unter Next.js. Direkt eingesetzt, wenn eine bestehende Anwendung darauf aufbaut oder nur ein einzelner interaktiver Bereich in eine sonst klassische Seite eingebettet wird.
TypeScript
JavaScript mit Typprüfung. Der Gewinn liegt weniger beim ersten Schreiben als bei jeder späteren Änderung: Umbenennungen und Umbauten zeigen sofort, welche Stellen noch angepasst werden müssen.
Vue.js
Alternative zu React mit flacherem Einstieg. Sinnvoll, wenn ein Team ohne React-Erfahrung die Anwendung später selbst pflegt oder ein bestehendes Vue-Projekt fortgeführt wird.
Nuxt.js
Das Server-Rendering-Framework für Vue – im Vue-Ökosystem das, was Next.js für React ist. Kommt zum Einsatz, wenn Vue gesetzt ist und die Seite trotzdem vollständig indexierbar sein muss.
Tailwind CSS
Utility-Klassen direkt im Markup statt getrennter Stylesheets. Der eigentliche Vorteil ist nicht Schreibgeschwindigkeit, sondern das Ausbleiben ungenutzter CSS-Regeln, die später niemand zu löschen wagt.
// auswahl
Wonach ich auswähle
- 01
Wer pflegt die Anwendung später?
Die Antwort wiegt oft schwerer als technische Feinheiten. Ein Stack, den das Team nicht bedienen kann, erzeugt Abhängigkeit statt Nutzen.
- 02
Wie viel Interaktivität braucht die Seite wirklich?
Viele Seiten sind Inhalt mit wenigen interaktiven Inseln. Dann wird JavaScript nur dort geladen, wo es gebraucht wird, statt die ganze Seite in eine Anwendung zu verwandeln.
- 03
Was ist bereits vorhanden?
Bei bestehenden Projekten wiegt Kontinuität schwerer als persönliche Vorliebe. Ein funktionierendes Vue-Projekt wird weitergeführt und nicht aus Prinzip auf React umgeschrieben.
// faq
Häufige Fragen
Warum server-seitiges Rendering?
Weil der Inhalt sonst erst nach dem Ausführen von JavaScript existiert. Suchmaschinen, Vorschauen in Messengern und Sprachmodelle sehen im ungünstigsten Fall eine leere Seite. Server-Rendering liefert den Text direkt im HTML aus.
Ist eine Single-Page-Anwendung nicht schneller?
Nach dem Laden häufig ja, davor selten. Der erste Aufruf muss zuerst das JavaScript-Bündel holen und ausführen. Für Seiten, die über die Suche gefunden werden, zählt genau dieser erste Aufruf.
Kann ein bestehendes Design übernommen werden?
Ja. Vorlagen aus Figma oder ein vorhandenes Layout lassen sich als Komponenten umsetzen. Wo Angaben fehlen – Zwischengrößen, Zustände, Fehlerfälle –, kläre ich sie vorab, statt sie stillschweigend zu erfinden.
// passend dazu
Wo das zum Einsatz kommt
Passt das zu deinem Vorhaben?
Welche Technologie sinnvoll ist, ergibt sich aus dem Vorhaben – nicht andersherum. Beschreib kurz, was entstehen soll; du bekommst eine Einschätzung dazu, was dafür passt und was nicht.
// weitere