Quelltext der Seite Blog:19.02.2026 Web-Rendering-Verfahren

''Hinweis: Diese Inhalte wurden mit Unterstützung von Künstlicher Intelligenz erstellt und redaktionell überprüft (Transparenzhinweis gemäß Art. 50 EU AI Act).''
----

== Web-Rendering-Verfahren ==

* '''Client-Side Rendering (CSR)''' – Ideal für interaktive Single-Page-Applications (SPAs) und desktopähnliche Webanwendungen.
* '''Server-Side Rendering (SSR)''' – Geeignet für SEO-kritische Inhalte und dynamische Websites mit häufig wechselnden Daten.
* '''Static Site Generation (SSG)''' – Perfekt für Blogs, Dokumentationen und Inhalte, die sich selten ändern.
* '''Incremental Static Regeneration (ISR)''' – Optimal für große Websites, die regelmäßige Updates mit hoher Performance benötigen.

Das sind wichtige Fragen: Soll diese Seite auch für Suchmaschinen sichtbar sein oder nicht? Im Frontend-Bereich sollte alles für SEO sichtbar sein, sonst verliert man Website-Besucher und wichtige Informationen für Suchmaschinen.

Wir sehen jetzt: Die ersten wichtigen Frontend-Webframeworks sind Angular und React. Sie sind gut, aber leider wird das Backend dann nur als REST-API-Backend genutzt, was ich schade finde.

=== Angular ===

Angular unterstützt sowohl Server-Side Rendering (SSR) als auch Static Site Generation (SSG) durch das Framework **Angular Universal**.

* '''SSR (Server-Side Rendering)''': Mit Angular Universal kann die Anwendung auf dem Server gerendert werden. Das verbessert die Ladezeit und die Sichtbarkeit für Suchmaschinen (SEO).
* '''SSG (Static Site Generation)''': Seit Angular 11 gibt es mit dem [Scully](https://scully.io/) Projekt eine Möglichkeit, statische Seiten aus Angular-Projekten zu generieren. Damit können Inhalte bereits beim Build erzeugt und als statische Dateien ausgeliefert werden.

Beide Techniken sind besonders wichtig für SEO und Performance bei größeren oder öffentlich zugänglichen Webanwendungen.

=== Next.js ===

Next.js ist ein React-Framework, das sowohl Server-Side Rendering (SSR) als auch Static Site Generation (SSG) nativ unterstützt.

* '''SSR (Server-Side Rendering)''': Mit Next.js können Seiten bei jeder Anfrage auf dem Server gerendert werden (`getServerSideProps`). Das sorgt für aktuelle Inhalte und ist ideal für dynamische, SEO-relevante Seiten.
* '''SSG (Static Site Generation)''': Mit Next.js können Seiten bereits beim Build als statische HTML-Dateien generiert werden (`getStaticProps`). Das ist optimal für Blogs, Dokumentationen und andere Inhalte, die sich selten ändern.

Next.js kombiniert beide Ansätze flexibel und ermöglicht auch sogenannte “Incremental Static Regeneration” (ISR), bei dem statische Seiten nach Bedarf im Hintergrund aktualisiert werden. Das macht Next.js besonders leistungsfähig für moderne React-Anwendungen, bei denen SEO und Performance wichtig sind.

== Asp Net Core ==

* Razor Views (.cshtml): Das ist der klassische MVC-Standard. Der Server rendert HTML und schickt es an den Browser. Ideal für SEO und klassische Webseiten.
* Blazor (Server): Damit schreibst du interaktive UIs in C# statt in JavaScript.
* HTMX: Der aktuelle Star am Himmel. Es erlaubt dir, AJAX-Anfragen direkt über HTML-Attribute zu senden (z. B. <code>hx-get=&quot;/UpdatePart&quot;</code>). Der Server antwortet mit einem kleinen HTML-Schnipsel, den HTMX automatisch in die Seite einfügt. Perfekt für MVC-Controller!
* Alpine.js: Ein Leichtgewicht für kleine Logik-Aufgaben (Dropdowns, Modals) direkt im Razor-Code, ohne dass man eine komplexe Build-Pipeline benötigt.

== Spring Boot + Thymeleaf + HTMX ==

Spring Boot ist ein populäres Java-Framework für die Entwicklung von Webanwendungen. In Kombination mit **Thymeleaf** (einem serverseitigen Template-Engine) und **HTMX** (einer modernen JavaScript-Bibliothek für dynamische Webinhalte) entsteht ein leistungsfähiges Rendering-Modell:

* '''Thymeleaf''': Ermöglicht serverseitiges Rendern von HTML-Templates. Die Templates werden mit Daten aus Spring-Controllern gefüllt und als vollständige HTML-Seiten an den Browser gesendet. Das ist ideal für SEO und klassische Webanwendungen.
* '''HTMX''': Ergänzt Thymeleaf, indem es AJAX-Anfragen direkt aus HTML-Attributen heraus ermöglicht (z. B. <code>hx-get=&quot;/api/teilbereich&quot;</code>). Der Server liefert dann nur den benötigten HTML-Teil zurück, der dynamisch in die bestehende Seite eingefügt wird – ganz ohne komplexes JavaScript.
* '''Vorteile''':
** Schnelle Ladezeiten und gute SEO, da der Großteil des HTMLs serverseitig erzeugt wird.
** Moderne Interaktivität durch HTMX, ohne dass ein komplettes Frontend-Framework wie React oder Angular nötig ist.
** Einfache Integration in bestehende Spring-MVC-Anwendungen.

Typischer Ablauf: Ein Benutzer löst eine Aktion aus (z. B. Klick auf einen Button mit <code>hx-post</code>), Spring Boot verarbeitet die Anfrage, Thymeleaf rendert das benötigte HTML-Fragment, und HTMX fügt es nahtlos in die Seite ein.

== Golang ==

In Go gibt es kein monolithisches Webframework wie in anderen Sprachen. Stattdessen kombinieren viele Entwickler mehrere spezialisierte Tools:

* '''templ''': Eine Bibliothek, mit der du HTML-Komponenten direkt in Go schreiben kannst (ähnlich wie JSX in React). Sie bietet Typsicherheit zur Compile-Zeit – wenn du einer Komponente den falschen Datentyp übergibst, schlägt der Build fehl.
* '''HTMX''': Eine kleine JavaScript-Bibliothek, die es ermöglicht, Teile einer Seite per AJAX durch HTML vom Server auszutauschen. So erhältst du ein SPA-ähnliches Nutzererlebnis, während die gesamte Logik in Go bleibt.
* '''net/http''': Das Standardpaket von Go für HTTP-Server, das als Basis für Routing und Middleware dient.

Typischer Ablauf: Der Benutzer löst eine Aktion aus (z. B. Klick auf einen Button mit <code>hx-get</code>), der Go-Server verarbeitet die Anfrage, rendert mit templ das benötigte HTML-Fragment und HTMX fügt es dynamisch in die Seite ein. So entsteht eine moderne, interaktive Webanwendung – ganz ohne komplexes JavaScript-Frontend.

== Rust ==

* Leptos: Ein reaktives Frontend-Framework für Rust, das effiziente UI-Komponenten und Server-Side Rendering unterstützt.
* Dioxus: Ein deklaratives UI-Framework für Rust, das von React inspiriert ist und sowohl für Web- als auch für Desktop-Anwendungen verwendet werden kann.

== Klassische Backend-Frameworks (SSR pur) ==

=== Asp Net Core ===

* ASP.NET Core MVC
* Razor Pages
* Blazor Static SSR

[[kategorie:19.02.2026]]

----
''Hinweis: Diese Inhalte wurden mit Unterstützung von Künstlicher Intelligenz erstellt und redaktionell überprüft (Transparenzhinweis gemäß Art. 50 EU AI Act).''