Congratulations! You’re starting to think about creating a website or updating your old site. Technology is always advancing, and that is certainly the case when it comes to website-development programs. These days, the process of developing websites is changing for the better. 

The traditional method of website development is clunky, bulky, easily hackable, and hard to learn. The new generation of development frameworks for mobile apps and websites are lighter, quicker, more secure, scalable, and flexible. In this article, we will examine the differences between WordPress and React-based frameworks (such as GatsbyJS or Next.js). If you already know you will be using a React-based framework and want a more in-depth review, check out our article “Choosing the Right Framework.” 

When clients consult us, one of their most frequent questions is, “Why should I develop my website with a headless CMS and not use a traditional WordPress site?”

When clients consult us, one of their most frequent questions is, “Why should I develop my website with a headless CMS and not use a traditional WordPress site?”

Let’s break it down for you, comparing and contrasting to help you decide what’s best for you and your thriving enterprise.

WordPress 

When WordPress entered the scene in 2003, it completely changed the game of website development. Currently, one in four websites you visit is created and powered by WordPress. WordPress made building and creating a website possible for anyone, even people who weren’t necessarily “developers.”

WordPress is an open-source content management system built in PHP, meaning that anyone can use and modify this software. What is a content management system? It is a tool that lets a user edit and manage a website from the back end without learning to program code.

What is a content management system? It is a tool that lets a user edit and manage a website from the back end without learning to program code.

WordPress might be an excellent fit for a simple blog or a business that is looking for a basic, static site and doesn’t foresee many future developments and additional features or much growth. It is not the framework for a business that requires a flexible, fast, scalable, and slick site.

WordPress might not be the best option for you if you are a growing business. Because it is a dated piece of software built with heavy PHP code, it has several performance issues. Here are some of the most concerning ones.

• You need lots of plugins for additional features

After you purchase the design template for your website, you will usually have to buy plugins for any additional features that you want your website to have. Over time this can become very clunky on the management end, as you’ll need to install, manage, and update every single plugin. All those additions slow down your website’s performance, as well, lowering its speed and Lighthouse Score.*

* Insider knowledge: Lighthouse is a website-auditing tool that web developers run sites through to test quality, which earns each website a “Lighthouse Score.” This Lighthouse Score indicates how well your site ranks in user experience and performance.

• Frequent theme and plugin updates

Because of the speed of technological advances, things are constantly changing, upgrading, and rearranging. That means you will continually need to update plugins, improve your design, and fix the glitches that are bound to pop up. Because new updates and plugins often cause bugs and code conflicts, which can be difficult to troubleshoot, you may have to pay a developer to investigate and fix them.

• Page speed

Page speed is crucial for getting your audience to engage with your content and hopefully become a long-lasting customer. If your website or page does not load swiftly, users will very likely give up and find another site that offers something similar, quicker. Even more importantly, speed is vital to your SEO score.

WordPress’ fancy plugins cause websites to become slow and glitchy. WordPress is also notorious for not supporting large or multiple images or sizeable quantities of text. Because of these issues, your website is more likely to load slowly and be glitchy or lag behind users.

• Poor SEO ranking

As we mentioned, WordPress can be clunky and slow, and this hinders your SEO.* In addition, WordPress only offers limited SEO-optimizing features in its template packages. These existing features might help you control the basic search and Open Graph metadata, but when it comes to more in-depth site-performance improvements, you will need to hire experts to optimize your site.

* Insider knowledge: SEO stands for search engine optimization, which is the process of creating more website traffic by increasing your visibility on search engines (like Google or Bing).

• Website vulnerability

WordPress is the most common website builder (for now); hence, hackers and spammers target WordPress sites. WordPress’ popularity can actually result in you or your audience falling victim to hacking and viruses (#COVID19!) The other reason WordPress sites are highly susceptible to hacking is that their front ends are fully connected and integrated into the server, making it easy for hackers to overload your site’s server to the point that it crashes.

• Crashing without notice

Crashing is one of the most significant issues with WordPress sites, and they can go down, with no notice, for a minute, an hour, or even days. All this crashing means that you or the company that manages your site must maintain constant vigilance. This adds to your management expenses.

React

Now that we have taken an in-depth look at the good and not-so-good of WordPress, what are React and, more specifically, its most popular web-development frameworks, Next.js and GatsbyJS?

You could say that React was birthed out of a reaction to the above mentioned problems with the traditional method of website development.

Web developers could not keep up with the increasing demands to continually update, debug, and troubleshoot. Push came to shove, and, in 2011, the first React prototype was created by Jordan Walke (who was working for Facebook), breaking ground with its abilities. At its core, React is a framework that uses JavaScript.

Next.js and GatsbyJS are the two leading web-development frameworks within React – like siblings. They are the young, sleek, hipster kids on the scene. They are stylish, they are suave, and they are out-of-the-box thinkers. They are the leaders in web-development frameworks today.

The most significant difference between Next.js / GatsbyJS and WordPress is that Next.js / GatsbyJS have wholly separated the website’s content management system from the front end (the interface) of a website. The term for a separated content management system is a “headless CMS.” This term was quite literally taken from the idea of chopping the head off a body.

The term for a separated content management system is a “headless CMS.” This term was quite literally taken from the idea of chopping the head off a body.

A headless CMS has an interface (for example, Prismic or Contentful), through which you add content, and a RESTful API (for example, JSON or XML) to deliver the content to your website. This approach means that a headless CMS does not care about how and where your content is displayed. A headless CMS has only one focus: storing and delivering structured content. It sounds wild, but, trust us, it works!

Here’s why.

• Website speed 

As a result of the CMS disconnecting from the front end of your site, your website will load incredibly quickly. This is because it becomes possible to deliver the data to your site visitor via a CDN.* Previously, visitors would arrive at your website and wait for your server to load the data from wherever it was in the world. However, a website that sits on a CDN is loaded on thousands of file-storage systems around the world, delivering the data via the server that is closest to the site visitor, thus shortening the loading time.

* Insider knowledge: a CDN, or content delivery network, is a geographically distributed network of proxy servers and their data center.

With the CDN hidden, your site visitors will have virtually no contact with the actual server, allowing for quicker loading speed and no lag. This speed is key to successful SEO, Google indexing, and Google Speed Tests. Most importantly, there will be zero downtime or crashes.

• Development speed 

Because your website’s headless CMS will be entirely separate from the front end, it is possible to have fast, efficient development times and cycles. A bonus from using a JavaScript-based framework is that today, more programmers can use JavaScript than any other programming language. Therefore, it is easier to find developers who can support the site and add new features down the track. Long-term, this efficiency will save you money on development hours. It is also much cleaner and less buggy when compared to WordPress. There are virtually 10 times fewer bugs with a headless React website. In contrast, WordPress is like trying to walk through an overgrown jungle of plugins, viruses, and update glitches (a developer’s nightmare!)

A bonus from using a JavaScript-based framework is that, today, more programmers can use JavaScript than any other programming language.

• Online security 

A server that is frequently down is easily hackable. With GatsbyJS / Next.js, your website sits on a CDN (which means that it’s on virtually thousands of file-storage systems worldwide) and therefore has no downtime, making it almost impossible to hack. That makes for a better user experience and fewer headaches.

• Flexibility and customization 

The possibilities are virtually endless in terms of the custom features and integrations you can develop down the line, including integrating with different types of third-party software and adding store interfaces. You can even quickly launch hidden pages on the fly to present to specific clients, or launch landing pages on the go, without needing a developer (as long as the required slices/components were created previously in the CMS).

• A/B testing

It is much easier to create A/B tests with a headless CMS. An example of this would be delivering two different landing pages, each to 50% of your audience, and testing which version gets more conversions. This type of testing is not possible with a traditional CMS. Because headless CMS is so adaptable, it allows for fast testing that doesn’t require extensive development.

• Fun and intuitive

Last, but not least, a headless CMS is incredibly fun and straightforward to use. WordPress cannot compare with the ease of using a headless CMS. Headless CMS systems such as Prismic.io were built for marketing and media teams.

Now that we’ve discussed the pros and cons of WordPress-based vs. React-based frameworks, it's time for you to decide! If you are a blogger and only want a few pages on your site, it might not be worthwhile building a fully customizable website, and best to use something simple like Squarespace/WordPress or WIX.

However, if you are a more prominent organization or looking to grow, you will want to seriously consider building a highly customizable website, especially if you need to incorporate apps, storefronts, or any of the other, limitless available options.

If you are interested in updating and expanding your website’s capabilities, contact us for a free consultation.