Google AMP с реакцией

У нас есть приложение изоморфной реакции с узлом. Я хочу конвертировать некоторые страницы в страницы AMP. Я сбит с толку! Должны ли мы выбрать отдельную версию приложения AMP или изменить текущее приложение в соответствии с рекомендациями Google для страниц AMP? Я вижу, что мы должны внести много изменений в текущее приложение, чтобы сделать версию, совместимую с усилителем. Как мне поступить?

ОТВЕТЫ

Ответ 1

Таким образом, AMP означает "Ускоренные мобильные страницы", а не "Ускоренные мобильные приложения". Будет сложно получить динамическое приложение 1:1 в AMP. Поэтому вам нужна статическая HTML-разметка в соответствии со стандартом разметки AMP, и переход между этими страницами (страницами <=> разных экранов в вашем приложении) будет простым старым HTML-ссылками. Возможно, вы сможете сгенерировать такую разметку с помощью пользовательских шаблонов из вашего приложения с доступными усилиями. Возможно, ampreact может вам помочь.

Ответ 2

У нас похожая архитектура.

Gotchas:

  1. Мы не хотим создавать новый технический стек для обслуживания страниц 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 генерирует новый файл (index.html) с корневым компонентом, который мы упоминаем в методе рендеринга.

который внутренне потребляет необходимые компоненты, так как мы продолжаем, были проблемы с количеством CSS и HTML, которые генерируют компоненты React.

мы использовали это как возможность очистить CSS и написали отдельный AMP только при необходимости.

Ответ 3

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>
}
})

Таким образом, вы можете поддерживать оба. Реагируйте на визуализацию клиента и чистый AMP.

больше информации

Ответ 4

Я считал амперреалом. Но использование реакции для AMP заключалось в добавлении дополнительного уровня сложности. Наконец решил использовать node + ejs + express. AMP также предоставляет компоненты для обработки динамического контента, такого как amp-list, amp-bind, amp-live-list и т.д.

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