Direkt zum Hauptinhalt springen

Statische Webseiten oder dynamische Webseiten

Der Unterschied zwischen statischen und dynamischen Webseiten und wann man beide verwendet.

Verwendung einer Schreibmaschine

Foto von rawpixel auf Unsplash

Einleitung

Bei der Erstellung von Webseiten kommen verschiedenste Technologien zum Einsatz, die sich auch alle paar Monate ändern können. Die Grundprinzipien bleiben jedoch weitestgehend gleich:

  • Dynamisches serverseitiges Rendern
  • Statisches serverseitiges Bereitstellen
  • Clientseitiges Rendern

Am Ende wird dem Browser ein HTML Dokument vorgelegt, egal welches Prinzip oder Mischung dieser Prinzipien zur Berechnung der Inhalte verwendet wird.

Clientseitiges Rendern, also Javascript welches im Browser des Webseiten-Besuchers ausgeführt wird, lasse ich in diesem Artikel aus. Man kann dies in Verbindung mit beiden hier behandelten Prinzipien verwenden.

Einfach gesagt: Webbrowser wie Firefox und Chrome laden von einer Adresse ein HTML Dokument, lesen und verarbeiten dieses und zeigen dann die Inhalte an.

Was meine ich mit “statisch”?

Mit “statisch” meine ich, dass das fertige HTML Dokument schon am Server vorgefertigt bereit liegt und nur vom Browser geladen werden muss. Diese HTML Dokumente muss man schon lange nicht mehr per Hand erstellen. Dazu gibt es Statische Generatoren, wie Hugo, Jekyll u.v.a.

Diese Seite wurde mit Hugo erstellt.

Was meine ich mit “dynamisch”?

Mit “dynamisch” meine ich, dass HTML Dokumente am Server vor dem Laden noch errechnet werden müssen. Zum Beispiel mit Daten aus einer Datenbank oder von Schnittstellen (APIs). Programmiersprachen wie PHP, Python, Java, Ruby etc., aber auch Javascript (Node) können hier zum Einsatz kommen.

Alles hat Vorteile und Nachteile

Vorteile dynamischer Webseiten
  • Dynamisch: Jeder Besucher kann eine auf ihn zugeschnittene Webseite gezeigt bekommen.
  • Inhalte können direkt über sogenannte “Content Management Systeme” (CMS) bearbeitet, neu erstellt oder gelöscht werden. Dies ist auch für nicht-technische Mitarbeiter einfach möglich.
Nachteile dynamischer Webseiten
  • Meist langsamer: Die Berechnung des HTML Dokuments geschieht oft erst nach dem Aufrufen der Webseite vom Besucher. Daten müssen zuerst noch aus einer Datenbank abgefragt werden. (Caching hilft hier.)
  • Der Webserver benötigt mehr Ressourcen für die Berechnung.
  • Pflegeintensiv: Oft treten Sicherheitslücken bei dynamischen Systemen auf. Wenn es Benutzerinput gibt, gibt es oft Probleme.
Vorteile statischer Webseiten
  • Schneller: Das HTML Dokument ist fertig und wartet auf den Download.
  • Der Webserver benötigt weniger Ressourcen, weil es keine Berechnung gibt.
  • Sicherer: Es gibt keinen Benutzerinput, keine SQL Injektion oder ähnliche Sicherheitslücken, die direkt auf der Webseite ausgenützt werden können.
  • Leicht zu pflegen: Es gibt keine CMS Systeme, oder Programmiersprachen die upgedated werden müssen.
Nachteile statischer Webseiten
  • Statisch: Allen Besuchern wird die gleiche Seite angezeigt. (Dies ist nicht immer ein Nachteil!)
  • Änderungen sind für nicht-technische Mitarbeiter nicht direkt möglich.

Wann sollte man was verwenden?

Es kommt immer darauf an welche Vorlieben, Arbeitsweise und Ressourcen der Besitzer der Webseite hat:

  • Will der Besitzer selbst als nicht-technischer Mensch Inhalte direkt erstellen, ändern und löschen können? Dann dynamisch!

  • Bleibt die Seite über lange Zeiträume vom Inhalt her gleich? Dann statisch!

  • Will man sich nicht viel um die Seite kümmern? Dann statisch!

  • Soll die Seite für verschiedene Besucher verschiedene Inhalte anzeigen? Dann dynamisch!

… und so weiter.

Jeder Koch verwendet seinen eigen Brei

Im Bereich Webentwicklung war es immer schon so, dass oft und viel neu erfunden wird. Neue Programmiersprachen, neue Frameworks, überall wird innoviert. Wenn Ressourcen kein Problem sind werden oft maßgeschneiderte Systeme erstellt. Kombinationen zwischen dynamisch, statisch und clientseitig sind hier keine Seltenheit.

Oder man wärmt sich was auf

Ressourcen sind nicht endlos? Kein Problem: Dynamische Opensource CMS Systeme wie Wordpress sind sehr beliebt. Statische Opensource CMS Systeme wie Hugo, oder Jekyll sind im Kommen.

Grenzen verschwimmen immer mehr

Javascript lässt immer mehr innovative Möglichkeiten zu maßgeschneiderte Systeme für das Web zu erstellen.

Kombinationen sind King: Headless Wordpress als API und Vue zum Rendern wäre ein Beispiel.

Was ich anbiete

  • Statische Webseiten mit Opensource CMS Systemen wie Hugo.
  • Dynamische Webseiten mit Opensource CMS Systemen wie Wordpress.
  • Dynamische maßgeschneiderte Webseiten und Webapps mit Django, Flask, Vue, Angular etc.

Neue Projekte erstelle ich gerne mit neuen Frameworks.

Pro Tip

Statische HTML Dokumente können am Server auch direkt mit gzip komprimiert abgelegt werden (nginx, apache etc. richtig einstellen!). Das beschleunigt noch mal Einiges, weil Besucher und deren Browser kleinere Dokumente herunterladen wenn sie die Seite aufrufen.

Nach Erstellung meiner Webseite lasse ich eine Variation folgender Befehlszeile laufen um automatisch meine HTML, JS, CSS, XML und SVG Dokumente mit gzip zu komprimieren:

# Suche im dist/ Ordner nach Dateien mit den Endungen .html, .js, .css, .xml und .svg,
# dann komprimiere diese mit gzip so, dass git und rsync nur geänderte Dateien erkennen.

find dist/ -type f \( -name '*.html' -o -name '*.js' -o -name '*.css' -o -name '*.xml' -o -name '*.svg' \) -exec gzip -kn --best --rsyncable {} \;

Stichworte

Kategorien