Siti web statici vs dinamici: un confronto completo – techsyncer

Quando molte persone pensano a un sito web, il concetto di siti web statici vs dinamici non entra mai in gioco. Dopotutto, il sito web appare semplicemente, giusto? Tecnicamente sì, ma ciò che succede dietro le quinte è molto importante.

Per qualcuno che pianifica di creare o migrare un sito web, conoscere questi due tipi di siti web è essenziale. Il tipo di sito che scegli avrà un impatto su come gli sviluppatori gestiscono e aggiornano il sito e sui possibili costi operativi e di manutenzione.

In questo articolo, imparerai quali sono le differenze tra siti web statici e dinamici. Vedrai come gli sviluppatori creano siti statici e dinamici, come il tuo browser li rende e molte altre utili comparazioni.

Cosa sono i siti web statici e dinamici?

Come suggerisce il nome, gli elementi di un sito web statico sono fissi o codificati. I contenuti di un sito web statico non cambiano mai indipendentemente dal tipo di browser che si utilizza.

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.

La maggior parte dei siti web statici ha natura informativa. Prendi ad esempio i blog personali, dove l’obiettivo è mostrare informazioni ai lettori. Su un blog personale, gli utenti di solito semplicemente navigano i contenuti del sito.

Al contrario, un sito web dinamico va oltre il codice lato client. Fondamentalmente, un sito web dinamico si basa su HTML e CSS, proprio come un sito web statico. Tuttavia, affinché un sito web dinamico sia funzionale, richiede linguaggi lato server come PHP, ASP.net o JavaScript per generare dinamicamente il codice HTML.

I siti web dinamici utilizzano il termine CRUD, che sta per Create, Read, Update, Delete. CRUD rappresenta le operazioni eseguite su un database. E se hai indovinato che i siti web dinamici utilizzano i database, hai indovinato giusto!

Differenze nell’elaborazione dei siti web

Come i server web consegnano siti web statici e dinamici ai browser degli utenti?

I siti web statici consegnano esattamente il codice presente sul server web

Ricorda che i siti web statici contengono documenti HTML codificati con file CSS e JS opzionali. Qualunque codice tu carichi su un server web sarà esattamente il codice che verrà fornito agli utenti che navigano sul tuo sito web.

Ad esempio, di seguito è riportato un esempio di progetto di un sito web statico in Visual Studio Code che contiene tre file. La homepage di questo sito web statico mostra solo un’intestazione e un pulsante.

Quando si fa clic su un pulsante in questa semplice pagina web, una parola verrà rivelata.

Static Website Project in Visual Studio Code

Di seguito è riportato il codice del file index.html. Questo serve come homepage del sito web statico.

<!-- 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>

Il codice successivo riportato è per il file style.css. Questo file CSS definisce lo stile di come gli elementi della homepage appaiono nel browser.

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

Infine, il codice sottostante è il codice per il file button.js che contiene il codice JavaScript che il browser attiverà quando un utente fa clic sul pulsante.

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

Supponiamo che il sito web statico sia ora online, la demo di seguito è come apparirebbe. Quindi, se apri il codice sorgente della pagina, dovresti vedere che il codice della pagina è esattamente lo stesso del codice sorgente del file index.html.

Nota: Questo esempio di sito web statico è stato testato utilizzando l’estensione HTTP Server / HTML Preview in Visual Studio Code.

Come puoi vedere dalla demo sopra, anche se l’utente interagisce con la pagina cliccando su un pulsante, il codice sottostante non cambia mai. Questo è il comportamento di un sito web statico; il browser gestisce tutto.

I siti web dinamici leggono prima un database

A differenza di un sito web statico, un sito web dinamico utilizza un elaborazione lato server per generare il codice. Ciò significa che il codice sottostante della pagina può cambiare in qualsiasi momento, a seconda del design.

Ad esempio, di seguito è riportato un progetto di sito web dinamico con Node.js contenente solo un file JavaScript.

Dynamic Website Project in Visual Studio Code

Il codice per dynamicsite.js è mostrato di seguito. Questo codice è uno script lato server che mostra l’ora corrente del computer ogni volta che la pagina viene caricata.

// 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);

La demo qui sotto mostra come viene visualizzato il sito web dinamico. Il codice HTML sottostante cambia ogni volta che la pagina viene aggiornata.

Nota: Questo esempio di sito web dinamico è stato testato utilizzando Node.js.

Ora hai un esempio di base di come si comporta un sito web dinamico nel suo funzionamento.

Siti web statici vs dinamici: come vengono gestiti i contenuti?

Ora sai come vengono resi e serviti i siti web statici e dinamici. Ma come si aggiungono, aggiornano o eliminano i contenuti? Supponiamo di avere un sito web personale statico, come si aggiungono nuovi articoli? Se hai un sito di e-commerce dinamico, come si aggiungono nuovi prodotti al catalogo?

Il tipo di sito web definisce come gestire i contenuti del sito. Di seguito sono riportate le opzioni tipiche per la gestione dei contenuti.

Creazione di pagine statiche mediante codifica

Ogni volta che un sito web o i suoi contenuti devono essere aggiornati, ciò comporta quasi sempre modifiche nel codice. Il metodo fondamentale e probabilmente il più antico è la creazione di pagine statiche mediante codifica. Questo metodo prevede la modifica del codice sorgente del sito utilizzando un qualsiasi editor di testo.

Questo metodo può essere il più noioso e richiedere molto tempo, poiché ogni aspetto del sito web deve essere codificato manualmente. Tuttavia, ciò conferisce ai siti web statici la flessibilità nel design, poiché ogni pagina può essere diversa.

Alcuni siti web con design e funzioni semplici possono sfruttare la scrittura dei contenuti in Markdown. Successivamente, è possibile convertire questi documenti Markdown in HTML, producendo così pagine web che possono essere caricate sul server web.

Ad esempio, il sito web statico di seguito riportato ha tre pagine: index.html, page1.html e page2.html. Anche se questi file fanno parte di un unico sito web statico, sono stati scritti con design o temi diversi.

Example of a static website with different page themes

Generatori di siti web statici

Invece di scrivere manualmente il codice, i generatori di siti web statici offrono la possibilità di creare un intero sito web statico, sia da zero che da modelli predefiniti. I nuovi post o pagine vengono di solito scritti in Markdown e i file HTML vengono generati durante il processo di creazione del sito web.

I file risultanti possono quindi essere caricati su un server web per rendere il sito web attivo. In alcuni generatori di siti web statici, è anche possibile scrivere i contenuti in altri formati come HTML puro e JSON.

Di seguito è riportato l’elenco di alcuni dei generatori di siti web statici più popolari che puoi esplorare.

Il sito di esempio qui sotto è stato generato utilizzando Jekyll senza dover digitare una singola riga di codice.

Sistema di gestione dei contenuti (CMS)

Adesso, hai sentito parlare di WordPress. E cosa ne dici di Drupal, Joomla e Netlify? Questi sono i nomi dei sistemi di gestione dei contenuti o CMS più popolari.

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.

I siti web dinamici di solito si collegano a un CMS. Infatti, quando acquisti un pacchetto di web hosting, include già costruttori di siti web e CMS che possono essere implementati con un solo clic (o pochi clic) del mouse. I CMS sono probabilmente la ragione per cui i siti web dinamici sono la scelta più popolare.

I siti web statici possono essere configurati per utilizzare anche un CMS. Ad esempio, Netlify supporta l’integrazione con generatori di siti statici come Jekyll, Hugo e NextJS. Anche se l’installazione dell’integrazione con il CMS su queste piattaforme richiede di solito più lavoro rispetto ai siti web dinamici.

Quando utilizzare un sito web statico rispetto a un sito web dinamico

Se ti stai chiedendo quando verrà risposta alla vecchia domanda, “Quale è migliore?”, puoi continuare ad aspettare. Probabilmente non ci sarà un vincitore definitivo. La scelta tra un sito web dinamico o statico dipende da ciò che richiedono le tue esigenze.

Ci sono molti fattori da considerare nella scelta del tipo di sito web. Di seguito sono riportati solo alcuni dei fattori da considerare.

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

Conclusione

Se possiedi già un sito web, probabilmente sai già se hai un sito web statico o dinamico. In caso contrario, dovresti aver appreso in questo articolo come distinguere tra questi due tipi.

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.

Se stai solo pianificando di creare un nuovo sito web, la tua scelta dipenderà principalmente dal suo scopo. Ad esempio, i siti web di e-commerce e di reclutamento potrebbero essere più adatti come siti web dinamici. Mentre un blog o un sito web di portfolio troverà sufficienti i siti web statici.

I siti web statici sono da dove tutto ha avuto inizio e probabilmente non spariranno mai. Soprattutto ora che i generatori di siti statici stanno diventando sempre più popolari. I siti web dinamici miglioreranno solo ulteriormente con lo sviluppo continuo.

Ulteriori letture

Assicurati di dare un’occhiata a questi altri articoli ATA se sei interessato a saperne di più sui siti web statici e dinamici.

Come ospitare un sito web statico Azure supportato da Cloudflare