API JSON e server-side rendering
Prima di iniziare: le parole della lezione
- API web e rappresentazione
- Un’API web offre operazioni tramite HTTP. Una rappresentazione è il formato con cui una risorsa viene descritta al client, per esempio JSON o HTML.
- Rendering, SSR e CSR
- Rendering significa costruire la vista. SSR, Server-Side Rendering, la costruisce sul server; CSR, Client-Side Rendering, la costruisce nel browser usando JavaScript.
- Template engine ed escaping
- Un template engine combina un modello di pagina con dati. L’escaping trasforma caratteri speciali per visualizzarli come testo anziché interpretarli come markup.
Il corso distingue due modalità: API, che restituiscono normalmente dati come JSON, e SSR, in cui il server genera HTML per il browser. Sono approcci combinabili.
app.get('/api/profilo', (req, res) => {
res.json({ id: 1, nome: 'Sara' });
});
app.get('/pagina', (req, res) => {
res.type('html').send('<h1>Pagina generata dal server</h1>');
});
Esempio aggiuntivo: un frontend React può chiamare /api/profilo e costruire la vista nel browser; un'app SSR potrebbe invece renderizzare lato server un template con lo stesso profilo. In entrambi i casi serve gestire correttamente errori e dati in ingresso.
Chi fa cosa, e perché
Con un’API JSON il backend recupera e controlla i dati; il frontend decide come mostrarli. Con SSR il backend recupera i dati e genera anche l’HTML della vista, spesso usando un template engine. La scelta riguarda dove si prepara la pagina, non se esista o meno un database.
Le due modalità possono convivere: un sito serve pagine HTML e offre endpoint JSON per aggiornare singole parti. Un array restituito come JSON non si trasforma da solo in una tabella: serve codice client o un template. Analogamente, servire un file HTML senza modificarlo rimane semplice distribuzione di contenuto statico.
Un altro esempio guidato
<!-- demo-client.html: servilo dalla cartella public dell'app -->
<p id="nome">Caricamento...</p>
<script>
async function carica() {
const risposta = await fetch('/api/profilo');
if (!risposta.ok) throw new Error(`HTTP ${risposta.status}`);
const profilo = await risposta.json();
document.querySelector('#nome').textContent = profilo.nome;
}
carica().catch(() => {
document.querySelector('#nome').textContent = 'Impossibile caricare';
});
</script>
Come leggerlo e risultato atteso. Usa l’endpoint /api/profilo della lezione e servi questa pagina dalla stessa app. Il browser esegue fetch, riceve JSON e aggiorna il testo con Sara. response.json() interpreta il body; textContent visualizza il nome come testo, senza inserirlo come HTML.
Prova tu. Sostituisci il percorso fetch con uno inesistente e verifica il messaggio di errore. Il controllo risposta.ok è necessario perché fetch non rigetta automaticamente per una risposta 404.