Good afternoon,
First of all, excuse my English and my programming level, I am a boy who is making his way in this world.
I have several doubts with Frontity,
The first one: Why should I prioritize using Frontity and not a 0 application with React and calling the WordPress API?
The second: Should I create a WordPress installation in a subdomain for example back.domain.com and make the calls from my front and this front publish it in my main domain?
Thanks and sorry for noob’s questions…
For your second question
Embedded vs Decoupled. Pros and Cons explained for each.
For now I choose embedded where front end and admin users access the same domain with WP on it, and the Frontity node server is running somewhere else like Vercel
For your first question, Frontity is specifically designed for Wordpress and has many features for simplifying and optimizing communication and processes for dealing with the WP REST API.
If you roll your own you’re going to have to write a lot of that functionality yourself, including autofetch and data caching etc.
Then there’s the serverside rendering for ensuring search engines have good SEO visibility of the rendered content
Why use Frontity?
Well, technically there is no reason to use it.
WordPress alone can be optimized more than enough, but with a headless CMS it’s easier do that (except for the technical knowledge required, which you’ll need for standard and headless both).
Also, there are several frameworks like Frontity which work similar, and it’s always possible to create your own in with the tools you prefer (Angular and Vue are great alternatives for React).
Personally I use Frontity because it’s easy to work with, is logical enough to create my code on top of it and has a skilled community to help with problems.
The first question is a great one to ask because I’ve actually been re-evaluating my decision to use Frontity lately:
Why use Frontity?
Frontity is great for WordPress sites that are built with React. You don’t need to code anything in PHP if you don’t want to. Just download an underscores theme (or similar), add ACF, add an options page to the theme, and you’ll code in React 95% of the time. As you know, React has a great developer experience and a healthy ecosystem of optimized plugins from which to extend your website.
Frontity also brings SSR to the table, meaning your sites load quickly; pre-fetching, meaning your pages load when the user hovers over links; and it decouples your back end from your front end. I’m constantly getting Wordfence attack notification emails from non-Frontity sites because the website is so obviously built with WordPress that hackers know to target them with scripts. With Frontity, there’s an obfuscation of the back end that lessens the quantity of these attacks.
Frontity works great with WordPress plugins like Yoast and Contact Form 7 and even many others that use shortcodes even though your site is built in React. I’ve never tried to offer this support within React myself but I know that there are so many plugins that the fact that Frontity handles them without too much hassle is a serious achievement.
One bonus with Frontity that I always wanted when developing WordPress sites is sharing the back end between development and staging/production environments. In other words, multiple Frontity deployments or environments can connect to the same back end. So my colleague can work off of exactly the same data that I do and that of my staging site, without migrating the database, uploads, and theme files after any changes. At production time, just make sure to have a cloned staging site for changes and you’ll be fine.
Lastly, if you or your client ever wanted to leave WordPress behind, you would just write your own connector to whatever CMS/back end you’d want to use and your Frontity site should look more-or-less the same. I haven’t gotten to that point with any client so far but you can’t really do that with a traditional WordPress theme.
Why not to use Frontity:
I’m mostly going to be referring to my pre-Frontity setup, which was WordPress websites built with the ACF Pro and Timber plugins, the latter of which allows you to use the Twig templating engine, plus I’d throw in Bootstrap, jQuery, and I rolled my own builder with Gulp.
First realize that Frontity is opinionated. You should be using Emotion and CSS-in-JS, the team has built the project with a specific structure, and the components included have their own idiosyncrasies. Personally, I like the decisions that the Frontity team made but it takes some time to learn them and why they were made that way. It’s not just React or Next, it’s a whole other beast.
Frontity is a bit more complex and I have many more issues explaining how the sites work to clients. In general, clients who ask for WordPress websites 50% of the time don’t update it often enough to warrant having a CMS nor that they learn how to actually use the site. Add Frontity into the mix and they can bring down their own site way too easily or not understand how to preview pages. This to me is probably the biggest issue with Frontity and I know that the team are working on making it more cohesive.
Most recently, what makes Frontity a difficult choice to stick with is it requires developers to know PHP, MySQL, React, and CSS/SASS for maintenance. I was looking for an employee to work on sites with me and it was so difficult to find someone with those skills who was looking for work. However, finding a React-only or a PHP-only developer would be much easier.
I haven’t checked the documentation in a while but the last I heard, you had to write your own eCommerce solution. With my old setup, I just installed WooCommerce and it was ugly but it worked. I’m not even sure how to start with Frontity at this point but I believe the team is working on something for it. This is a big blocker for a lot of sites where I don’t want to spend the same amount of time developing the whole theme just to add eCommerce when a PHP-based theme would be up and running in no time.
Conclusion
In my opinion, if you want to make a React site with a WordPress back end, Frontity is at a point where you should be able to get up and running with no prior Frontity experience in less than a day. Building the fetches and caching and SSR for React yourself will definitely take longer than just installing and configuring Frontity.
However, if you are unsure whether the site needs to have React on the front end, it’s worth considering a regular old WordPress site. If the client has a higher monetary and technological budget (as in they don’t mind spending more and understand more complex programming solutions), Frontity is a great choice. On the other hand, I think that for lower budget projects (where you aren’t just taking it on for learning) with clients who don’t know how to use WordPress already or where eCommerce is necessary, it might be easier and cheaper to stick with a PHP-based theme.
But just take a moment to also consider that Frontity is really new. Anyone using it now is essentially helping shape this rather remarkable solution for years to come. It definitely opened up React to me and I couldn’t be more thankful to the team but I would say that it’s not 100% my go-to as of now.
Hi all!
Just to add some more resources to this conversation, these diagrams may help you understand how Frontity, the WordPress + React stack and the proper performance strategies may improve the final performance and SEO of your project (besides having a great content creation, development and user experience) in both Decoupled and Embedded Mode