Can part of my WordPress website be headless?

Just to set the scene I have a client that has a wordpress site with a mixture of static pages and woocommerce shop. The product catalogue has approx 86,000 products in it. This number may include variation though it is massive. The client relies heavily on product filtering functionality for users to get to the correct products. Using WP AJAX to do this has proven really slow. After a bit of research I think the best way to perform the filtering super fast is through a React JS app and accessing the product data through the REST API (I've been looking at using Frontity). My question is: Can the static pages be served though regular wordpress and a filtering page served via a single page React JS application? This needs to be done all via the same URL: www.example.com(served via wordpress)www.example.com/choose-product(served via React JS app) both sharing a common header, footer and styles to mimic all one website.

Topic headless ajax Wordpress

Category Web

1
answered at

You can mount a react or a vue app partially into a page, so what you ask is theoretically possible but probably not the best solution.

You may consider expanding the react application a bit and go fully headless. In this case, next.js (based on react) might be a better solution as it will allow you easy static page generation/server side rendering. Of course this will be not as easy as a regular WordPress theme editing job, and definitely will take more time. In any case, I suggest you to use graphql instead of wp rest api which will perform better.

On the other hand, the poor performance may not be because of the ajax calls, but because of the poor query/database performance which react or graphql cannot solve as well.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.