Scopri i vantaggi e i compromessi del supporto di AMP nella tua app Next.js
AMP è un framework per componenti web che garantisce caricamenti rapidi delle pagine. Next.js ha il supporto integrato per AMP.
Cosa imparerai?
Questa guida descrive brevemente in che modo AMP garantisce caricamenti rapidi delle pagine, poi illustra i diversi modi in cui puoi supportare AMP in un'app Next.js e infine ti aiuta a decidere quale approccio è più adatto a te.
Il pubblico di destinazione di questa guida è uno sviluppatore web che ha deciso di utilizzare Next.js, ma non sa se supportare AMP.
In che modo AMP garantisce caricamenti rapidi delle pagine
AMP ha due strategie principali per garantire la velocità:
- HTML AMP: una forma limitata di HTML che rende obbligatorie determinate ottimizzazioni e vieta gli schemi di architettura che causano lentezza. Per una panoramica generale delle ottimizzazioni e delle limitazioni, consulta Come funziona AMP.
- Cache AMP: una cache dei contenuti utilizzata da alcuni motori di ricerca, come Google e Bing, che utilizza il prerendering per velocizzare i caricamenti delle pagine. Consulta Perché esistono le AMP Cache per scoprire di più sui vantaggi e sui compromessi delle cache e Come viene memorizzata nella cache la mia pagina AMP? per capire come le tue pagine AMP vengono memorizzate nella cache.
Come utilizzare AMP in Next.js
Esistono due modi per utilizzare AMP in Next.js:
- L'approccio Hybrid AMP ti consente di creare una versione AMP di qualsiasi pagina Next.js.
- L'approccio Solo AMP ti consente di impostare AMP come unica opzione per una pagina.
Sebbene Next.js sia generalmente considerato un framework React, è importante capire che quando utilizzi Next.js per pubblicare pagine AMP, non puoi più eseguire i componenti React lato client perché i componenti React non sono componenti AMP validi. In altre parole, Next.js non è più un framework React, ma un motore di creazione di modelli lato server per la generazione di pagine AMP.
Come decidere se utilizzare l'approccio AMP ibrida o solo AMP
Se vuoi ottenere prestazioni di caricamento ottimali, una pagina solo AMP potrebbe essere un buon modo per assicurarti che la tua pagina sia veloce e rimanga tale. Ma ecco il problema: per garantire la velocità, AMP vieta determinati pattern di architettura ed elementi HTML che spesso generano pagine lente. Ad esempio, AMP non consente JavaScript sincrono personalizzato perché le risorse che bloccano il rendering sono una causa comune di caricamenti lenti delle pagine.
Per capire se un approccio solo AMP è adatto a te, devi capire se tutto il codice frontend può essere rappresentato in HTML AMP:
- Leggi l'articolo Come funziona AMP per comprendere le limitazioni di architettura di alto livello e le ottimizzazioni obbligatorie di AMP.
- Leggi la pagina Tag HTML per scoprire quali tag HTML sono consentiti e vietati da AMP, consulta il catalogo dei componenti AMP per visualizzare i componenti personalizzati creati dalla community AMP per risolvere casi d'uso comuni e dai un'occhiata a amp-script per scoprire come utilizzare JavaScript personalizzato per implementare funzionalità non attualmente supportate da AMP.
Anche se un approccio solo AMP non è adatto alla tua pagina, potrebbe comunque essere una buona idea utilizzare AMP ogni volta che è possibile, grazie alla velocità garantita di AMP HTML e delle cache AMP. L'approccio AMP ibrido in Next.js offre un modo per pubblicare pagine AMP in modo condizionale. Tuttavia, genera anche un costo di manutenzione più elevato perché richiede la gestione di due versioni di ogni pagina.
Conclusione
AMP garantisce che il tuo sito sia veloce e rimanga tale applicando modelli che favoriscono la velocità e vietando quelli che la rallentano. AMP HTML e le cache AMP sono i due modi principali in cui AMP garantisce la velocità. Tuttavia, prima di adottare AMP, devi assicurarti che possa supportare tutti i requisiti del tuo sito.