Come fare l'auto-refresh di una pagina web (HTML meta refresh / JavaScript)

Far ricaricare automaticamente una pagina web è utile per dashboard, monitoraggio, aste, risultati live, pagine di stato. Due metodi principali: Meta tag HTML (semplice, lato client) e JavaScript (più controllo).

Metodo 1: Meta Tag HTML (Nel <head>)

<meta http-equiv="refresh" content="30">

content="30" = ricarica ogni 30 secondi. Cambia il numero per intervallo diverso (secondi).

Redirect opzionale: <meta http-equiv="refresh" content="5; url=https://nuova-pagina.com"> (ricarica nuova-pagina.com dopo 5 sec).

Posizionamento: Dentro <head> ... </head> del documento HTML.

Metodo 2: JavaScript (Più flessibile)

<script>
  // Ricarica pagina corrente ogni 30 secondi
  setInterval(function() {
    location.reload();
  }, 30000); // 30000 ms = 30 sec
</script>

Vantaggi: Puoi condizionare (es. solo se utente inattivo, solo se tab attiva via document.visibilityState), mostrare countdown, aggiornare solo parte pagina (AJAX/Fetch) invece di ricarica completa (migliore UX, meno banda).

Esempio JavaScript "Intelligente" (Aggiorna solo se tab visibile)

<script>
  const INTERVAL_MS = 30000; // 30 sec
  setInterval(() => {
    if (document.visibilityState === 'visible') {
      location.reload();
    }
  }, INTERVAL_MS);
</script>

Metodo 3: Header HTTP (Lato Server - Apache / Nginx / PHP / Node / IIS)

Più efficiente: il server dice al browser di ricaricare.

• Apache (.htaccess): Header set Refresh "30"
• Nginx: add_header Refresh "30";
• PHP: header("Refresh: 30"); (prima di qualsiasi output).
• Node.js (Express): res.set('Refresh', '30');
• IIS (web.config): <httpProtocol><customHeaders><add name="Refresh" value="30" /></customHeaders></httpProtocol>

Considerazioni UX e SEO

• Non abusare: Refresh continuo infastidisce utenti, consuma banda/CPU, impedisce lettura, rompe cronologia browser (Back button).
• Accessibilità: WCAG 2.1 SC 2.2.1 (Timing Adjustable): utenti devono poter disattivare/estendere timer. Fornisci pulsante "Pausa auto-aggiornamento".
• SEO: Googlebot non esegue meta refresh / JS refresh come navigazione utente. Contenuto aggiornato via refresh non è indicizzato come nuovo. Per contenuti dinamici indicizzabili: Server-Side Rendering (SSR) / Next.js / Nuxt / PHP template + aggiornamento DB.
• Alternative moderne: WebSockets / Server-Sent Events (SSE) / Polling AJAX/Fetch parziale (aggiorna solo dati cambiati, es. fetch('/api/data').then(r=>r.json()).then(updateUI)). Molto meglio di full reload.

Esempio pratico: Dashboard stato server (AJAX ogni 10s, no full reload)

<div id="server-status">Caricamento...</div>
<script>
  async function updateStatus() {
    try {
      const res = await fetch('/api/server-status');
      const data = await res.json();
      document.getElementById('server-status').innerHTML = `
        CPU: ${data.cpu}% | RAM: ${data.ram}% | Disk: ${data.disk}% | Up: ${data.uptime}
      `;
    } catch (e) {
      document.getElementById('server-status').textContent = 'Errore connessione';
    }
  }
  setInterval(updateStatus, 10000); // 10 sec
  updateStatus(); // Subito
</script>