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