*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.
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.
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.
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.
The main reason to follow this approach is the website speed. The reactions are instant, with no page refreshes, etc..
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.
These websites have been built using this approach:
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.