Zurück zur Startseite

HTML API Generierung auf dem Server ohne Rendering

Der Artikel erklärt, warum die Generierung von HTML-Text auf dem Server ein grundlegender Ansatz für Webdienste ist. Beispiele in Python ohne Abhängigkeiten, Vergleich der HTML API mit JSON. Templating-Engines und die Rolle des Browsers beim Rendering werden besprochen.

HTML als API: Server liefert Text, Browser rendert
Advertisement 728x90

HTML als API generieren: Ein Server, der reinen Text zurückgibt

Die Erstellung eines serverseitigen Webdienstes ist einfach: Antwortet auf HTTP-Anfragen mit reinem Text im HTML-Format. Dieser grundlegende, zuverlässige Ansatz erfordert keine zusätzlichen Abhängigkeiten. Der Browser übernimmt die gesamte komplizierte Darstellung automatisch.

Hier ist ein minimaler Python-Server mit dem eingebauten http.server-Modul. Er liefert für jede GET-Anfrage eine statische HTML-Seite:

from http.server import BaseHTTPRequestHandler, HTTPServer

WEBPAGE = "<h1>Python-Seite!</h1>\n"

class HTMLServer(BaseHTTPRequestHandler):
    def do_GET(self):
        self.send_response(200)
        self.end_headers()
        self.wfile.write(str.encode(WEBPAGE))

webServer = HTTPServer(("localhost", 8080), HTMLServer)
print("Server läuft unter http://localhost:8080")
webServer.serve_forever()

Mit curl sehen Sie sauberen, rohen Text:

Google AdInline article slot
$ curl localhost:8080
<h1>Python-Seite!</h1>

Im Browser wird das <h1>-Tag als formatierter Überschrift dargestellt. Fügen Sie CSS für Stilierung hinzu:

WEBPAGE = """
<style>
body {
  background-color: lightblue;
  font-family: 'Comic Sans MS', cursive;
}
</style>
<h1>Python-Seite!</h1>
"""

Der Browser wendet die Stile sofort an – keine zusätzlichen Schritte erforderlich.

Die Darstellung ist Aufgabe des Browsers

Der Server generiert Text; der Browser parsst ihn in DOM, berechnet Stile, bestimmt Layout und setzt Schriftarten mit korrektem DPI, Letter-spacing und Metrik. Dieser mehrstufige Prozess umfasst Parsing, Stilberechnung, Layout und Zeichnung.

Google AdInline article slot

Die Darstellung erfordert tiefgehendes Wissen über Typografie – von der Umrechnung von Punkten in Pixel bis zur Handhabung von Auf- und Abstandshöhen. Browser übernehmen all diese Komplexität für Sie.

HTML-Generierung ist nichts anderes als String-Manipulation. Kein Bedarf für Fachjargon wie "server-side rendering", der unnötige Komplexität suggeriert.

HTML zur Darstellung von Daten nutzen

Jede Art von Daten kann durch einfache String-Vorlagen als HTML dargestellt werden. Hier ein Beispiel mit den Boroughs von New York City:

Google AdInline article slot
boroughs = [
  "The Bronx",
  "Manhattan",
  "Brooklyn",
  "Queens",
  "Staten Island"
]

LIST = "<li>".join(boroughs)
WEBPAGE = "<h1>NYC Boroughs</h1><ul><li>" + LIST + "</ul>"

Der Browser verarbeitet dies korrekt – auch ohne abschließende </li>-Tags (HTML5 ist nachsichtig).

Ebenso für JSON:

LIST = '","'.join(boroughs)
WEBPAGE = '{ "nyc_boroughs": ["' + LIST + '"] }'

HTML gewinnt hier: Es enthält native Hypermedia-Funktionen – Links, Formulare – ohne Client-seitige JavaScript-Abhängigkeit.

  • Vorteile der stringbasierten HTML-Generierung:

- Funktioniert in jeder Sprache ohne Bibliotheken.

- Minimaler Overhead.

- Einfach zu debuggen: curl zeigt rohe Ausgabe.

- Plattformübergreifende Kompatibilität (bash, awk, Python).

HTML-API statt JSON-API

Nennen Sie es eine HTML-API: Der Server gibt HTML statt JSON zurück. Der Browser fungiert als Client und interpretiert Hypermedia.

Vergleichen Sie:

HTML:

<h1>NYC Boroughs</h1>
<ul>
  <li>The Bronx
  <li>Manhattan
  <li>Brooklyn
  <li>Queens
  <li>Staten Island
</ul>

JSON:

{
  "nyc_boroughs": [
    "The Bronx",
    "Manhattan",
    "Brooklyn",
    "Queens",
    "Staten Island"
  ]
}

HTML bündelt Daten und Darstellung. JSON liefert nur Daten – clientseitiger Logik zum Rendern ist nötig.

Template-Engines für Produktionsumgebungen

Für echte Dienste verwenden Sie Template-Engines wie Jinja2. Sie bieten Escaping, Schleifen, Vererbung und Struktur.

Beispiel mit Jinja:

<h1>NYC Boroughs</h1>
<ul>
  {% for borough in boroughs %}
  <li>{{ borough }}
  {% endfor %}
</ul>
  • Wichtige Vorteile von Template-Engines:

1. Automatisches HTML-Escaping zur Vermeidung von XSS.

2. Wiederverwendbare Fragmente (Partials).

3. Native Syntax für Ihre Sprache (Htmx für Rust, Zig).

4. Zustandslose Architektur – einfach zu testen und debuggen.

5. Kein Hydratierungs-Overhead wie bei SPAs.

Im Gegensatz zu React, wo JSON auf dem Client in DOM hydratiert wird, generieren Templates vollständig gerenderte HTML-Seiten serverseitig.

Was zählt wirklich

  • Der Server gibt HTML-Text aus – der Browser übernimmt die Darstellung.
  • Eine HTML-API liefert Hypermedia, nicht bloße JSON-Daten.
  • String-Operationen funktionieren überall, ohne Frameworks.
  • Template-Engines bringen Sicherheit und Struktur.
  • Dieser Ansatz skaliert in jeder Programmiersprache.

— Editorial Team

Advertisement 728x90

Weiterlesen