了解在 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 Cache 可以保证速度。 Next.js 中的混合 AMP 方法提供了一种有条件地提供 AMP 网页的方法。但是，这也会产生更高的维护成本，因为您需要维护每个网页的两个版本。
总结
AMP 可强制执行导致速度加快的模式，并禁止使用会导致速度变慢的模式，以保证您的网站能够快速加载且始终保持快速运行。AMP HTML 和 AMP 缓存是 AMP 保证速度的两种主要方式。但在采用 AMP 之前，您应确保它能够支持您网站的所有要求。