Una panoramica sul caching strategico dei contenuti dinamici alla periferia: Come funziona e perché è meglio delle CDN tradizionali.
Quando si tratta di prestazioni, la maggior parte delle CDN svolge bene alcune attività, distribuisce rapidamente file statici, fornisce l’overhead di rete per i picchi di traffico e protegge dagli attacchi DDoS a livello di rete. Storicamente ciò significava un aumento tangibile delle prestazioni e della sicurezza per risorse come immagini, video e altri contenuti statici. Con l’evolversi delle tecnologie Web, i vantaggi di cui sopra sono essenzialmente solo la posta in gioco che è stata stabilita quando le CDN sono diventate parte delle soluzioni di web delivery mainstream.
Il problema è che l’architettura CDN è stata sviluppata anni fa. L’architettura del sito web è cambiata di balzo in avanti, ma la maggior parte delle CDN non si è adattata al panorama mutevole.
Se si sta leggendo questo documento, si dispone di un sito che è probabilmente progettato con una certa quantità di contenuto dinamico di rendering lato server. Se stai usando una CDN legacy, probabilmente sei abituato a vedere qualcosa del genere nelle intestazioni delle risposte quando estri gli strumenti di sviluppo del tuo browser.
cdn-cache: superato
Sostituire il valore per questa coppia a seconda del provider: Pass, Miss o Dynamic-content. Significa tutto la stessa cosa.
“Questa risposta viene dalla tua origine perché era troppo complicata.”
E cosa significa questo per le prestazioni del tuo sito? Significa che sacrificherai la velocità perché il tuo contenuto dinamico proviene quasi sempre dalla tua origine semplice e semplice. Le pagine, gli articoli e le richieste API della categoria e dei prodotti vengono inviati direttamente all’origine quasi il 100% delle volte. La maggior parte delle CDN soffre della stessa piaga. Se sei fortunato puoi spremere circa il 10-11% delle risposte dinamiche del tuo server nella tua cache edge. Scoprirai rapidamente che non hai abbastanza controllo granulare per perfezionare le tue regole di caching per creare un sito Web che si carica istantaneamente e sembra un’app nativa.
Benvenuto a Edgio
In Edgio vantiamo la seconda CDN più grande del pianeta con oltre 300 POP distribuiti globalmente e 250 TBS di capacità. Siamo sicuri, performanti e ovunque nel mondo. Ma, come abbiamo detto prima, sono solo le poste in gioco. In Edgio, stiamo affrontando il problema della CDN da una prospettiva diversa. Invece di essere legati a regole vecchie di vent’anni, abbiamo costruito una CDN reattiva e flessibile per i prossimi vent’anni e oltre. Abbiamo sviluppato la prima CDN configurabile al mondo che offre ai tuoi sviluppatori e membri del team DevOps la flessibilità e il controllo granulare di cui avranno bisogno per distribuire siti Web in meno di un secondo.
Non è magia, è il futuro delle CDN ed è disponibile ora
A questo punto, probabilmente stai pensando che questo sembra magico, beh potrebbe sembrare così, ma non lo è, è il futuro della distribuzione di applicazioni web. Invece di separare i team DevOps e Engineering, li stiamo riunendo permettendovi di incorporare la vostra logica CDN nei vostri ambienti locali, di staging e di produzione.
Memorizza facilmente nella cache ciò che desideri, per quanto tempo vuoi
Ogni configurazione di Edgio inizia con un repository di codice che l’utente possiede e controlla. Ogni distribuzione è unica e atomica, il che significa che è possibile eseguire il rollback a qualsiasi versione in meno di un minuto. Sei libero di distribuire la configurazione insieme al tuo progetto o mantenerla in un flusso di lavoro separato. La maggior parte dei nostri clienti finisce per incorporare le proprie regole CDN nella pipeline ci/CD e nel normale flusso di sviluppo. Il risultato è una maggiore velocità dello sviluppatore senza sacrificare le prestazioni e il controllo. Gestisci la tua CDN come fai con la tua base di codice.
Sono abituato a pubblicare le mie modifiche di configurazione in un portale o facendo richieste API. In che modo Edgio è diverso?
Non preoccuparti, abbiamo gli endpoint API e un’interfaccia utente tradizionale disponibili quando lo desideri, ma per massimizzare completamente il tasso di hit della cache, le prestazioni del sito e la velocità degli sviluppatori, vorrai iniziare a utilizzare EdgeJS. Tuffiamoci.
Quando un progetto viene inizializzato inizierai con un semplice file di configurazione che include un set di regole consigliato. La configurazione viene scritta in JavaScript, il linguaggio di sviluppo più diffuso al mondo, e implementata in pochi secondi con la nostra CLI. Un file definisce i server di origine.
module.exports = {
backends: {
origin: {
domainOrIp: "example.com",
hostHeader: "example.com",
},
},
Aggiungere gli endpoint API, i bucket dei supporti o qualsiasi altra origine necessaria. In modo semplice e con poche righe di codice.
E la flessibilità del caching?
Bella domanda, è qui che inizia il divertimento. Viene aggiunto un altro file in modo da poter configurare i percorsi e scrivere alcune regole di caching. Crea regole per i tuoi contenuti e imposta le regole di memorizzazione nella cache di edge, browser e service worker come preferisci.
Iniziamo con quelle risorse statiche che le CDN gestiscono così bene.
.match(
'/:path*/:file.:ext(js|css|png|svg|jpg|woff)',
({ cache, proxy }) => {
cache({
edge: {
maxAgeSeconds: 60 * 60 * 24,
staleWhileRevalidateSeconds: 60 * 60
},
browser: {
maxAgeSeconds: 60 * 60 * 24,
},
})
proxy('origin')
}
)
Con una regola abbiamo stabilito qualcosa di simile per qualsiasi richiesta:
“Se vediamo una richiesta con un’estensione di file corrispondente, memorizzarla nella cache di Edgio e del browser del client per ventiquattro ore.”
Se state provando a farlo a casa, potete fare clic sul vostro sito localmente e osservarlo mentre memorizziamo e distribuiamo immagini, immagini, font, CSS e JS. Attiva una finestra in incognito in modo da essere certi che la cache del browser sia vuota e visualizzare i risultati della cache localmente. Sì localmente. Non è necessario distribuirlo per vedere che funzioni. Sai esattamente come il tuo codice interagirà con la nostra CDN.
E i contenuti dinamici che hai menzionato?
Oh, non preoccuparti che non abbiamo dimenticato. Siamo a soli 10 minuti e stiamo abbinando quelle CDN legacy. Ora accendiamo i postbruciatori e li lasciamo nella polvere. Supponiamo che tu voglia aggiungere un percorso per alcuni contenuti dinamici.
router.match('/products/:productId', ({ cache, proxy }) => {
cache({
edge: {
maxAgeSeconds: 60 * 60 * 24
staleWhileRevalidateSeconds: 60 * 60
}
})
proxy('origin')
})
E tradotto questo significa quanto segue:
“Memorizzare nella cache tutte le pagine dei prodotti per un giorno.”
Quando quella cache è scaduta, servire quella vecchia per un’ora mentre cerchiamo una nuova versione”
Ora hai visto la flessibilità e capisci le basi. Si spera che tu stia immaginando che tipo di impatto può avere la distribuzione della tua CDN su Edgio sulla velocità e le prestazioni del tuo sito. È possibile definire facilmente i propri percorsi e assegnare loro regole di caching. Ma cos’altro puoi fare con la piattaforma applicativa di Edgio e EdgeJS?
- Inoltrare le richieste a un percorso diverso sull’origine,
- Modifica richieste
- Modificare le risposte
- Manipolare i cookie
- Servire file statici
- Indirizzare alle funzioni senza server
- Tornare al rendering lato server
- Reindirizzamento
- Blocco del traffico
- Eliminazione selettiva con chiavi cache personalizzate
- O trasformare completamente la risposta della tua origine.
Sta a te decidere come sfruttare la tecnologia di nuova generazione di Edgio e gli esempi di cui sopra sono solo la punta dell’iceberg. In effetti, in Edgio siamo alla costante ricerca delle prestazioni, quindi abbiamo deciso di fare un passo avanti, oltre la periferia e nel browser del visitatore con la nostra esclusiva soluzione HTML e di prefetching delle risorse.
Per scoprire come eliminare virtualmente i tempi di risposta della rete e trasformare completamente il vostro sito Web offrendo la sensazione di un’applicazione nativa, consultate il nostro articolo di follow-up: Ridurre i tassi di rimbalzo e migliorare l’esperienza del sito con il precaricamento predittivo di Edgio.
