Statische vs. dynamische Websites: Ein umfassender Vergleich

Tutorials

Wenn viele Menschen an eine Website denken, kommt das Konzept von statischen gegenüber dynamischen Websites nie zur Sprache. Schließlich erscheint die Website einfach, oder? Technisch gesehen ja, aber hinter den Kulissen passiert eine Menge.

Für jemanden, der plant, eine Website zu erstellen oder zu migrieren, ist es wichtig, diese beiden Arten von Websites zu kennen. Die Art der Website, die Sie wählen, beeinflusst, wie Entwickler die Website verwalten und aktualisieren und mögliche Betriebs- und Wartungskosten.

In diesem Artikel erfahren Sie, welche Unterschiede es zwischen statischen und dynamischen Websites gibt. Sie werden sehen, wie Entwickler statische und dynamische Websites erstellen, wie Ihr Browser sie rendert und viele andere nützliche Vergleiche.

Was sind statische und dynamische Websites?

Static Website

Wie der Name schon sagt, sind die Elemente einer statischen Website fest oder fest codiert. Der Inhalt einer statischen Website ändert sich unabhängig vom verwendeten Browser nie.

A static website only serves HTML, CSS, and Javascript client-side code. It doesn’t have to process any kind of computations once a reader accesses the page. The browser handles any code for dynamic content such as buttons or input.

Die meisten statischen Websites haben einen informativen Charakter. Nehmen wir zum Beispiel persönliche Blogs, bei denen es darum geht, Informationen für Leser anzuzeigen. Auf einem persönlichen Blog durchsuchen Benutzer in der Regel nur den Inhalt der Website.

Dynamic Website

Umgekehrt geht eine dynamische Website über den Client-Seitigen Code hinaus. Letztendlich basiert eine dynamische Website auf HTML und CSS, ähnlich wie eine statische Website. Doch damit eine dynamische Website funktioniert, benötigt sie serverseitige Sprachen wie PHP, ASP.net oder JavaScript, um den HTML-Code dynamisch zu generieren.

Dynamische Websites verwenden den Begriff CRUD, was für Create, Read, Update und Delete steht. CRUD repräsentiert Operationen, die gegen eine Datenbank durchgeführt werden. Und wenn du vermutest, dass dynamische Websites Datenbanken verwenden, dann hast du richtig geraten!

Unterschiede in der Website-Darstellung

Wie liefern Webserver statische und dynamische Websites an die Browser der Benutzer aus?

Statische Websites liefern den Code genau so, wie er auf dem Webserver vorhanden ist

Denke daran, dass statische Websites aus fest codierten HTML-Dokumenten mit optionalen CSS- und JS-Dateien bestehen. Der Code, den du auf einen Webserver hochlädst, wird genau so an die Benutzer ausgeliefert, die deine Website besuchen.

Nachfolgend finden Sie ein Beispiel für ein statisches Website-Projekt in Visual Studio Code mit drei Dateien. Die Homepage dieser statischen Website zeigt nur eine Überschrift und einen Button an.

Wenn Sie auf den Button auf dieser einfachen Webseite klicken, wird ein Wort angezeigt.

Static Website Project in Visual Studio Code

Nachfolgend finden Sie den Code der Datei index.html. Diese dient als Startseite der statischen Website.

<!-- index.html -->
<html>
    <head>
        <title>Static Site Test</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Static Web Test</h1>
        <div>
            <button>Click to see what happens</button>
        </div>
        <p style="display: none;">Surpise!!!</p>
        <script src="button.js"></script>
    </body>
</html>

Der nächste Code unten ist für die Datei style.css. Diese CSS-Datei definiert den Stil, wie die Elemente der Startseite im Browser angezeigt werden.

/* style.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button {
    background: lightgrey;
    color: black;
    border: 1px solid darkgray;
    font: inherit
}

Zuletzt enthält der folgende Code den Code für die Datei button.js, die den JavaScript-Code enthält, der vom Browser ausgelöst wird, wenn ein Benutzer auf den Button klickt.

// button.js
var btn = document.querySelector('button')
btn.addEventListener('click', function() {
    document.querySelector('p').style.display = 'block'
})

Angenommen, die statische Website ist jetzt online. Die folgende Demo zeigt, wie sie aussehen würde. Wenn Sie dann den Quellcode der Seite öffnen, sollten Sie feststellen, dass der Code der Seite genau dem Quellcode der Datei index.html entspricht.

Hinweis: Dieses Beispiel für eine statische Website wurde unter Verwendung der Erweiterung HTTP Server / HTML Preview in Visual Studio Code getestet.

Static Web Example

Wie Sie im obigen Demo sehen können, ändert sich der zugrunde liegende Code selbst dann nicht, wenn der Benutzer mit der Seite interagiert, indem er auf eine Schaltfläche klickt. Das ist das Verhalten einer statischen Website; der Browser erledigt alles.

Dynamische Websites lesen zuerst eine Datenbank

Im Gegensatz zu einer statischen Website verwendet eine dynamische Website serverseitige Verarbeitung, um den Code zu generieren. Das bedeutet, dass sich der zugrunde liegende Code hinter der Seite jederzeit ändern kann, je nach Design.

Im Folgenden finden Sie ein Beispiel für ein dynamisches Website-Projekt in Node.js, das nur eine JavaScript-Datei enthält.

Dynamic Website Project in Visual Studio Code

Der Code für dynamicsite.js wird unten angezeigt. Dieser Code ist ein serverseitiges Skript, das jedes Mal, wenn die Seite geladen wird, die aktuelle Computerzeit anzeigt.

// dynamicsite.js
var web = require('http');

web.createServer(function (req, res) {
    let xTime = new Date().toISOString().match(/(\d{2}:){2}\d{2}/)[0]
    res.end(
        '<h1 style="font-family:verdana">Dynamic Site Test</h1>' +
        '<p style="font-family:verdana">The time now is: <b>' + xTime + '</b></p>'
    );
}).listen(8080);

Das folgende Demo zeigt, wie die dynamische Website angezeigt wird. Der zugrunde liegende HTML-Code ändert sich jedes Mal, wenn die Seite aktualisiert wird.

Hinweis: Dieses dynamische Website-Beispiel wurde mit Node.js getestet.

Dynamic Website Example

Das ist nun ein grundlegendes Beispiel dafür, wie sich eine dynamische Website im Hintergrund verhält.

Statische vs. dynamische Websites: Wie werden Inhalte verwaltet?

Jetzt wissen Sie, wie statische und dynamische Websites gerendert und bereitgestellt werden. Wie fügen Sie jedoch Inhalte hinzu, aktualisieren oder löschen sie? Angenommen, Sie haben eine statische persönliche Blog-Website, wie fügen Sie neue Beiträge hinzu? Wenn Sie eine dynamische E-Commerce-Website haben, wie fügen Sie neue Produkte in Ihren Katalog ein?

Die Art der Website bestimmt, wie Sie den Inhalt Ihrer Website verwalten. Unten finden Sie die typischen Optionen für das Content-Management.

Statisches Hard-Coding

Wenn eine Website oder ihr Inhalt aktualisiert werden muss, erfolgt dies fast immer durch Änderungen im Code. Die grundlegendste und wahrscheinlich älteste Methode ist das Hard-Coding. Diese Methode beinhaltet das Bearbeiten des Quellcodes der Website mit einem beliebigen Texteditor.

Diese Methode kann am mühsamsten und zeitaufwändigsten sein, da jeder Aspekt der Website manuell codiert werden muss. Dies gibt jedoch statischen Websites die Flexibilität in Bezug auf das Design, da jede Seite unterschiedlich sein kann.

Einige Websites mit einfachem Design und Funktion können ihren Inhalt in Markdown schreiben. Anschließend können diese Markdown-Dokumente in HTML konvertiert werden, um Webseiten zu erstellen, die dann auf den Webserver hochgeladen werden können.

Zum Beispiel besteht die folgende statische Website aus drei Seiten: index.html, page1.html und page2.html. Obwohl diese Dateien Teil einer einzigen statischen Website sind, wurden sie mit unterschiedlichen Designs oder Themes geschrieben.

Example of a static website with different page themes

Statische Website-Generatoren

Statt den Code manuell zu schreiben, bieten statische Website-Generatoren die Möglichkeit, eine vollständige statische Website entweder von Grund auf oder mithilfe von Vorlagen zu erstellen. Neue Beiträge oder Seiten werden in der Regel in Markdown geschrieben und während des Website-Build-Prozesses werden HTML-Dateien generiert.

Die resultierenden Dateien können dann auf einen Webserver hochgeladen werden, um die Website zum Leben zu erwecken. In einigen statischen Website-Generatoren ist es auch möglich, Inhalte in anderen Formaten wie reinem HTML und JSON zu schreiben.

Hier ist eine Liste einiger der beliebtesten statischen Website-Generatoren, die Sie erkunden können.

Die untenstehende Beispiel-Website wurde mit Jekyll generiert, ohne dass eine einzige Zeile Code geschrieben werden musste.

A static website generated by Jekyll

Content-Management-System (CMS)

Bis jetzt haben Sie wahrscheinlich von WordPress gehört. Wie wäre es mit Drupal, Joomla und Netlify? Dies sind die Namen der beliebtesten Content-Management-Systeme oder CMS.

A CMS is a tool used for creating content on a website without having to write a single line of code. Think of it as the GUI editor where you can create your content without understaning the underlying code.

Dynamische Websites sind in der Regel mit einem CMS verbunden. Tatsächlich sind Website-Baukästen und CMS bereits in den meisten Webhosting-Paketen enthalten und können mit einem Mausklick (oder wenigen Klicks) bereitgestellt werden. CMS ist wahrscheinlich der Grund, warum dynamische Websites die beliebtere Wahl sind.

Statische Websites können auch mit einem CMS konfiguriert werden. Zum Beispiel bietet Netlify Integrationssupport für statische Site-Generatoren wie Jekyll, Hugo und NextJS. Die Einrichtung der CMS-Integration mit diesen Plattformen erfordert jedoch in der Regel mehr Arbeit im Vergleich zu dynamischen Websites.

Wann man eine statische Website gegenüber einer dynamischen Website verwendet

Wenn Sie sich fragen, wann die alte Frage beantwortet wird, „Welche ist besser?“, können Sie weiter warten. Es wird wahrscheinlich keinen eindeutigen Gewinner geben. Ob eine dynamische oder statische Website besser ist, hängt davon ab, welche Anforderungen Sie haben.

Es gibt viele Faktoren zu berücksichtigen, wenn Sie den Typ der Website wählen. Nachfolgend sind nur einige der Faktoren aufgeführt, die berücksichtigt werden sollten.

Factor Static Website Dynamic Website
Cost Static sites are typically cheaper to host. They can even be hosted for free using GitHub Pages. Because of the expected extra processing requirement, dynamic websites may need a more capable hosts. Higher host specs usually means higher cost.
Content Management To update content, coding skills will be required to write HTML or Markdown (and other languages). There are established and emerging headless CMS options that support static websites. Established and popular content management systems already exists such as WordPress, Drupal, and Joomla.
Updating content may never need a developer’s involvement. Users would be able to manage content on their own. This could translate to development or maintenance cost savings in the long run.
Extensibility Add-ins may not be available to static websites. But, third party services may be integrated into a static website. Some examples are Disqus and MailChimp. There are tools and add-ins that can extend the functionality and optimization of dynamic websites.
Security Securing a static website can be more complex due to JavaScript running on the browser and can be exploited.
This is not to say that static websites cannot be secured. It’s just that developers need to be more creative for security.		 Dynamic website security may be easier to achieve as there are already best practices, libraries and tools that are included in server-side languages.
Complexity Knowing HTML, CSS and JavaScript are the basic coding skills for static website development.
Other languages may be needed only if you use static site generators.		 Typically requires more web development skills and knowledge of more programming languages.
Backup/Recovery Only files are being backed up. If the website crashes, files can be restored to recover a static website. There may be a need for more complex backup. In addition to backing up the website, there may be databases that need to be backed up as well.
Static vs Dynamic Website

Schlussfolgerung

Wenn Sie bereits eine Website besitzen, wissen Sie wahrscheinlich bereits, ob Sie eine statische oder dynamische Website haben. Wenn nicht, haben Sie in diesem Artikel gelernt, wie man zwischen diesen beiden Typen unterscheidet.

A static website does not mean that what you see on the page does not change at all. It only means that the content or underlying code is pre-built and never changes. Each time a reader views a page from a static website, the same code is served over and code.

A dynamic website does not mean that no homepage or HTML code is being served. Instead, the server generates the HTML page dynamically. Each request to the dynamic website may yield different content, and the HTML code behind the page typically changes.

Wenn Sie nur planen, eine neue Website zu erstellen, hängt Ihre Wahl weitgehend von ihrem Zweck ab. Zum Beispiel eignen sich E-Commerce- und Recruitment-Websites möglicherweise besser als dynamisch. Eine Blog- oder Portfolio-Website hingegen kann mit einer statischen Website ausreichend sein.

Statische Websites sind der Ursprung und werden wahrscheinlich nie verschwinden. Vor allem jetzt, da statische Site-Generatoren immer beliebter werden. Dynamische Websites werden sich nur verbessern, da die weitere Entwicklung kontinuierlich stattfindet.

Weiterführende Informationen

Schauen Sie sich unbedingt diese anderen ATA-Beiträge an, wenn Sie mehr über statische und dynamische Websites erfahren möchten.

Source:
https://adamtheautomator.com/static-vs-dynamic-website/