Узнайте о преимуществах и недостатках поддержки AMP в вашем приложении Next.js.
AMP — это платформа веб-компонентов, гарантирующая быструю загрузку страниц. Next.js имеет встроенную поддержку AMP.
Чему вы научитесь?
Это руководство сначала кратко описывает , как AMP гарантирует быструю загрузку страниц , затем объясняет различные способы поддержки AMP в приложении Next.js , а затем помогает вам решить, какой подход лучше всего подходит для вас .
Целевая аудитория этого руководства — веб-разработчики, которые решили использовать Next.js, но не уверены, поддерживать ли AMP.
Как AMP гарантирует быструю загрузку страниц
AMP имеет две основные стратегии обеспечения скорости:
- AMP HTML : ограниченная форма HTML, которая делает определенные оптимизации обязательными и запрещает архитектурные шаблоны, приводящие к замедлению работы. Подробный обзор оптимизаций и ограничений см. в статье «Как работает AMP» .
- AMP Cache : кеш контента, используемый некоторыми поисковыми системами, такими как Google и Bing, который использует предварительную отрисовку для ускорения загрузки страниц. См. раздел «Почему существуют кеши AMP» , чтобы узнать больше о преимуществах и недостатках кешей, а также как кэшируется моя страница AMP? чтобы понять, как ваши AMP-страницы попадают в кеши.
Как вы можете использовать AMP в Next.js
Есть два способа использования AMP в Next.js:
- Подход Hybrid AMP позволяет создать сопровождающую AMP-версию любой страницы Next.js.
- Подход «Только AMP» позволяет сделать AMP единственным вариантом для страницы.
Хотя Next.js обычно рассматривается как платформа React, важно понимать, что когда вы используете Next.js для обслуживания страниц AMP, вы больше не можете запускать компоненты React на стороне клиента, поскольку компоненты React не являются допустимыми компонентами AMP. Другими словами, Next.js больше не является инфраструктурой React, а скорее серверным механизмом шаблонов для создания AMP-страниц.
Как решить, использовать ли подход Hybrid AMP или только AMP
Если вы серьезно относитесь к производительности загрузки, страница только с AMP может быть хорошим способом убедиться, что ваша страница работает быстро и остается быстрой. Но вот в чем загвоздка: чтобы гарантировать скорость, AMP запрещает определенные архитектурные шаблоны и элементы HTML, которые часто приводят к медленной работе страниц. Например, AMP не поддерживает собственный синхронный JavaScript, поскольку ресурсы, блокирующие рендеринг, являются частой причиной медленной загрузки страниц.
Чтобы понять, подходит ли вам подход, основанный только на AMP, вам необходимо выяснить, может ли весь ваш код внешнего интерфейса быть представлен в AMP HTML:
- Прочтите , как работает AMP , чтобы понять архитектурные ограничения высокого уровня и обязательные оптимизации AMP.
- Прочтите HTML-теги , чтобы узнать, какие HTML-теги разрешены и запрещены AMP, просмотрите каталог компонентов AMP , чтобы увидеть пользовательские компоненты, созданные сообществом AMP для решения распространенных случаев использования, и ознакомьтесь с amp-script , чтобы узнать, как использовать собственный JavaScript для реализации. функции, которые AMP в настоящее время не поддерживает.
Даже если подход, основанный только на AMP, не подойдет для вашей страницы, все равно будет хорошей идеей использовать AMP, когда это возможно, из-за гарантированной скорости AMP HTML и AMP-кэшей. Подход Hybrid AMP в Next.js позволяет условно обслуживать AMP-страницы. Однако это также приводит к более высоким затратам на обслуживание, поскольку требует поддержки двух версий каждой страницы.
Заключение
AMP гарантирует, что ваш сайт будет работать быстро и оставаться быстрым, применяя шаблоны, ведущие к скорости, и запрещая шаблоны, которые приводят к замедлению. AMP HTML и AMP-кэши — это два основных способа, с помощью которых AMP гарантирует скорость. Но прежде чем использовать AMP, вы должны убедиться, что он поддерживает все требования вашего сайта.