33

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?

Yogi
  • 609
  • 1
  • 8
  • 21
Harsh Sarohi
  • 807
  • 1
  • 9
  • 18
  • What does this have to do with React, specifically? – Oliver Charlesworth Apr 12 '17 at 11:02
  • please go through the link https://redditblog.com/2016/09/20/amp-and-reactredux/ – Harsh Sarohi Apr 12 '17 at 14:50
  • 1
    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 -https://github.com/jimmy319/amp-react-renderer-plugin which can make it painless to create a component based AMP page : ) – Chickenrice May 12 '18 at 16:13

5 Answers5

11

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

HaNdTriX
  • 28,732
  • 11
  • 78
  • 85
9

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.

Rafael Tavares
  • 5,678
  • 4
  • 32
  • 48
Rajendra kumar Vankadari
  • 2,247
  • 1
  • 16
  • 16
8

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.

TristanZimmerman
  • 606
  • 8
  • 12
Bernhard Zürn
  • 584
  • 6
  • 11
  • 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 https://www.ampproject.org/learn/overview/ . It's official site and it says "AMP pages are built with 3 core components". – Harsh Sarohi Apr 12 '17 at 14:34
  • 1
    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 – Harsh Sarohi Sep 12 '17 at 22:24
5

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

Harsh Sarohi
  • 807
  • 1
  • 9
  • 18
0

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

Renjith
  • 1
  • 1