Ultra-schnelle Spring-Boot-Webseiten mit HTMX — Ohne React, ohne Komplexität

08.12.2025

Moderne Frontend-Entwicklung fühlt sich oft unnötig kompliziert an: endlose npm-Abhängigkeiten, Megabytes an JavaScript, komplexe Toolchains und Hydrationsfehler. Doch was wäre, wenn man moderne, dynamische Webseiten bauen könnte – ohne all das?

Hier kommt HTMX ins Spiel: eine leichte Bibliothek, die HTML um Attribute erweitert und dir erlaubt, serverseitig gerenderte Anwendungen interaktiv zu machen – ohne SPA.

Dieser Artikel zeigt dir, wie du mit Spring Boot + HTMX ultraschnelle Seiten baust, die einfach zu warten sind und sofort laden.

Warum Spring Boot und HTMX perfekt zusammenpassen

Im Gegensatz zu React ersetzt HTMX dein Frontend nicht. Es erweitert dein bestehendes HTML:

  • AJAX über HTML-Attribute
  • Teilaktualisierungen von Seiten
  • Kein Build-Prozess
  • Vollständige SEO-Unterstützung
  • Wenig JavaScript
  • Backend-Entwickler bleiben im bekannten Stack

Perfekt geeignet für Spring Boot + Thymeleaf.

Projekt-Setup

Einfach HTMX einbinden:

<script src="https://unpkg.com/[email protected]"></script>

Optional Hyperscript:

<script src="https://unpkg.com/[email protected]"></script>

Keine node_modules, keine Builds.

Beispiel: Dynamische Kundensuche ohne JavaScript

Controller

@Controller
@RequestMapping("/customers")
public class CustomerController {

    private final CustomerService service;

    public CustomerController(CustomerService service) {
        this.service = service;
    }

    @GetMapping
    public String viewPage() {
        return "customers/index";
    }

    @GetMapping("/search")
    public String searchCustomers(@RequestParam String q, Model model) {
        model.addAttribute("results", service.search(q));
        return "customers/_results :: results";
    }
}

Hauptseite (customers/index.html)

<div class="container">

    <h1>Kunden</h1>

    <input type="text"
           name="q"
           placeholder="Suche..."
           hx-get="/customers/search"
           hx-target="#results"
           hx-trigger="keyup changed delay:300ms" />

    <div id="results"></div>

</div>

Fragment (customers/_results.html)

<div id="results">
    <ul>
        <th:block th:each="c : ${results}">
            <li th:text="${c.name}"></li>
        </th:block>
    </ul>
</div>

Performance-Vorteile

🚀 Server-Side Rendering
Seiten laden schneller, da der Server renderfertiges HTML sendet, nicht JSON, das von JavaScript in DOM-Knoten umgewandelt werden muss.

⚡ Minimales JavaScript
HTMX ist ca. 14 kB groß. React + ReactDOM = ca. 120+ kB, bevor Ihr eigener Code überhaupt beginnt.

🔍 Bessere SEO
Suchmaschinen sehen den vollständigen HTML-Inhalt, nicht nur ein von JavaScript erzeugtes Grundgerüst.

📦 Geringerer Netzwerkbedarf
Der Browser lädt nur das Nötigste – HTML-Fragmente, keine kompletten Single-Page-Anwendungen (SPAs).

🧠 Einfacheres Zustandsmanagement
Der Server ist die zentrale Datenquelle. Kein Synchronisieren von Client- und Serverzustand, kein Redux, keine Kontextanbieter.

🛠 Einfachere Architektur
Sie stellen eine einzige Spring-Boot-Anwendung bereit. Kein Node.js. Kein Build-Prozess. Weniger Komponenten = weniger Fehler.

Formularbeispiel mit HTMX

<form hx-post="/orders/create"
      hx-target="#orderTable"
      hx-swap="outerHTML">
    <input type="text" name="product" required />
    <input type="number" name="quantity" required />
    <button type="submit">Hinzufügen</button>
</form>

<div id="orderTable"></div>

Controller:

@PostMapping("/create")
public String createOrder(OrderForm form, Model model) {
    service.create(form);
    model.addAttribute("orders", service.findAll());
    return "orders/_table :: table";
}

Wann HTMX besser ist als React

Ideal für:

  • Formulare, Dashboards, Portale
  • Klassische business-lastige Anwendungen
  • Admin-Oberflächen
  • SEO-relevante Seiten
  • Teams mit Fokus auf Backend

Wann React sinnvoll bleibt

  • Offline-fähige Apps
  • Interaktive Tools
  • Canvas-intensive Anwendungen
  • Komplexe Echtzeit-Anwendungen

Bonus-Tipps

Gzip/Brotli aktivieren

server.compression.enabled=true

Templates minifizieren

HTMLCompressor funktioniert hervorragend.

Fragmente cachen

hx-boost aktivieren

<html hx-boost="true">

Fazit

Mit HTMX und Spring Boot bekommst du:

  • schnellere Webseiten
  • weniger Komplexität
  • deutlich weniger JavaScript
  • vollständige SEO
  • einfachere Deployments

Für viele Unternehmensanwendungen ist das der beste Ansatz.

Über den Autor

Dejan Antanasković ist ein Software­entwickler mit über zwei Jahrzehnten praktischer Erfahrung im Entwurf, der Entwicklung und Wartung robuster Backend- und Frontend-Systeme – von wissenschaftlichen und georäumlichen Anwendungen bis hin zu komplexen Web- und Mobilplattformen.