Google AMP with React

Question

We have an isomorphic react App with node. I want to convert some pages to AMP pages. I am confused! Shall we go for a separate AMP version of the app or shall we modify the current app according to Google guidelines for AMP Pages? I can see we have to make a lot of changes in the current app to make an amp compatible version. How should I proceed?

Solution 1

Next.js now supports AMP. They provide multiple approaches (AMP-only & AMP-hybrid) to solve this problem. Since you can enable AMP on page level you can slowly migrate to a full AMP website.

Example

// pages/about.js
export const config = { amp: true }

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

This way you can support both. React client rendering and pure AMP.

Docs Next.js AMP

Solution 2

We have a similar architecture.

Gotchas:

1. We do not want to create a new Tech stack to serve Amp pages.

2. The core and AMP stacks have to be in sync in terms of features.

We solved it by doing the following:

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 pages are purely server-side rendered. So, server.js generates a new file (index.html) with the root component which we mention in the render method.

which internally consumes necessary components, as we proceed there were issues with the amount of CSS and HTML which React components generate.

we have taken it as an opportunity to clean up the CSS and wrote separate AMP only when needed.

Solution 3

So AMP stands for Accelerated Mobile Pages, NOT Accelerated Mobile Apps. It will be difficult to get a dynamic App 1:1 into AMP. So you need static HTML-Markup according to the AMP Markup Standard and the transition between these pages (pages <=> different Screens in your App) will be plain old HTML-Links. Perhaps you are able to generate such kind of markup with custom templates from your app with affordable effort. Perhaps ampreact can help you.

Solution 4

I considered ampreact. But using react for AMP was adding an extra layer of complexity. Finally decided to use node + ejs + express. AMP also provides components for handling dynamic content like amp-list, amp-bind, amp-live-list etc

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

View more solutions