了解在您的 Next.js 应用程序中支持 AMP 的好处和权衡
AMP 是一个 Web 组件框架，可保证页面加载速度快。 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 可能仍然是一个好主意，因为 AMP HTML 和 AMP 缓存保证了快速性。Next.js 中的混合 AMP 方法提供了一种有条件地提供 AMP 页面的方法。但是，它也增加了维护成本，因为它要求您维护每个页面的两个版本。
结论
AMP 通过强制执行导致快速性的模式并禁止导致速度缓慢的模式，来保证您的网站快速且保持快速。AMP HTML 和 AMP 缓存是 AMP 保证快速性的两种主要方式。但在采用 AMP 之前，您应确保它可以支持您网站的所有要求。