In che modo AMP può garantire la velocità dell'app Next.js

Scopri i vantaggi e gli svantaggi del supporto di AMP nell'app Next.js

Houssein Djirdeh

AMP è un framework dei componenti web che garantisce un caricamento rapido delle pagine. Next.js offre il supporto integrato per AMP.

Cosa imparerai?

Questa guida descrive brevemente in che modo AMP garantisce un caricamento rapido delle pagine, poi spiega i diversi modi in cui puoi supportare AMP in un'app Next.js, quindi ti aiuta a scegliere l'approccio migliore per te.

Il pubblico di destinazione di questa guida è costituito da uno sviluppatore web che ha deciso di utilizzare Next.js, ma non è sicuro di poter supportare o meno la tecnologia AMP.

Nota: questa guida non è stata scritta per gli sviluppatori web che hanno deciso di utilizzare AMP, ma non sono sicuri del framework da utilizzare. Tuttavia, vedremo brevemente che Next.js potrebbe essere una buona scelta perché supporta il rendering lato server AMP e semplifica la pubblicazione di contenuti AMP senza introdurre molta complessità nel codebase.

In che modo la tecnologia AMP garantisce un caricamento rapido delle pagine

Le pagine AMP prevedono due strategie principali per garantire la solidità:

• HTML AMP: un formato HTML limitato che rende obbligatorie determinate ottimizzazioni e vieta i pattern architetturali che comportano rallentamenti. Consulta la sezione Come funziona AMP per una panoramica generale delle ottimizzazioni e delle restrizioni.
• Cache AMP: una cache dei contenuti utilizzata da alcuni motori di ricerca, come Google e Bing, che impiega il prerendering per velocizzare il caricamento delle pagine. Consulta l'articolo Perché esistono cache AMP per saperne di più sui vantaggi e sui compromessi delle cache e In che modo la mia pagina AMP viene memorizzata nella cache? per capire in che modo le pagine AMP vengono inserite nelle cache.

Come utilizzare AMP in Next.js

Esistono due modi per utilizzare AMP in Next.js:

• L'approccio AMP ibrido ti consente di creare una versione AMP associata di qualsiasi pagina Next.js.
• L'approccio solo AMP ti consente di rendere AMP l'unica opzione per una pagina.

Anche se di solito Next.js è considerato un framework React, è importante capire che quando utilizzi Next.js per pubblicare pagine AMP, non puoi più eseguire i componenti React sul lato client, perché i componenti React non sono componenti AMP validi. In altre parole, Next.js non è più un framework React, ma piuttosto un motore di modelli lato server per la generazione di pagine AMP.

Prova: consulta Come utilizzare AMP in Next.js per provare personalmente i due approcci.

Come decidere se utilizzare l'approccio ibrido AMP o solo AMP

Se le prestazioni di caricamento sono molto importanti, una pagina solo AMP può essere un ottimo modo per garantire che la tua pagina diventi veloce e rimanga sempre veloce. Il problema però è questo: per garantire la velocità, AMP vieta alcuni pattern architetturali ed elementi HTML che spesso portano a pagine lente. Ad esempio, AMP non consente JavaScript sincrono personalizzato perché le risorse che bloccano la visualizzazione sono una causa comune del caricamento lento delle pagine.

Per capire se un approccio solo AMP è la scelta giusta per te, devi capire se tutto il codice frontend può essere rappresentato in HTML AMP:

• Leggi Come funziona AMP per comprendere le restrizioni architetturali di alto livello e le ottimizzazioni obbligatorie di AMP.
• Leggi i tag HTML per conoscere i tag HTML consentiti e vietati da AMP, sfoglia il catalogo dei componenti AMP per vedere i componenti personalizzati creati dalla community AMP per risolvere casi d'uso comuni e consulta amp-script per scoprire come utilizzare JavaScript personalizzato per implementare funzionalità attualmente non supportate da AMP.

Anche se un approccio solo AMP non funziona per la tua pagina, potrebbe comunque essere una buona idea utilizzare AMP quando possibile, a causa della stabilità garantita del codice HTML AMP e delle cache AMP. L'approccio ibrido AMP in Next.js consente di pubblicare le pagine AMP in modo condizionale. Tuttavia, comporta anche un costo di manutenzione più elevato, perché richiede la manutenzione di due versioni di ogni pagina.

Conclusione

La tecnologia AMP garantisce la velocità e la velocità del tuo sito applicando pattern che garantiscono velocità e vietando pattern che comportano rallentamenti. AMP HTML e AMP Cache sono i due modi principali con cui AMP garantisce la velocità. Prima di adottare la tecnologia AMP, però, devi assicurarti che supporti tutti i requisiti del tuo sito.