Узнайте о преимуществах и недостатках поддержки 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.
Как решить, использовать ли гибридный AMP или только AMP-подход
Если вы серьезно относитесь к производительности загрузки, страница только AMP может быть хорошим способом убедиться, что ваша страница становится быстрой и остается быстрой. Но вот в чем загвоздка: чтобы гарантировать быстроту, AMP запрещает определенные архитектурные шаблоны и элементы HTML, которые часто приводят к медленной загрузке страниц. Например, AMP не допускает использование пользовательского синхронного JavaScript, поскольку ресурсы, блокирующие рендеринг, являются частой причиной медленной загрузки страниц.
Чтобы понять, подходит ли вам подход, основанный только на AMP, вам необходимо выяснить, можно ли представить весь ваш код интерфейса в формате AMP HTML:
- Прочитайте статью «Как работает AMP» , чтобы понять общие архитектурные ограничения AMP и обязательные оптимизации.
- Ознакомьтесь с HTML-тегами , чтобы узнать, какие HTML-теги AMP разрешает и запрещает, просмотрите каталог компонентов AMP, чтобы увидеть пользовательские компоненты, созданные сообществом AMP для решения распространенных задач, и ознакомьтесь с amp-script , чтобы узнать, как использовать пользовательский JavaScript для реализации функций, которые AMP в настоящее время не поддерживает.
Даже если подход AMP-only не сработает для вашей страницы, все равно может быть хорошей идеей использовать AMP, когда это возможно, из-за гарантированной скорости AMP HTML и кэшей AMP. Гибридный подход AMP в Next.js предоставляет способ условного обслуживания страниц AMP. Однако он также создает более высокую стоимость обслуживания, поскольку требует от вас поддерживать две версии каждой страницы.
Заключение
AMP гарантирует, что ваш сайт станет быстрым и останется быстрым, применяя шаблоны, которые ведут к быстродействию, и запрещая шаблоны, которые ведут к замедлению. AMP HTML и AMP кэши — два основных способа, которыми AMP гарантирует быстродействие. Но перед принятием AMP вы должны убедиться, что он может поддерживать все требования вашего сайта.