There is a good bit of chatter out on the web promoting the use of React as a substitute for a website built with WordPress. Using React does make sense in certain situations, but not as a blanket solution. Below we explore this premise and some of the claims made by React advocates and promoters.
What is React?
React is a JavaScript library developed by Facebook that is used to build web applications where data changes in real-time, without the need to reload the page. Some examples of React powered sites include Uber, Dropbox, and Netflix. NOTE: React cannot live on its own and must be paired with a content source like WordPress, a custom built system, or some other “headless CMS.”
What is WordPress?
WordPress is an open-source content management system (CMS) introduced in 2003. It has grown to be the most popular CMS in the world, and is in use by approximately a third of all websites.
Where does React make sense?
React and other similar frameworks do make sense when the website is displaying Real Time Data, RTD. Examples of this would be if you’re on a website where you need to see a constant stream of current information, such as Facebook. If your website needs this feature, React is a good solution.
When one searches for the advantages and disadvantages of using React and similar frameworks, most of the advantages come from developers who aim to benefit from their skill sets in this technology, rather than giving unbiased information. Generally speaking, the unbiased information out there – if there is such a thing – is that using these technologies for anything other than websites that require real time data is not necessary. In addition they are more expensive and wed the owners to a smaller pool of vendors and technologies.
It should also be said that WordPress and React are not strangers. The current release of WordPress uses React to power their new WYSIWYG content editor called Gutenburg. This is a great match for React’s strengths, since the Gutenberg editor is essentially a SPA (single page application) that lives within the WordPress Dashboard.
In this exploration of claims by React devotees, we will consider the benefits and drawbacks of using React in conjunction with WordPress versus using WordPress in a traditional way.
REACT CLAIM: Lightning-fast page loads
This is sometimes true, but not always. Single Page Architecture (SPA) frameworks, like React, don’t trigger a full browser refresh between pages. Instead, only content is transferred for subsequent page loads instead of the full HTML markup as with a traditional site.
However, tools like Quicklink or Barba can achieve similar quick page loads with prefetching. These tools allow adjacent pages to be loaded in the background so they’re ready immediately once requested by the user:
- Barba prefetch: https://barba.js.org/docs/plugins/prefetch/
- Quicklink: https://getquick.link/
It is worth noting that SPAs, like those built with React, normally have larger initial payloads, so the first page load time can actually be longer than if the same site were built as an MPA, like those built with WordPress. Many times, user impression of website speed is determined by initial load.
For the average user, it would be hard to tell a properly resourced and constructed WordPress-built website from a React-built website. Any difference would be negligible. If your website is trying to shave milliseconds off of load times for some reason…maybe?
REACT CLAIM: Elegant, animated page transitions
Yes, this is true and it is also possible to make this a progressive enhancement with tools like:
- Barba: https://barba.js.org/
- Swup: https://swup.js.org/
REACT CLAIM: More ambitious and engaging designs
React doesn’t enable either of these things.The end result is still HTML/JS/CSS so designs are equally possible with either SPA or MPA approach.
REACT CLAIM: Greater security and stability
Greater security is partially true, as most bots scanning for known WordPress vulnerabilities probably aren’t smart enough (yet) to attack with this sort of setup. There are claims that “it’s possible to configure your servers in a way that obfuscates the location of the back-end server”. It’s unclear how effective that obfuscation is, or how inconvenient it makes administrating the site. For example, it may mean setting up IP address restrictions to WordPress’ Dashboard, which can make collaboration difficult.
The stability argument might be a double-edged sword here, since there would likely be two servers at play instead of just one. There may be some stability gained from having the front-end server handling the traffic load, but it’s doubtful that it’s significantly better than implementing server-side caching, for example with WP Super Cache, or with hosting services that have this functionality baked in such as WP Engine.
REACT CLAIM: Better SEO
SPA frameworks like React may gain a boost in SEO as a result of fast load times, but SPA frameworks are notorious for making SEO more difficult, not easier. Some of the popular solutions to address this in React involve pre-rendering or server-side rendering static HTML which makes the site appear as if it were an MPA (like WordPress) to search engines.
REACT CLAIM: Fewer bugs
These claims do not appear to be documented in any way. A React/WordPress Hybrid setup is more complicated than a traditional standalone WordPress setup, so it is unclear how the former would result in fewer bugs.
Examples of Hybrid WP/React
There are some early stage projects in the WordPress community that are attempting to marry WordPress with React. Some examples include:
- Frontity: https://frontity.org/ – framework to build WordPress themes using React
- GatsbyJS: https://www.gatsbyjs.org/ – Not WordPress focused, but there are several WordPress specific extensions for GatsbyJS
DISADVANTAGE HYBRID WP/React: Plugin Compatibility
Some WordPress plugins won’t work in a React/WordPress Hybrid build, especially those that have some effect on the front-end. This is because the plugins won’t have access to the page rendering process since it all now happens in the browser. This could mean that some of the plugins commonly relied on for functionality in a typical website may not work, which could necessitate a more costly and less-feature rich custom solution.
DISADVANTAGE HYBRID WP/React: Dashboard Experience
Expect a less than optimal Dashboard experience using React on the front-end since WordPress wasn’t designed with this setup in mind. For example, previewing posts may not work.
Advantages of WordPress
Less expensive to develop and maintain
More traction in the marketplace — more developer options
Easy to use maintain and update
More resources — services, software add ons (plugins)
Not tied to a custom system and thus one vendor — flexibility
Summary
If you are comparing an expertly built WordPress site and a React build for anything other than a site that has the requirement of Real Time Data, you are locking your website into a technology that is more expensive, harder to install and maintain and locking your future down with a fraction of vendors. You are swatting a fly with a sledgehammer and missed.