快读学习提高web性能4——AMP如何保证Next.js应用程序的牢靠性

AMP如何保证Next.js应用程序的牢靠性

在Next.js应用程序中了解支持AMP的好处和取舍

AMP是一个Web组件框架，可确保快速加载页面。Next.js具有对AMP的内置支持。

你会学什么？

本指南首先简要介绍AMP如何保证快速的页面加载，然后说明在Next.js应用程序中支持AMP的不同方法，然后帮助您确定最适合您的方法。

本指南的目标读者是决定使用Next.js但不确定是否支持AMP的Web开发人员。

本指南不是为决定使用AMP但不确定要使用哪种框架的Web开发人员编写的。但是，我们将简要说明一下，Next.js可能是一个不错的选择，因为它支持AMP服务器端呈现， 并且可以轻松提供AMP内容，而不会在您的代码库中引入很多复杂性。

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页面的服务器端模板引擎。

试试吧！在Next.js中 查看如何使用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缓存的牢固性保证，尽可能使用AMP仍然是一个好主意。Next.js中的Hybrid AMP方法提供了一种有条件地服务AMP页面的方法。但是，由于它要求您维护每个页面的两个版本，因此也会增加维护成本。

结论

AMP通过强制执行导致速度快的模式并禁止导致速度慢的模式来确保您的网站快速并保持快速。AMP HTML和AMP缓存是AMP保证牢固性的两种主要方法。但是在采用AMP之前，您应该确保它可以满足您站点的所有要求。

 

本文链接：https://web.dev/how-amp-can-guarantee-fastness-in-your-nextjs-app/