Question

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

Answer 1

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

Answer 2

我们有类似的架构。

陷阱：

我们不想创建一个新的技术堆栈来为Amp页面提供服务。
核心和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 3

我考虑过ampreact。但是对AMP使用react会增加额外的复杂性。最后决定使用node + ejs + express。 AMP还提供处理动态内容的组件，如amp-list，amp-bind，amp-live-list等

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

Answer 4

Next.js现在支持AMP。他们提供了多种解决方案（仅限AMP和AMP混合）来解决此问题。由于您可以在页面级别启用AMP，因此可以缓慢迁移到完整的AMP网站。

示例

// pages/about.js
import { withAmp } from 'next/amp'

export default withAmp(function AboutPage(props) {
  return (
    <h3>My AMP About Page!</h3>
  )
})

这样，您就可以同时支持两者。反应客户端渲染和纯AMP。

more info

Answer 5

如果 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

带有React的Google AMP

5 个答案: