Scopri i vantaggi e i compromessi del supporto di AMP nella tua app Next.js
AMP è un framework di componenti web che migliora i tempi di caricamento delle pagine. Next.js ha il supporto integrato per AMP.
Cosa imparerai?
Questa guida descrive innanzitutto brevemente in che modo AMP garantisce caricamenti rapidi delle pagine, poi spiega i diversi modi in cui puoi supportare AMP in un'app Next.js e infine ti aiuta a decidere quale approccio è più adatto alle tue esigenze.
Il pubblico di destinazione di questa guida è uno sviluppatore web che ha deciso di utilizzare Next.js, ma non è sicuro di voler 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 alcune ottimizzazioni e vieta i pattern architetturali che causano lentezza. Consulta Come funziona AMP per una panoramica di alto livello delle ottimizzazioni e delle limitazioni.
- AMP Cache: una cache dei contenuti utilizzata da alcuni motori di ricerca, come Google e Bing, che utilizza il prerendering per velocizzare i caricamenti pagina. Consulta la pagina Perché esistono le AMP Cache per scoprire di più sui vantaggi e sui compromessi delle cache e la pagina 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 AMP ibrido ti 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.
Sebbene Next.js sia solitamente 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 template lato server per la generazione di pagine AMP.
Come decidere se utilizzare l'approccio AMP ibrido o solo AMP
Se le prestazioni di caricamento sono importanti per te, una pagina solo AMP potrebbe essere un buon modo per assicurarti che la pagina venga caricata rapidamente e rimanga veloce. Ma ecco il problema: per garantire la velocità, AMP vieta determinati pattern architetturali ed elementi HTML che spesso rallentano le pagine. Ad esempio, AMP non consente l'utilizzo di 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 alle tue esigenze, devi determinare se tutto il tuo codice frontend può essere rappresentato in HTML AMP:
- Leggi Come funziona AMP per comprendere le limitazioni architetturali di alto livello e le ottimizzazioni obbligatorie di AMP.
- Leggi Tag HTML per scoprire quali tag HTML sono consentiti e vietati da AMP, sfoglia il catalogo dei componenti AMP per vedere i componenti personalizzati che la community AMP ha creato per risolvere i casi d'uso comuni e consulta amp-script per scoprire come utilizzare JavaScript personalizzato per implementare funzionalità che AMP non supporta attualmente.
Anche se un approccio basato solo su AMP non funziona per la tua pagina, potrebbe comunque essere una buona idea utilizzare AMP ogni volta che è possibile, grazie alla velocità di HTML AMP e delle AMP Cache. L'approccio AMP ibrido in Next.js consente di pubblicare 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
AMP garantisce che il tuo sito sia veloce e rimanga tale applicando pattern che portano alla velocità e vietando pattern che portano alla lentezza. HTML AMP e AMP Cache 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.