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?

Adduce

What does this have to do with React, specifically? – Yahrzeit

please go through the link redditblog.com/2016/09/20/amp-and-reactredux – Adduce

I've encountered a similar problem like yours. I really want to reuse existing React components especially those which are static but complex (pure component with complicated rendering logic). To fix this problem, I developed a webpack plugin -github.com/jimmy319/amp-react-renderer-plugin which can make it painless to create a component based AMP page : ) – Variance

Answer 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

Deterrent

Answer 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.

Teakwood

Answer 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.

Grochow

Thanks for your answer. I know AMP stands for Accelerated Mobile Pages. Its a project. The pages you create are called AMP pages. Please visit ampproject.org/learn/overview . It's official site and it says "AMP pages are built with 3 core components". – Adduce

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 ampproject.org/docs/reference/components#dynamic-content – Adduce

Answer 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

Adduce

Answer 5

If the react app using SSR rendering there is an alternate way for integrating amp with existing react code base.

Usually the the SSR rendered html will be bootstraped inthe index.html.You can define one more template in the public folder other than index.html and let name be amp.html which contain AMP template

While rendering in SSR you can choose the amp.html only for specific routes where you need AMPfied version.

Here is the reference https://medium.com/geekculture/react-js-sitecore-jss-ampfied-22b87a2e45ec

Penman