带有React的Google AMP

Question

我们有一个与节点同构的反应App.我想将一些页面转换为AMP页面.我很迷惑!我们应该选择单独的AMP版本的应用程序,还是应该根据Google的AMP页面指南修改当前的应用程序？我可以看到我们必须在当前的应用程序中进行大量更改才能制作兼容放大器的版本.我该怎么办？

Answer 1

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。

文档 Next.js AMP

Answer 2

因此,AMP代表加速移动页面,而非加速移动应用程序.将动态App 1:1放入AMP很困难.因此,您需要根据AMP标记标准进行静态HTML标记,并且这些页面之间的转换(应用程序中的页面<=>不同的屏幕)将是普通的HTML-Links.也许您可以通过应用程序中的自定义模板生成此类标记,并且价格合理.也许ampreact可以帮助你.

Answer 3

我们有一个类似的架构。

陷阱：

1. 我们不想创建一个新的Tech堆栈来提供Amp页面。

2. 内核和AMP堆栈必须在功能方面保持同步。

We solved it by doing two things: 1. Writing a new server.js file and added a new node job. 2. Components are organised in a way, where views are not connected components. 3. Developed a HOC and chose the template AMP vs React in the cases when your React template contains stuff which is not supported by AMP.

AMP页面纯粹是在服务器端呈现的。因此，server.js使用我们在render方法中提到的根组件生成一个新文件（index.html）。

它内部消耗了必要的组件，随着我们的进行，React组件生成的CSS和HTML数量出现了问题。

我们以此为契机来清理CSS，并仅在需要时编写单独的AMP。

Answer 4

我认为是无稽之谈。但是对AMP使用react会增加一层额外的复杂性。最终决定使用node + ejs + express。AMP还提供用于处理动态内容的组件，例如amp-list，amp-bind，amp-live-list等

https://www.ampproject.org/docs/reference/components#dynamic-content