Why migrate from WordPress to GatsbyJS

Last year, our very recent start-up, a mobile app preventing you from getting parking tickets, needed a website and a blog. We didn't need much, mainly display information about our app and a blog where our marketing team would be able to write blogposts, without any code. So we decided to go with WordPress.

Why use WordPress ?

No one can deny it, WordPress is extremely popular. 29% of all the websites on the internet use WordPress. The main reasons we decided to go with WordPress are its simplicity to add content for non-devs and the rapidity to modify anything that goes with it. WordPress has a huge community backing it and a massive amount of plugins to make the life of people who use it easier.

But of course WordPress also has some negative aspects. Wordpress is based on PHP, and has a lot of legacy code, because of its different use cases. This often goes with bad performance and complicated optimizations. WordPress is easy to configure, without optimizations, but really slow. With our WP website, such page load times could affect the traffic. It's even more important now that Google explicitly states that the ranking depends on the page speed.

GatsbyJS

As mentionned before, WordPress is an old technology, and technology evolves really fast. The new trend in front-end development is JavaScript and its ton of frameworks around. In those, React.js has acquired a huge popularity and community.

So here we were, we needed a new technology for our website, that we can easily host, without optimizing that much, and that must be faster.

We heard about GatsbyJS, a static site generator using React. This got us very interested since we use React Native in our app and are very familiar with React.

Unlike WordPress, Gatsby doesn't render pages when a user visits it. Pages are generated at compilation, before putting everything online. We don't need servers anymore and can serve static files (Html, JS and CSS, directly from a bucket storage). No need for powerful PHP servers anymore.

One downside of this is that you cannot directly see the result of your changes on the website. You first need to compile everything. This is easily done with Gitlab CI/CD pipelines that compile the website and put everything online.

Gatsby is actually pretty fun to use! You can make templates for your blogposts and write them in markdown. It took our marketing team less that a day to add blogposts by themselves, written in markdown. Since Gatsby is powered by React, you'll be able to nicely structure everything with components. This modular aspects allow the dev team to reuse a lot.

GraphQL

Gatsby also uses Webpack and GraphQL. The last one was a very nice surprise to us. What's really powerful is using GraphQL as the query language. Everything is defined on the side of the client executing the query. And this client has no need to know what's inside.

This abstraction allows to connect any data source to Gatsby. Meaning that your blogposts can come from Markdown files, google sheets, airtable records or even another wordpress website. In our case, we use Markdown and airtable to generate content. Markdown is used for blog posts and airtable for other pages of the website.

Performance

The most impressive part after the swap has been the performance. Using Webpack and routes, Gatsby doesn't download the whole bundle each time you go to another subpage, it will just fetch new content. Gatsby is also really nice to use with pictures, which are usually a big problem for performance. Based on the screen size and resolution of the client device, it will serve appropriate image size. Also, gatsby comes with a preloader on link hover. When you hover a link, it certainly means you'll click on it. So why not preloading the page ? That's exactly what's Gatsby does by default. Really convenient!

Conclusion

We certainly are happy with our migration to Gatsby! Everything feels more under control now. The website's source is on GitLab, no need for tons of backups anymore! The possibility to create a branch out of the "production" environment and test everything in preproduction is a huge benefit aswell. We had to teach Git to the marketing team, but it's worth it.

If you are interested in GatsbyJS, you should definitely check the official tutorial out.

And if you want to disrupt parking market with new technologies, join us ! We have great positions for devs and non-devs.