AMP 现在正式支持一种名为服务器端渲染 (SSR) 的技术，您可以将其应用于您的 AMP 页面，以使其加载速度更快。我们的测试表明，在流行的 FCP 指标 上，速度提高了高达 50%。Google AMP 缓存已经使用此技术一段时间了，但现在您也可以在自己的域上使用它！如果您使用 AMP 来提供您的主要网站体验，那么安装此额外的优化非常重要。即使您使用的是所谓的“配对 AMP 设置”，其中包含 AMP 和非 AMP 页面，此技术也可以确保在不使用 AMP 缓存的情况下（例如，在使用 Twitter 应用程序的用户中）为您的用户提供最佳性能。
SSR 是一种用于改善在客户端渲染页面的框架（如 React 或 Vue.js）的首次内容绘制时间 (FCP) 的技术。客户端渲染的缺点是，渲染页面所需的所有 Javascript 都需要先下载。这会延迟用户看到页面实际内容的时间。为了缓解这种情况，React 和 Vue.js 都支持在导航请求时在服务器上预渲染 DOM。然后，客户端 Javascript 会接管渲染，这是一个称为 (重新) 水化的过程。结果，用户将能够更快地看到内容。
AMP SSR 通过删除 AMP 模板代码 并在服务器上渲染页面布局来工作。AMP 模板代码的存在是为了防止页面加载时出现内容跳跃。它会在下载 AMP 框架并建立页面布局之前隐藏页面内容。因此，AMP 页面会遇到与其他客户端框架相同的问题：渲染会阻塞，直到 Javascript 下载完毕。通过删除模板代码，AMP SSR 会导致 FCP 时间快 50%。以下是一个比较 AMP 文件及其 SSR 版本的差异（有关详细说明，请查看 官方指南）
您可以通过 html 元素中的 transformed 属性来识别服务器端渲染的 AMP 页面
<html amp transformed="self;v=1">
旁注：AMP 缓存会设置自己的标志，例如，Google AMP 缓存会添加
<html amp transformed="google;v=1">
设置此属性后，验证器会将 SSR 的 AMP 视为有效的 AMP。SSR 的 AMP 优化会破坏 AMP 规范的规则，因此会使文档无效，这就是为什么需要使用此新标志来指示这种情况的原因。有了标志和优化，文档就被认为是有效的，您可以继续进行。
如果您想了解有关 AMP SSR 的更多信息，请查看 AMP 频道上的解释视频 或阅读 AMP SSR 指南。
如何 SSR AMP？
手动编写 SSR 的 AMP 没有意义。相反，请使用工具将您的 AMP 文件自动转换为 SSR 版本，就像编译器一样。理想情况下，这种转换会在用户请求文档之前提前进行。但是，您也可以按需运行它（确保缓存结果以避免重复运行转换）。
目前，有两种工具可用于 AMP SSR
- AMP 优化器：用于生成优化 AMP 的 NodeJs 库。如果您的网站由 Express 提供支持，您可能还会对 express 中间件 感兴趣。
- AMP 打包器：一个 go 命令行工具，可与提供 签名交换 配合使用。
旁注：这些工具不仅会执行 SSR，还会执行 其他优化，例如预加载 AMP 框架和重新排序头部。
Next.js 支持
我们非常高兴 最新的 Next.js 9 版本 支持开箱即用的 AMP SSR。Next.js 9 现在默认情况下为 AMP 首选和混合 AMP 页面渲染优化的 AMP。这使得 Next.js 成为构建 AMP 页面的绝佳选择。
下一步是什么？
我们计划在未来做两件大事
1. 自托管 AMP 框架 (v0.js) 的选项。没错，您不再需要从 cdn.ampproject.org 下载 AMP。这将有两个优势：
- 更快的交互时间：下载 AMP 框架不再需要建立到 cdn.ampproject.org 的第二个 HTTPS 连接。
- 更轻松的 QA：您可以控制何时切换到新的 AMP 版本。
但需要注意的是：出于隐私原因，AMP 缓存会在提供缓存的 AMP 页面时将 AMP 脚本 URL 重写为与缓存来源匹配。
2. WordPress 集成：v1.3 v1.5 的 官方 AMP 插件 支持 开箱即用的 AMP SSR。
AMP SSR 适合所有人
如果您发布 AMP 页面，则应发布服务器端渲染的 AMP 页面。与缩小您的 HTML 或 CSS 类似，运行 AMP 优化器 或 Go 变换器 应该成为您构建/渲染链的正常部分。改进的渲染性能对 FCP 时间有很大影响，但更重要的是，它会影响用户体验。
作者：Sebastian Benz，Google 开发者倡导者