There is always a time while developing web apps when you have this dilemma about which stack to choose. We usually have to trade-off between the performance (faster load times) or aesthetics ( the user experience ). All frameworks have there pros and cons and I don’t choose to favor one over another. But instead of choosing a single stack, I thought it would be cool to try something new and go with a paired tech stack. In this read, you will be able to see the why and Ifs to both of these technologies and how you can make them coexist enabling a seamless user experience. The final outcome is going to be a web experience that will use AMP for improved search results and instant load in search appearance proceeding to a React PWA that has fluidity enabled by virtual DOM. This means that we have to create 2 frontends with the exact same content and UI so that the user doesn't feel much difference. This read will cover the why and the Approach. And the next read will how and the steps to accomplish this.
Who will actually need this?
Ecommerce Sites relying on Google Search for customers and then wanting to have a closer audience with PWA
News and media sites with quick SEO ranking needs
Content sites like medium and Twimbit
Why AMP+ReactJs?
The usual scenario for a person to discover your app is via Google Search. AMP has a unique advantage over other frameworks that it can perform better on search rankings and also gives a bolt icon to your search results. It will also give an instant load as soon someone clicks the AMP search results which feels as if the content was part of search results. This can be easily achieved if you can create a 100% valid AMP Page. You might have compromise on some aesthetics and user experience on the way to have a 100% AMP valid page. It would look great, as AMP has almost all the web components. Switching between the pages would be as instant but not seamless.
This is something we discovered on the path of creating a perfect PWA that the navigation should be seamless. And for this particular reason, we have to move to ReactJS because of its Virtual Dom implementation. But the important part is how to make this transition without the user even noticing it.
The Approach
Following is the scenario for our users —
The user finds an AMP-enabled search result with a bolt icon.
On clicking the results it will take him to the cached version of the AMP page.
On any further click, it should take him to the React Page which is PWA enabled
Users will choose to install our PWA on the install prompt.
Now that our PWA is installed any repeat visit to search results containing our domain name will take him directly to our PWA.
Steps
These are the overview steps to do it with WordPress
Create an AMP valid WordPress theme with all components as per your design requirements with link Relation of React page.
Install WPGraphQL plugin
Create ReactJS frontend with all components as were in AMP theme
Fetch the content from Wordpress via GraphQL( we have user Apollo client)
Keep the URL structure the same as of the WordPress permalink Structure
Enable PWA
Apply URL forwarding using HTACCESS method
The detailed method to create this experience is in my upcoming Read.
Things to consider
The UI should look almost the same for a smoother experience
AMP page should be 100 % valid in order have bolt sign and cached google result
Both frontends should be hosted in the same parent domain but with different subdomains (“amp.domain.com” + “domain.com” )or directories (“domain.com/amp” + “domain.com”).
The URL structure should be the same.
If your site is dynamic then there should be Backend CMS to serve paired content to both of the Frontend.
ReactJS page should be PWA enabled.
Here is an example stack of what we used at Twimbit to accomplish the approach. WordPress as backend CMS with paired AMP theme and ReactJS connected using WPGraphQL.
Conclusion
Though it feels very complicated actually creating this was fun and really simple. The entire Development cycle took 4–5 weeks with just 2 developers one for AMP + WordPress and the other for ReactJS. Everything that we used is opensource and well documented. And in the Next Read, I will tell the actual steps to create this stack with all links to the Documentations. We didn’t face many issues apart from some CDN and server-side errors which are also covered in my other reads.
