Statisk eller dynamisk website?

HTML

Browsere som IE, Edge, Chrome, Firefox m.fl. arbejder med HTML, som er et opmærkningssprog eller markup language. Sider skrevet ved hjælp af HTML består af indhold der er omgivet af forskellige HTML elementer som bestemmer hvordan indholdet af siden skal gengives i browseren. Det kan f.eks. se således ud:

<h1>Overskrift</h1>
<p>Afsnit i artiklen</p>
<p>Næste afsnit</p>

Elementerne <h1>, </h1>, <p> og </p> vises ikke i browseren, men bruges i stedet til at bestemme hvordan indholdet vises - f.eks. vil en overskrift som regel blive vist med en større skrift end artiklens brødtekst.

Både dynamiske og statiske websites sender indhold til browseren i form af HTML - forskellen mellem de to typer af websites ligger i måden som denne HTML bliver dannet på.

Statisk website

På et statisk website ligger indholdet i form af HTML filer på serveren. Når en bruger besøger en URL på et statisk website, så finder webserverens den HTML fil der matcher URL'en og sender den til browseren. Serveren ændrer ikke på sidens indhold inden den sendes til browseren - heraf betegnelsen statisk website.

I et statisk website ligger alt indholdet i HTML filer. Helt små statiske websites kan derfor laves uden brug af andre værktøjer end et program til tekstredigering. Indhold og HTML elementer skrives i hånden, og de færdig sider uploades til serveren hvorefter websitet er klar.

En simpel HTML side kan se således ud:

<!doctype html>
<html>
<head>
    <title>Statisk website</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>Overskrift</h1>
    <p>Afsnit i artiklen</p>
    <p>Nyt afsnit</p>
</body>
</html>

(I praksis vil en færdig HTML side som regel være meget mere omfattende end dette eksempel, nogle hundrede linjer er ikke ualmindeligt.)

De fleste websites består af mere end én side. Hvis vi tilføjer en ny artikel kan denne skrives på samme måde som den foregående:

<!doctype html>
<html>
<head>
    <title>Statisk website</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>Nyhed</h1>
    <p>Tekst i nyheden</p>
    <p>Mere tekst</p>
</body>
</html>

Hvis man bliver ved med at tilføje nye websider på denne måde, så opdager man hurtigt to ting

  1. Store dele af HTML koden gentages på hver eneste side. I eksemplerne ovenfor er det således kun indholdet mellem <body> og </body> elementerne der er forskelligt på de to sider, resten er gentagelser.
  2. Vedligeholdelse af websitet bliver hurtigt meget besværlig på grund af de mange gentagelser. Hvis man f.eks. har 25 sider der ligner eksemplerne ovenfor og vil ændre teksten efter <title> elementet til "Mit statiske website" på alle websitets sider, så skal man lave den samme rettelse i 25 forskellige HTML filer.

HTML generators

Hvis man laver statiske websites der består af flere end nogle få sider, så vil man normalt ikke skrive alle HTML-siderne i hånden. I stedet kan man bruge et HTML generator værktøj som f.eks. Jekyll, Hugo, Wintersmith eller lignende til at generere HTML på en mere effektiv måde.

En website generator giver blandt andet mulighed for at benytte skabeloner der f.eks. kan være skrevet ved hjælp af liquid. De dele af HTML-koden der bruges igen og igen på websitet - f.eks. sidernes headere og footere - gemmes i form af templates. Når websitets indhold skal udgives dannes de færdige HTML-sider ved at kombinere skabeloner og indhold. Derved undgår man at skrive den samme HTML-kode igen og igen, og website generators gør det derfor muligt at bygge og vedligeholde selv store statiske websites.

Dynamisk website

Dynamiske websites bygges med brug af et content management system, f.eks. Drupal, WordPress eller Joomla. I et dynamisk website ligger indholdet i en database. Inden en side kan sendes til browseren skal webserveren derfor hente indholdet i databasen og omdanne det til HTML.

Konvertering af databaseindhold til HTML sker ved hjælp af skabeloner, der typisk er skrevet i programmeringssproget PHP. En simpel WordPress sideskabelon til at omdanne en artikel i databasen til HTML kan f.eks. se således ud:

<?php
get_header();
if ( have_posts() ) { 
  while ( have_posts() ) {
    the_post(); ?>
    <h1><?php the_title(); ?></h1>
    <?php the_content(); ?> 
  } 
}
get_footer();

get_header() og get_footer() funtionskaldene i PHP-koden ovenfor danner HTML til sidens header og footer ud fra separate PHP skabeloner, så i dette eksempel skal artiklen fra databasen kombineres med tre forskellige skabeloner for at danne den færdige HTML.

Med et statisk website skal webserveren blot finde den rigtige HTML-side og sende den til browseren. Med et dynamisk website skal serveren:

  1. Starte en PHP proces på serveren
  2. Finde den rigtige sideskabelon i filsystemet og de skabeloner der indeholder headeren og footeren
  3. Behandle get_header() kaldet og indsætte den korrekte header som HTML
  4. Behandle PHP-koden i sideskabelonen som henter sideindholdet
  5. Hente artiklens titel (the_title()) og indhold (the_content()) i databasen og indsætte som HTML
  6. Behandle get_footer kaldet og indsætte den korrekte HTML markup nederst på siden
  7. Sende den færdige HTML til browseren

Servere der håndterer dynamiske websites skal med andre ord løse en opgave der er lange mere kompliceret og ressourcekrævende end det er tilfældet med et statisk website.

Fordele ved statiske websites

Skal man så vælge en statisk eller dynamisk løsning når man skal bygge en ny hjemmeside?

Rigtig mange små websites er dynamiske. De er lavet ved hjælp af WordPress, fordi der er forholdsvis let at bygge et pænt og funktionelt website ved hjælp af færdige temaer og plugins (som i mange tilfælde er helt gratis at bruge). WordPress har også et effektivt og brugervenligt kontrolpanel der gør det let at oprette og vedligeholde indhold, og hvis man løber ind i problemer er det som regel let at finde hjælp på nettet fordi WordPress er så udbredt.

Mange ejere af WordPress websites (og andre dynamiske websites) har imidlertid også oplevet nogle ulemper:

  • Svartiderne er nogle gange længere end man kunne ønske sig. Især hjemmesider der er bygget ved hjælp af stardardtemaer og plugins kan være "tunge" for serveren at behandle, fordi de forskellige dele er udviklet til brug i mange forskellige sammenhænge og derfor ofte indeholder mere funktionalitet end der er brug for på et givet website. Men også mere strømlinede WordPress websites kan give problemer hvis de køres på billig webhosting hvor behovet for serverressourcer i perioder overstiger hvad der er til rådighed.

  • WordPress er også let at gå til for hackere, der kan downloade færdige værktøjer til at udnytte kendte svagheder. Det er absolut nødvendigt at holde WordPress, plugins og temaer opdateret løbende hvis man vil undgå at bliver hacket, og selv med de seneste opdateringer kan man stadig være udsat hvis der er sikkerhedshuller som udviklerne ikke har fået lukket.

  • Små fejl i koden eller en opdatering af server-softwaren kan kan betyde at websitet pludselig ikke længere kan vises.

  • Det kan være vanskeligt at få udseende og funktionalitet til at være præcis som man ønsker det fordi det kan være vanskeligt at finde ud af præcis hvor den linje PHP-kode der skal ændres befinder sig.

Statiske websites stiller langt færre krav til serverressourcer og vil derfor som regel være hurtigere end et tilsvarende website baseret på WordPress eller Drupal placeret på den samme server. De er ikke et attraktivt mål for hackere, og der er ikke noget behov for løbende opdateringer og anden vedligeholdelse.

Statiske websites er som regel upåvirkede af server-opdateringer, og det er ofte lettere at finde og rette eventuelle problemer der skyldes fejl i websitets kode. (Af samme grund starter vi ofte med at lave en statisk udgave med Jekyll når vi skal lave et lidt større website i WordPress eller Drupal - så får vi det grundlæggende på plads inden vi går i gang med de mere avancerede dele).

Fordele ved dynamiske websites

Der er selvfølgelig også begrænsninger og ulemper forbundet med statiske websites.

  • Opdatering af indhold på et statisk website er mere kompliceret end at skrive eller redigere et indlæg i WordPress. Man skal have et vist kendskab til HTML, og hvis man bruger en website generator skal denne først installeres og konfigureres.

  • Fordi indholdet i et dynamisk website ligger i en database, har man en række muligheder for at hente og vise indhold som man ikke har med et statisk website. Et dynamisk website til et rejsebureau kan f.eks. automatisk holde op med at vise en rejse når alle pladserne er solgt.

  • Dynamiske websites giver en lang række muligheder som man ikke umiddelbart har med en statisk løsning. Man kan f.eks skjule websitets indhold helt eller delvist bag et login, eller man kan automatisk tilpasse indholdet til den enkelte besøgende.

Dynamiske websites er med andre ord mere fleksible end tilsvarende statiske løsninger, og denne fleksibilitet opvejer i mange tilfælde ulemperne.

Dynamisk eller statisk?

Ovenstående giver kun et groft rids af de forskellige fordele og ulemper forbundet med de to forskellige typer af websites. For eksempel er det muligt at for at reducere serverbelasting og dermed gøre et dynamisk website hurtigere gennem forskellige former for caching, og forskellige tjenester som f.eks. DISCUS kan bruges til at tilføre dynamisk funktionalitet til et statisk website.

Hvis man planlægger et nyt website, så kan man starte med at overveje om en statisk løsning dækker behovet. Hvis man ikke selv skal stå for udviklingsarbejdet er det som regel hurtigere og billigere at få bygget et statisk website, og hvis websitets indhold kun lejlighedsvis skal opdateres er der ingen grund til at have besværet med at vedligeholde et content management system. Driftsomkostningerne med et statisk website som regel også lavere, fordi man ikke behøver at betale for "premium" eller "pro" hosting - et statisk website vil være hurtigt næsten uanset hvilken webhost man vælger.