了解在 Next.js 应用中支持 AMP 的好处和权衡
AMP 是一种网页组件框架，可保证快速加载网页。Next.js 内置了对 AMP 的支持。
您将学到什么？
本指南首先简要介绍了 AMP 如何保证快速加载网页，然后介绍了在 Next.js 应用中支持 AMP 的不同方法，最后帮助您确定最适合您的方法。
本指南的目标受众群体是已决定使用 Next.js 但不确定是否应支持 AMP 的 Web 开发者。
AMP 如何保证网页快速加载
AMP 有两种主要策略来保证速度：
- AMP HTML：一种受限的 HTML 形式，它会强制执行某些优化，并禁止导致速度缓慢的架构模式。如需简要了解优化和限制，请参阅 AMP 的运作方式。
- AMP 缓存：某些搜索引擎（例如 Google 和 Bing）使用的一种内容缓存，它使用预呈现来加快网页加载速度。如需详细了解缓存的优势和权衡，请参阅AMP 缓存的存在原因；如需了解 AMP 网页是如何进入缓存的，请参阅我的 AMP 网页是如何缓存的？。
如何在 Next.js 中使用 AMP
在 Next.js 中使用 AMP 的方式有两种：
- 借助混合 AMP 方法，您可以为任何 Next.js 网页创建相应的 AMP 版本。
- 借助仅限 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 标记，了解 AMP 允许和禁止使用哪些 HTML 标记；浏览 AMP 组件目录，了解 AMP 社区构建的自定义组件，以解决常见用例；查看 amp-script，了解如何使用自定义 JavaScript 实现 AMP 目前不支持的功能。
即使您的网页不适合采用仅限 AMP 的方法，但由于 AMP HTML 和 AMP Cache 的速度有保证，因此尽可能使用 AMP 可能仍然是个好主意。Next.js 中的混合 AMP 方法提供了一种有条件地投放 AMP 网页的方法。不过，这也会增加维护费用，因为您需要维护每个网页的两个版本。
总结
AMP 通过强制执行有助于提高速度的模式并禁止导致速度变慢的模式，从而保证您的网站快速加载并保持快速加载。AMP HTML 和 AMP 缓存是 AMP 保证速度快的两种主要方式。不过，在采用 AMP 之前，您应确保它可以满足您网站的所有要求。