Strategie avanzate di caching
Implementi strategie avanzate di caching, inclusi gli header di caching HTTP e l'integrazione con una CDN, per ottenere la massima velocità.
Strategie avanzate di caching è una lezione Next.js 15 Fullstack (App Router + Server Actions) gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Next.js 15 Fullstack (App Router + Server Actions), e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Next.js 15 Fullstack (App Router + Server Actions) include 4 lezioni in totale.
Oltre la cache di base di Next.js
Ha imparato a conoscere la cache integrata di Next.js per il recupero dei dati. Ma le prestazioni web comprendono molto di più. Le strategie di caching avanzate sfruttano l'intera infrastruttura web, inclusi browser e proxy.
Questa lezione approfondisce gli header di caching HTTP e le Content Delivery Network (CDN) per aumentare notevolmente la velocità e l'efficienza dell'applicazione.
Controllare la cache del browser e dei proxy
Gli header di caching HTTP sono istruzioni inviate dal server al browser del client o ai server proxy intermedi. Questi header indicano per quanto tempo e in quali condizioni è possibile memorizzare nella cache una risposta.
- Latenza ridotta: il contenuto viene caricato più rapidamente dalla cache locale.
- Minore utilizzo della banda: viene trasferita una quantità inferiore di dati sulla rete.
- Carico ridotto sul server: il server non deve generare ripetutamente la stessa risposta.
`max-age`, `public`, `private`
L'header Cache-Control è la direttiva HTTP di caching più potente. Stabilisce come, dove e per quanto tempo è possibile memorizzare una risposta nella cache.
max-age=<seconds>: per quanto tempo una risorsa può essere memorizzata nella cache dal browser (anche la cache condivisa rispetta questo valore).s-maxage=<seconds>: sostituiscemax-agenelle cache condivise (CDN e proxy).public: qualsiasi cache, del browser o del proxy, può memorizzare la risposta.private: solo il browser del client può memorizzare la risposta nella cache; le cache condivise non possono farlo.
`no-cache`, `no-store` e altro
Altre direttive fondamentali di Cache-Control aiutano a gestire comportamenti specifici della cache:
no-cache: obbliga a riconvalidare la copia memorizzata con il server di origine prima di servirla, anche se non è scaduta.no-store: vieta qualsiasi memorizzazione della risposta nella cache; questa deve essere recuperata dal server ogni volta.must-revalidate: richiede la riconvalida delle cache scadute e non consente di servire contenuti obsoleti.
Utilizzi queste direttive con attenzione per bilanciare aggiornamento e prestazioni.
Implementazione degli header di caching
Può impostare gli header HTTP nei Server Components o nelle route API di Next.js utilizzando la funzione headers() da next/headers oppure direttamente sull'oggetto Response.
Questo esempio imposta un header Cache-Control per la pagina di un Server Component.
import { headers } from 'next/headers';
export default function ProductsPage() {
// Set Cache-Control header for this page's response
headers().set('Cache-Control', 'public, max-age=3600, s-maxage=86400');
return (
<main>
<h1>Our Products</h1>
<p>This content is highly cacheable!</p>
</main>
);
}Riconvalida efficiente con ETag
Anche con la cache, a volte il contenuto può cambiare. Gli header ETag (Entity Tag) e Last-Modified consentono ai browser di chiedere al server: "Questo contenuto è cambiato dall'ultima volta che l'ho recuperato?"
ETag: identificatore univoco di una versione specifica di una risorsa.Last-Modified: data e ora dell'ultima modifica della risorsa.
Se il contenuto non è cambiato, il server risponde con lo stato 304 Not Modified, risparmiando banda.
Content Delivery Network (CDN)
Una Content Delivery Network (CDN) è una rete distribuita geograficamente di server proxy e data center. Il suo obiettivo è garantire elevata disponibilità e prestazioni distribuendo il servizio in posizioni geograficamente vicine agli utenti finali.
La si può immaginare come un sistema che conserva copie degli asset statici del sito (immagini, CSS, JS) e persino dei contenuti dinamici, se configurato, più vicino agli utenti di tutto il mondo.
Le CDN migliorano le prestazioni di Next.js
L'integrazione di una CDN con Next.js offre vantaggi significativi:
- Portata globale: I contenuti vengono distribuiti dal server più vicino, riducendo la latenza per gli utenti di tutto il mondo.
- Riduzione del carico sull'origine: La CDN gestisce la maggior parte delle richieste, alleggerendo il carico sul server principale.
- Maggiore affidabilità: Il traffico viene distribuito, rendendo l'app più resiliente ai picchi.
- Sicurezza avanzata: Molte CDN offrono protezione DDoS e altre funzionalità di sicurezza.
Next.js `assetPrefix`
Per le risorse statiche, come le immagini nella directory public, Next.js esegue automaticamente l'ottimizzazione. Per indicare esplicitamente a Next.js di distribuire queste risorse da una CDN, è possibile configurare assetPrefix in next.config.js.
Questa opzione antepone un URL a tutte le risorse statiche, assicurando che vengano richieste dalla CDN.
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
assetPrefix: 'https://cdn.example.com',
// ... other Next.js configs
};
module.exports = nextConfig;Vercel e il caching edge
Quando si esegue il deploy di Next.js su Vercel, si usufruisce automaticamente della sua Edge Network globale, che funziona come una CDN integrata.
Vercel memorizza nella cache in modo intelligente le risorse statiche e le risposte dei Server Component nelle edge location, sfruttando s-maxage per ottenere prestazioni ottimali senza configurare manualmente una CDN.
Questo "caching edge" è una potente forma di integrazione con una CDN, già incorporata nella piattaforma.
Sfida su Cache-Control
Sta creando un'applicazione Next.js. Ha una pagina che mostra informazioni pubbliche sui prodotti, che cambiano raramente, e vuole che browser e CDN la memorizzino nella cache per un giorno. Allo stesso tempo, desidera che le cache condivise, come le CDN, eseguano nuovamente la validazione dopo 1 ora, se possibile, senza obbligare il browser a eseguire nuovamente la validazione nell'arco di un giorno.
Riepilogo del caching avanzato
Ottimo lavoro! Ha imparato a sfruttare strategie avanzate di caching per le applicazioni Next.js.
- Ha esplorato gli header HTTP
Cache-Control(max-age,s-maxage,public,private,no-cache,no-store). - Ha visto come implementare questi header nei Server Component di Next.js.
- Ha approfondito il ruolo delle CDN e il modo in cui migliorano la distribuzione globale dei contenuti.
- Infine, ha esaminato la Edge Network di Vercel come potente soluzione CDN integrata.
Queste tecniche sono fondamentali per creare applicazioni web scalabili e ad alte prestazioni!
Impara TypeScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 22
- Lezioni
- 88
Domande Frequenti
La lezione «Strategie avanzate di caching» è gratuita?
Sì — il testo completo di «Strategie avanzate di caching» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Next.js 15 Fullstack (App Router + Server Actions), passa a CoddyKit PRO. Il corso Next.js 15 Fullstack (App Router + Server Actions) include 4 lezioni in totale.
Cosa imparerò in «Strategie avanzate di caching»?
Implementi strategie avanzate di caching, inclusi gli header di caching HTTP e l'integrazione con una CDN, per ottenere la massima velocità. Eserciti Next.js 15 Fullstack (App Router + Server Actions) con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Next.js 15 Fullstack (App Router + Server Actions)?
Non è richiesta alcuna esperienza precedente. Next.js 15 Fullstack (App Router + Server Actions) su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Strategie avanzate di caching»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Next.js 15 Fullstack (App Router + Server Actions)?
Sì. Ogni lezione Next.js 15 Fullstack (App Router + Server Actions) include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Ottimizzazione di immagini e font
- Analisi delle dimensioni del bundle
- Strategie avanzate di caching
- UI in streaming con Suspense e stati di caricamento