As a website owner, you want to create fast, search engine-friendly websites that provide the best possible visitor experience. WordPress ticks all those boxes, but WordPress also powers around 40 percent of the web. That’s a lot of competition!
If your website is going to stand out from the crowd, you may want to add a framework into the mix. Frontity is a modern, React-based framework that was designed specifically with WordPress in mind. As such, it has lots to offer your WordPress website.
In this article, we’ll look at what Frontity is, and why you may want to use it in your next WordPress project. We’ll cover how Frontity can give you an edge in the competitive world of website development, as well as note some potential drawbacks to watch out for. Let’s get started!
A Brief Introduction to Frontity
Frontity is an open-source framework for React. It enables you to build a React-based front end for a WordPress.com or WordPress.org website.
Traditionally, WordPress generates HTML using a theme based on PHP template files. However, when the Representational State Transfer (REST) API was merged into WordPress core, it removed the dependency on the PHP rendering engine. This opens up new possibilities for web developers, including creating front end websites using frameworks such as Frontity.
Once Frontity is set up, your WordPress website will serve its data via the REST API. This API lets you perform Create, Read, Update, and Delete (CRUD) actions on WordPress content, including posts, pages, and even custom post types. This gives developers an easy way to push and pull data out of WordPress.
Frontity is a framework, but it’s also an alternative rendering engine for WordPress. Today, frameworks such as Frontity are commonly used to separate content from the front end. This makes it easier for developers to use WordPress as a headless Content Management System (CMS).
Some Things to Bear in Mind
Frontity has lots to offer web developers and designers, but there are some drawbacks. Before we cover the advantages of using Frontity, let’s look at the potential drawbacks. It’s important to bear these points in mind, when deciding whether Frontity is the right framework for your WordPress project.
Frontity is designed to be easy to use, and is particularly simple to set up. However, you will still benefit from some previous experience with React, especially if you want to develop more advanced WordPress projects. It also helps if you’re familiar with the 'CSS-in-JS' concept.
Some WordPress plugins are supported via Frontity packages. However, it's still a relatively new framework, and therefore it’s unrealistic to expect compatibility with the majority of WordPress plugins. If your project requires a very specific WordPress plugin, you may need to build your own custom solution.
WordPress is well-known for reducing the barrier of entry to website development. Thanks to WordPress’ What You See Is What You Get (WYSIWYG) editor and live preview settings, you can create a website without writing a single line of code. However, Frontity doesn’t offer a WYSIWYG editor or live preview. This can make it difficult to predict how your content will appear when rendered. You may find this particularly challenging if you’re displaying your content across multiple platforms.
Many WordPress developers use Frontity as part of a headless setup. If you plan to use WordPress headless, you’ll encounter many of the same disadvantages as any headless setup. In particular, a headless approach can be challenging for users who don’t have extensive CMS or programming experience.
A headless CMS may also require more maintenance than monolithic CMS installations. You may find yourself investing more time into keeping your headless setup up and running.
12 Advantages of Using Frontity for Your WordPress Projects
Now you know what Frontity is, let’s look at what it has to offer. Here are 12 reasons you may want to use Frontity in your next WordPress project.
1. Frontity Is Easy to Set Up
Frontity makes it easy to set up a WordPress website. This is great for anyone who wants to get their project online quickly, or for anyone who doesn’t have previous experience configuring a React framework.
Assuming you have a WordPress setup and have installed Node.js, you can create a Frontity project with a single command. Simply open a Command Prompt or Terminal on your computer, and run the following:
npx frontity create my-project
Frontity will now ask you to choose a theme for your project. Make your decision, and Frontity will clone your chosen theme, create all the necessary Frontity files, and install any required dependencies. After a few moments, you’ll see a Frontity project created message. You’ve just created your first Frontity project!
This is just the starting point, but using Frontity you can build and launch a simple web application in five easy steps. This ease-of-use has already earned Frontity praise from the WordPress community.
Columbus-based design studio Fort recently redesigned their website using Frontity. When describing the project, a Fort representative was quick to point out how easy it was to get started with Frontity. “It’s kind of crazy how quickly I was able to do this knowing nothing about Frontity and not being super advanced with React. It was a 2.5 week dev timeline.”
The Frontity React framework also has its own state manager and uses Emotion for the CSS. This means you can start using the Frontity framework without having to master additional technologies, such as Redux. This leaves you free to focus on what really matters – building your project.
2. There Is 100% Focus on WordPress
In the world of React frameworks, Frontity stands out from the crowd as it was designed specifically for WordPress. Every part of the Frontity framework has been simplified and optimized to work with both WordPress.org and WordPress.com. By opting for Frontity, you can avoid the manual configuration typically required to use a React framework with WordPress. This saves you time, while providing a better user experience.
It’s also encouraging to see that Automattic, the parent company of WordPress.com, is a major financial investor in Frontity. Speaking about the Automattic investment, a Frontity spokesperson posted: “Having the support of Automattic will allow us to connect and collaborate with their partners to support larger projects and bring headless WordPress and Frontity to a wider audience.”
There are other React-based frameworks that are compatible with WordPress, including Next.js and Gatsby.js. However, these frameworks aren’t designed specifically for WordPress.
If you do use an alternative web development framework with your WordPress project, you’ll typically need to perform manual configuration and optimization. You may also need to install additional tools.
3. Frontity Can Make Headless WordPress More Accessible
React-based frameworks such as Frontity are gaining popularity within the WordPress community, particularly with developers who want to set up headless WordPress. As a 'monolithic' CMS, WordPress traditionally restricts your content to a specific output. However, with a headless setup you'll provide your content as data, via a REST API.
This data can then be consumed by a range of technologies and displayed across potentially any platform. If you want to display the same content across multiple platforms, headless WordPress is a way to create your content once, and display it anywhere.
It’s possible to run headless WordPress without using the Frontity React framework. However, Frontity removes much of the complexity from a headless setup. This makes headless WordPress accessible to people who don’t have extensive CMS or programming experience.
Even for developers who are familiar with a headless CMS, Frontity can remove much of the tedious busywork typically associated with launching and maintaining a headless setup. This leaves you free to focus on what really matters – creating great content.
4. You Have the Freedom to Use Modern Web Development Tools
Frontity uses the WordPress REST API as an interface to access your content from outside the WordPress framework. This gives you the freedom to use the front end tooling that’s the best possible fit for your project. You could even display your content in ways that WordPress wasn’t designed to support.
Frontity’s flexibility doesn’t end when you’ve built your content. You can continuously refine and revise your approach, as your project evolves. You could even potentially interchange parts of your technology stack, to suit the changing needs of your project.
This flexibility has earned Frontity praise from web developers. Oriol Egea recently migrated his blog to Frontity, and expressed excitement over where he might take his project in the future.
“As it’s a React app, the possibilities are unlimited,” he said. “I’m already thinking to add some extra-features with business-logic to my blog, and using WordPress as a headless CMS, and having an isolated React App to develop the front end is the best scenario to achieve that.”
It’s possible to build a headless project without using a framework such as Frontity. However, this would typically require you to manage a list of tasks, including routing, server rendering, and retrieving data from WordPress. By using Frontity, you can benefit from this flexibility without having to do the legwork.
5. You Can Continue Using the Familiar WordPress Back End
Most popular frameworks have lots to offer. However, these long-term benefits often come at a short-term cost.
Many frameworks require you to learn new technologies, tools, and concepts. Even if a framework boosts your productivity in the long-term, it may still be bad news for your short-term productivity.
With the Frontity React framework, you can continue using the familiar WordPress back end. Every change you make in the WordPress dashboard, will be pushed to your project’s front end automatically. This helps you transition to Frontity without impacting your short-term productivity.
6. Frontity Can Support Multiple Sites From a Single Installation
A single Frontity installation can serve content to multiple websites. This can be useful if you manage multiple client sites, for example if you’re an agency or freelance WordPress developer. By launching and managing multiple projects from the same Frontity installation, you can minimize your set up and administrative work.
If you launch multiple sites from the same installations, Frontity will create a separate package for each site. This means you can create unique settings for each of your WordPress projects.
7. Your Site's Performance May Improve on Desktop and Mobile
The Frontity React framework can improve your website’s performance in several key ways. When you build a website using Frontity, its core code is loaded just once. If the state of a component changes, Frontity will re-render the necessary components only.
Once the page has loaded, Frontity’s router will prefetch other routes and data automatically. This means your visitors should never have to wait while navigating your website.
To further boost performance, Frontity uses Serverless Pre-Rendering (SPR) to render HTML on the fly. By taking this approach, the Frontity team aims to combine the speed and reliability of static rendering with the versatility of dynamic data rendering. A Content Delivery Network (CDN) saves the HTML then serves it as static content.
By helping you deliver a high-performing website, Frontity can improve the visitor experience. This can have a positive experience on key user metrics. Some companies have already documented their experiences of switching to Frontity, including pet-sitting platform Gudog.
After switching to Frontity, Gudog reported "almost instant load times on mobile". As a result, Gudog experienced a 149 percent increase in page views, and a 78 percent boost in time spent on its website. This culminated in more conversions, as Gudog reported a 66 percent increase in user acquisition.
There are other factors that can boost your project’s performance. By hosting your Frontity project as part of a headless setup, you can avoid wasting resources on content editing and content rendering.
Your choice of hosting provider can also have a huge impact on your website’s performance. Wherever possible, we always recommend choosing a hosting provider that prioritizes performance.
8. Frontity Is Search Engine Optimized
Google has stated that site speed is a major ranking factor. By improving your website’s performance, Frontity can also have a positive impact on your Search Engine Optimization (SEO). This often results in greater traffic and more conversions.
From 2019 to January 2020, Gudog tracked their organic blog traffic. They reported an increase of 88 percent after switching to Frontity. The blog also ranked number one in Google’s search results for keywords related to their business.
There’s further evidence to suggest that Google specifically measures time to first byte when evaluating site speeds. This is another area where Frontity can positively impact your SEO.
As a server-side framework, Frontity stores all your content in HTML, then responds to requests with a fully populated and well-formed HTML page. The server then sends this data to the user’s machine, and the browser constructs the content and displays the webpage. This means the initial page load is faster, which reduces time to first byte.
9. There Is Compatibility With a Wide Range of Add-Ons
When choosing any tool or technology, it’s useful to have access to a range of add-ons. Every WordPress project is unique, so there’s a chance that the Frontity React framework may not meet all of your needs, out-of-the-box. You can use add-ons to customize or extend Frontity, to better suit your project.
Frontity is compatible with all the React packages available from the popular Node Package Manager (NPM). The Frontity team is also working on extensions for several popular plugins and services, including AdSense, Disqus, and Google Analytics.
What’s more, Frontity is compatible with all the WordPress plugins that support the REST API. If you want to use a WordPress plugin that doesn’t support the REST API, you have two options. You can either adapt the logic in your Frontity project, or use PHP to extend the incompatible plugin. If you’re interested in converting your WordPress plugin, Awsm Digital Innovations has shared their experiences of creating a Frontity Package.
10. Frontity Helps Protect Your Content Against Attackers
With WordPress powering almost 40 percent of all websites, hackers are always looking for ways to break into sites that use it. In fact, WordPress accounted for 94 percent of hacked websites in 2019. If a hacker manages to hack your site, they could upload malware, steal important data, or even delete your website entirely.
Solutions such as Frontity can make your site less vulnerable to attack, by separating your content from the presentation layer. This means your site has a smaller attack surface. In particular, Frontity can reduce your chances of falling victim to a Direct Denial-of-Service (DDoS) attack.
Since your content exists separately to your front end delivery, it also isn’t as vulnerable to third-party application issues. This includes security vulnerabilities and bugs that are sometimes present in pre-existing technology stacks.
11. There Is An Active Frontity Community
Released in 2019, the Frontity React framework is classed as a relatively new technology. Despite this, the Frontity team has done a great job publishing all the documentation you need to start using this React-based framework. There’s also an active community forum where Frontity’s developers take a leading role in answering questions and offering advice.
These resources can be essential if you encounter any technical issues. They can also ensure you’re getting the most out of your chosen tool.
If you need more specialist, advanced help, you can always connect with the React community. As an established technology, React has a very large and active developer community.
Major firms such as Facebook, Airbnb, Dropbox, Netflix, and Reddit also use React to build many of their applications. This comes with a lot of perks in terms of development and expert base.
12. You’ll Have a Range of Hosting Options at Your Disposal
We’ve already seen how Frontity can improve your website’s performance and SEO. However, it’s also important to choose the right hosting provider. Choose the best provider for your Frontity project, and you’ll get an additional SEO and performance boost. Get this decision wrong, and you may undermine everything that Frontity has to offer.
When it comes to hosting your Frontity project, you have lots of options. The Frontity server code is small enough to work with serverless technologies. This gives you the freedom to choose the hosting provider that has the exact features your project needs.
You can deploy your Frontity project to any Node.js server or serverless provider. For example, you can use npx frontity serve to run your project like a standard Node.js app, or upload it to a CDN and serverless service. Frontity recommends Vercel as a serverless solution. Alternatively, you could use AWS Lambda, Netlify, or Google Functions.
For the best results, we recommend opting for developer-friendly web hosting that’s optimized for Node.js. Alternatively, since you’re using WordPress as the back end you can always use your favorite WordPress hosting solution.
Conclusion
WordPress development can be a competitive business. However, by enlisting the help of a modern framework such as Frontity, you can take your WordPress projects to the next level.
There are many reasons why Fronity is becoming popular with the WordPress community. In particular, Frontity can help boost your website’s performance, which has a positive impact on the visitor experience. A high-performing website is also great for SEO, as search engines such as Google use page loading times as a major ranking factor.
If you want to increase your search engine rankings and wow your users, Frontity is just one way to boost your website’s performance. At Hosting.com hosting, we provide speed optimized servers with a Turbo Server option that’s 20X faster than our competitors. It’s perfect for using in combination with a modern, performance-focused framework such as Frontity.
Image credits: Unsplash.
