Scopri i vantaggi e i vantaggi del supporto di AMP nell'app Next.js
AMP è un framework di componenti web che garantisce caricamenti rapidi delle pagine. Next.js dispone di supporto integrato per AMP.
Cosa imparerai a fare?
Questa guida descrive brevemente in che modo AMP garantisce caricamenti veloci delle pagine, poi spiega i diversi modi in cui puoi supportare AMP in un'app Next.js e infine ti aiuta a scegliere l'approccio migliore per 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 veloci delle pagine
AMP prevede due strategie principali per garantire la solidità:
- HTML AMP: una forma limitata di HTML che rende obbligatorie determinate ottimizzazioni e vieta i pattern architetturali che potrebbero rallentare. Per una panoramica generale delle ottimizzazioni e delle limitazioni, consulta Come funziona AMP.
- Cache AMP: una cache di contenuti utilizzata da alcuni motori di ricerca, come Google e Bing, che utilizza il prerendering per velocizzare i caricamenti delle pagine. Consulta gli articoli Perché esistono le cache AMP per scoprire di più sui vantaggi e sui vantaggi delle cache e su 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 ibrida consente di creare una versione AMP di accompagnamento di qualsiasi pagina Next.js.
- L'approccio solo AMP ti consente di rendere AMP l'unica opzione per una pagina.
Anche se Next.js viene generalmente considerato come un framework React, è importante capire che quando utilizzi Next.js per pubblicare le pagine AMP, non puoi più eseguire i componenti di React sul lato client perché i componenti di 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.
Come decidere se utilizzare l'approccio solo AMP ibrido o solo AMP
Se sei davvero interessato alle prestazioni di caricamento, una pagina solo AMP potrebbe essere un buon modo per fare in modo che sia veloce e resti veloce. Il problema è questo: per garantire la solidità, AMP vieta alcuni pattern di architettura ed elementi HTML che spesso causano la lentezza delle pagine. Ad esempio, AMP non consente codice JavaScript sincrono personalizzato perché le risorse che bloccano la visualizzazione sono una causa comune di lentezza dei caricamenti delle pagine.
Per capire se un approccio solo AMP è adatto alle tue esigenze, devi capire se tutto il codice del frontend può essere rappresentato nel codice HTML AMP:
- Leggi Come funziona AMP per comprendere le restrizioni architettoniche e le ottimizzazioni obbligatorie ad alto livello di AMP.
- Leggi i Tag HTML per conoscere i tag HTML consentiti e vietati dalla tecnologia AMP, sfoglia il catalogo dei componenti AMP per conoscere i componenti personalizzati creati dalla community AMP per risolvere casi d'uso comuni e consulta amp-script per scoprire come usare JavaScript personalizzato per implementare funzioni che attualmente non sono supportate da AMP.
Anche se un approccio solo AMP non funziona per la tua pagina, potrebbe comunque essere una buona idea utilizzare AMP, ove possibile, a causa della solidità garantita del codice HTML AMP e delle cache AMP. L'approccio AMP ibrido in Next.js consente di pubblicare le pagine AMP in modo condizionale. Tuttavia, comporta anche un aumento dei costi di manutenzione perché è necessario mantenere due versioni di ogni pagina.
Conclusione
AMP garantisce che il tuo sito diventa veloce e rimane veloce applicando pattern che favoriscono la velocità e vietando pattern che portano alla lentezza. Le cache HTML AMP e AMP sono i due principali modi in cui AMP garantisce la solidità. Prima di adottare la tecnologia AMP, assicurati che supporti tutti i requisiti del tuo sito.