*The art picture provided by Zenaviv project. The artist - Lee Jaworek, the art title - 'Apples'.

Historically, we develop websites that are more or less WordPress based. This helps us make them faster and flexible enough to satisfy the greatest number of needs. We usually create highly customized features such as content filters, checkout flows, product carts, and so on, depending on the client’s business, using the WordPress API.

One day we wondered if the WordPress theme could be built with the React on the frontend.

Why?

The regular WordPress theme renders its HTML on the server using PHP by WordPress. The browser then downloads the HTML and displays it to the user. This is how the majority of websites work. However, generating and downloading the HTML on every individual browser's request takes time. We have found an efficient way to reduce the amount of time involved.

Technology evolves rapidly and more and more websites have started to utilize a technique called Single Page Application (SPA). This technique increases the speed and efficiency of sites by reducing the size and number of responses from the server. The HTML rendering is done by JavaScript on the client side so it feels like the input response is almost instant, optimizing the user experience. What I mean by this is shown below. Notice how the results appear as soon as you finish typing, without a page refresh.

Technique called single page application

How?

To convert the regular WordPress theme into a SPA we use React. Of course, it can be any JavaScript framework that allows us to make that conversion, for example, Angular.

HTML vs. JSON

Wait a minute... Single Page Application? But usually, the WordPress website has much more than just a single page!

And that is the correct question. Each WordPress page is still going to exist, but prepared a bit for our future SPA. The page URLs will match the React so-called Routes. The Route changes will trigger the application to load page data in JSON format. This is done by hooking the HTML response and returning the corresponding JSON instead. It should be built depending on the current WP Query.

This does not mean replacing the HTML completely. The HTML still does its job, but as React components that render the data from the JSON. This part may be kind of tricky because it depends on the needs of the application you are about to develop. We usually build our pages with the SiteOrigin Builder plugin using its predefined widgets and our custom ones we develop during the work on the SPA. The key thing is to convert the content of the widget to JSON.

Convert the content of the widget to json

REST API

Of course, you may wonder how to handle custom things like form submissions or add to cart functionality, etc. in such a SPA. Yes, we were able to do all these by using the WordPress REST API. In general, this allows you to add custom restful endpoints to your WordPress website to make it possible to implement handlers for features that are not possible to achieve by just converting the HTML to JSON. This is often done using WordPress AJAX, but it is more convenient and professional to use the WordPress built-in ability to create REST Endpoints.

For example, your WordPress SPA front end can produce a request to your custom endpoint that processes data collected on a contact form. No page refresh is required and it does not convert any HTML to JSON, but still follows the SPA convention and instantly reacts to the user actions.

This is another demonstration of how this works. Notice how fast the page changes without any page refresh.

SPA convention and instantly reacts to the user actions

Advantages

SEO Friendly

Despite the fact that search engines started crawling JavaScript websites some time ago, the well-known problem of SPA sites is that it is hard to handle SEO tags, sitemaps, etc. especially if this is a website with thousands of pages. With React on top of WordPress, we solve this problem. WordPress still prints meta tags and produces the sitemaps and React does all the visual work.

Speed

The main reason to follow this approach is the website speed. The reactions are instant, with no page refreshes, etc..

Optimization

As you may know, the regular WordPress theme, plus plugins, produces a lot of assets, including JavaScript and CSS. On the other hand, React usually bundles everything into just a couple of files. It becomes easy to score 100 points for performance in the Lighthouse or the PageSpeed audits which positively affects your website SEO. This is especially important when browsing using mobile devices because the bandwidth can be limited and it is always better to download combined assets quickly.

Known Cons

Yeah, unfortunately, this approach has some limitations that we partially solve or deal with.

For now, we don't have a good way to handle WordPress shortcodes. In other words, the plugins that utilize shortcodes actively will just not work as you may expect.

Even if the plugin does not use any shortcodes, it still may not work. This happens because usually plugins change the HTML output that WordPress themes generate to provide some new functionality to the front end. In our case, it may also be broken. In such cases, we use the plugin API (if such exists) to make features that it provides for regular themes work in our SPA theme. For example, the project that implements a product cart: https://financialsocialwork.com/ We had to create our own cart UI/UX using the API that the Easy Digital Downloads plugin provides.

we had to create our own cart UI:UX

Examples

These websites have been built using this approach:

Conclusion

It is possible to use a WordPress website just as a back end for the SPA application. It has its pros and cons.

  • Very important is that it is SEO-friendly, which is hard to achieve with the SPA.
  • Such websites work fast and use minimum network traffic.

It still may be challenging to put React on top of WordPress but we continue to work actively on creating the best scaffold system for quickly creating websites based on this approach.