Over the past 9 years I owned different types of websites, all powered by WordPress. I really like this CMS and is not just me. About 33% of all websites on the Internet are powered by WordPress and the great news is that its market share has been consistently growing.
I work with React JS and React Native every single day and I thought it would be great to move one of my websites from WordPress to React. My idea was to still keep WordPress as backend and to create a React application to call the JSON API that WordPress provides.
Let’s take a look at the steps I took and why I decided to get back to WordPress.
WordPress to React
I thought this will be really easy so I started by creating a new React application, setting up WordPress locally and moving all the UI from PHP to React. It took me about 2 days.
Great… that was easier than I expected. Ready to launch!
Actually I’m missing the meta tags for SEO. Not a big deal I thought. I’ve been working with React for over 4 years but I always built apps that didn’t require SEO. This was my first time doing that. Doing some research I came across a library called React Helmet. I really really hoped React would provide something like this by default.
Static React to Server Side Rendered Application
My WordPress was running on a shared web hosting server that I was paying 12 euro/year and I could not run a Node JS application on that.
I signed up for a Google Cloud account, I set up a Compute Engine running Ubuntu, install all dependencies for running WordPress (Apache, MySQL, PHP) and then install WordPress. All went smooth!
Back to my React app. I started to convert it from static to SSR application. I have to say this was a nightmare. I ended up with so many Babel dependencies that I decided to stop before is too late. Moving all my Redux from client to server was also very difficult and felt very hacky and fragile.
Doing a bit more reading I came across Next.js. This was one of the easiest frameworks to understand. It has very nice documentation and examples. Moving my static site to SSR application took a couple of days. My WordPress backend was already running in the cloud and the React app was ready to deploy.
Wait a second! WordPress is running on Apache, there is no way to run my Node JS application on Apache! A bit more reading needed…
The easiest option would’ve been to set up another Compute Engine instance running my Node JS application so that means it will cost me more. Another option was to try a couple of suggestions from Stackoverflow but It was very hacky and I didn’t want to waste more time on this.
Back to drawing board… I deleted the Compute Engine, set up another one, install Ubuntu again but instead of Apache I used NGINX. I never used NGINX before so another couple of days spent learning that and getting both WordPress and Node JS running on the same instance.
All fine so far, but there was one more issue. I chose the cheapest option for the cloud instance which only had 0.6GB of RAM and was not enough at all. I had to go with the next option which was 1.7GB of RAM. That seemed to work ok but it will cost me more. I had no idea how much I will need to pay… a big surprise was around the corner.
Running for one week and the total bill was a bit over 25 euro. WHAT?? There is no way I will be 100 euro/month for a website that makes no money.
Back to drawing board again!
SSR Application To GatsbyJS
I have seen many good reviews about GatsbyJS so I decided to give it a chance. I spent a couple of days playing around, setting up a new project and then trying to implement my design. All went smooth but looking at my package.json there were about 50 npm dependencies all for GatsbyJS. All of these just to get a 3 page website? Doing more advanced stuff like getting the search it would’ve require a couple more dependecies.
That started to look very fragile already and I had to depend way too much on Gatsby.
My main goal from the beginning was to spend my time writing articles on the website, not to maintain its dependencies all the time. A Gatsby site might be loading 500ms faster than WordPress but is it really worth all the effort to maintain it? WordPress also provides searching by default, many plugins and a comment system plus many others.
GatsbyJS to WordPress
I’m used with WordPress and moving to GatsbyJS felt like a step back instead of a step forward since I was missing so many features. I decided to move back to WordPress but this time I tried to optimize it as much as I could.
The first thing was to build a brand new WordPress theme. Previously I used an existing premium theme and modified it but probably 80% of the code was useless since most of these themes are multipurpose.
Next thing was to use a plugin called W3 Total Cache. This will minify and compress all html, js and css and it will even convert all pages to static html so it will load almost as fast as Gatsby.
The last step was to get Cloudflare. If you don’t use it already you should definitely at least give it a try.
This was a very fun experiment and while it feels like a waste of time, I did learn a lot from that.