我们有一个带有节点的同构反应应用程序。我想将一些页面转换为 AMP 页面。我很困惑！我们应该选择一个单独的 AMP 版本的应用程序，还是我们应该根据 Google 的 AMP 页面指南修改当前的应用程序？我可以看到我们必须在当前应用程序中进行大量更改才能制作兼容放大器的版本。我应该如何进行？
【问题讨论】：
Next.js 现在支持 AMP。他们提供了多种方法（仅 AMP 和混合 AMP）来解决此问题。由于您可以在页面级别启用 AMP，因此您可以慢慢迁移到完整的 AMP 网站。
示例
// pages/about.js
export const config = { amp: true }
export default function AboutPage(props) {
return <h3>My AMP About Page!</h3>
}
这样您就可以同时支持两者。 React 客户端渲染和纯 AMP。
【讨论】：
我们有类似的架构。
陷阱：
我们不想创建新的技术堆栈来服务 Amp 页面。
核心和 AMP 堆栈必须在功能方面保持同步。
我们通过以下方式解决了这个问题：
AMP 页面纯粹在服务器端呈现。因此，server.js 会生成一个新文件（index.html），其中包含我们在 render 方法中提到的根组件。
它在内部消耗必要的组件，当我们继续进行时，React 组件生成的 CSS 和 HTML 的数量存在问题。
我们借此机会清理 CSS 并仅在需要时编写单独的 AMP。
【讨论】：
所以 AMP 代表 Accelerated Mobile Pages，而不是 Accelerated Mobile Apps。将动态应用 1:1 导入 AMP 是很困难的。 因此，您需要根据 AMP 标记标准的静态 HTML 标记，并且这些页面（页面 应用程序中的不同屏幕）之间的转换将是普通的旧 HTML 链接。也许您能够以负担得起的努力从您的应用程序中使用自定义模板生成此类标记。 或许ampreact可以帮到你。
【讨论】：
我考虑过。但是对 AMP 使用 react 增加了一层额外的复杂性。最后决定用node + ejs + express。 AMP 还提供用于处理动态内容的组件，例如 amp-list、amp-bind、amp-live-list 等
https://www.ampproject.org/docs/reference/components#dynamic-content
【讨论】：
如果 React 应用使用 SSR 渲染，还有另一种方法可以将 amp 与现有的 React 代码库集成。
通常，SSR 渲染的 html 会在 index.html 中引导。您可以在 public 文件夹中定义除 index.html 之外的另一个模板，并将名称命名为 amp.html，其中包含 AMP 模板
在 SSR 中渲染时，您可以仅为需要 AMPfied 版本的特定路由选择 amp.html。
这是参考 https://medium.com/geekculture/react-js-sitecore-jss-ampfied-22b87a2e45ec
【讨论】：