This document explores the differences between the three different modes to integrate WordPress and Frontity together in order to provide a solution for clients that want to use React to build their themes.
We think that in order to achieve the most seamless integration possible for both developers and content editors, the goals should be:
- Make the integration 100% transparent for the content editors.
- Minimize the number of things developers need to take care of (when compared to a WordPress-only site).
Although we also understand that from the hosting provider point of view, these two factors are also important:
- The amount of hosting support required.
- The final server load.
There are three possible integration modes:
- Decoupled mode:
- It uses two domains, one for WordPress and another for Frontity.
- The main domain (www.domain.com) points to Frontity.
- A subdomain (wp.domain.com) points to WordPress.
- Reverse-Proxy mode:
- A single domain is used for both WordPress and Frontity.
- The reverse proxy takes care of the routing between the URLs that need to be sent to WordPress and the URLs that need to be sent to Frontity.
- Embedded mode:
- A single domain is used for both WordPress and Frontity.
- The main domain (www.domain.com) points to WordPress.
- All the requests are handled by WordPress. No reverse proxy is needed.
- The PHP theme is replaced with an internal HTTP request to the Frontity server.
- The rest of WordPress URLs work normally.
None of these approaches is perfect, each one has its pros and cons, so let’s review them.
1. Decoupled mode
It uses two different domains. The main one (www.domain.com) for Frontity and a subdomain (wp.domain.com) for WordPress.
Due to the two-domains nature of this mode, it’s the mode where developers need to be aware, test, and take care of most things: