Frontity - Easiest way to take your WordPress project to the next level (Review 2021)
Using the React framework for WordPress can be confusing for some developers as they need to understand and configure the bundling, transpiling, routing, server rendering, retrieving data from WordPress, managing state, or managing CSS to build their website’s front-end.
To help you, developers who face this difficulty, we will review a free and open-source framework that can help you easily create websites in an instant, Frontity.
Getting Started
Frontity is a React-based framework that enables you to easily build a frontend for a headless (or decoupled) WordPress site. It works by serving your WordPress site as its data via the REST-API. In addition to that, it connects seamlessly with WordPress so you can focus on building your website or blog.
If you want to get started with Frontity, you only need to have a WordPress site and Node.js. No complex configuration is left to the developer and the number of concepts you need to learn is minimal. Besides that, Frontity is an open-source app and free to use.
Unlike Next.js and Gatsby.js, Frontity is a fully optimized framework on React for WordPress. It aims to make everything simpler as it has simplified each part of the framework and developers don’t need to figure out or make decisions about what tools to use for things like CSS or State Management.
How Does Frontity Work?
Using Frontity, you create a headless or decoupled CMS in WordPress just for managing the content. To do that, Frontity uses data from the WordPress REST API and generates the final HTML that is displayed in the browser using React. However, you don’t need to be confused when using it as you still use your WordPress dashboard to edit and create content as you usually do. Whenever you make changes, the content is automatically updated in your Frontity site, just as it is when using a traditional WordPress theme.
Frontity apps require both a Node.js server and a WordPress server (PHP) to run on. As for the architecture and configurations, there are two main Frontity Modes:
Decoupled Mode: Frontity fetches the data from the REST API of the WordPress Server and returns the final HTML to the visitor as an Isomorphic React App.
Embedded Mode: unlike decoupled mode, the Frontity Embedded Mode plugin is the one that replaces the PHP theme and makes a request to the Frontity server to retrieve the HTML as an Isomorphic React App, which is returned to the visitor by WordPress.
What Are the Features of Frontity?
Zero setup development
No need to set up anything before using Frontity. Whether it’s React, webpack, Babel, SSR, Routing, CSS-in-JS, WP REST API, TypeScript, Linting, Testing, and so on are ready, so you can focus on developing your site.
Lightning-fast loading
Frontity provides HTML that is ready to navigate the site right away, making the initial load feel nearly instantaneous. There are no additional assets or round trips required. Without JavaScript, React takes control of the app after it has loaded, and users will not notice any changes because it is completely transparent.
Server-side Rendering
Frontity answers with a React-generated HTML file. As a result, this cuts down on the time it takes to create the initial piece of content and guarantees that the SEO isn’t affected.
Extensible
Frontity allows you to simply add new functionality to your theme via extensions and NPM packages without having to start from scratch. There are many Frontity additions, including Yoast SEO, AdSense, SmartAds, DoubleClick for Publishers, OneSignal Push Notifications, Disqus, Google Analytics, Google Tag Manager, and ComScore.
Apart from these extensions, Frontity has its own set of interface capabilities, such as context routing, swipe navigation, endless scrolling, html-to-react, gutenberg-to-react, and so on. In addition to that, you can use any of the 80.000 React packages presently accessible on NPM in their themes.
Perfect accessibility
Frontity is fully accessible by default for WordPress and React and will give developers tools to notify them if they break it.
Battle-tested framework
After several trials and feedback from the community, the open-sourced Frontity is a proven and perfect tool for creating engaging frontend experiences, having been used by millions of people.
Serverless & horizontal scaling
Because of its tiny server, Frontity is ideal for serverless environments. In other words, this means unlimited scalability for the front-end. All of the server code is in a single file and ready to use with serverless services such as Vercel (which now has a CLI) or AWS Lambda. Moreover, Frontity is also ready to scale horizontally in any Node.js server.
First-class TypeScript support
Frontity provides excellent TypeScript support. Therefore, you can choose whether you want to use this or just go back to the ordinary JavaScript.
Support for ES6 in modern browsers
Frontity creates two JavaScript bundles; for ES 5 (for older browsers) and ES 6 (more compact and quicker). If you have modern browsers, it will request the ES6 bundle, which results in a smaller bundle size and faster browser assessment time.
Support for WordPress.com & WordPress.org
Frontity is compatible with a variety of “source” extensions. The initial beta version contains a “wp-source” that connects to any wordpress.com or wordpress.org site’s REST API. Frontity will meet your needs whether you have a self-hosted site or one hosted by Automattic.
Support for multiple sites with a single installation
Similar to WordPress multisite, Frontity allows you to serve an unlimited number of sites from a single installation. This is particularly beneficial for those who manage several clients or who wish to set up a network.
Code Splitting
Frontity splits the code and sends only the code necessary for the app to work using webpack. It also allows developers to use loadable components to dynamically load components.
Smallest React bundle possible
As a result of keeping the core as minimal as possible, Frontity assists in the development of fast-loading websites that provide better user experiences. As of now, it only weighs 60 kilobytes (gzipped).
Ready for React Concurrent and Suspense
As React currently working on Concurrent Mode, a collection of improvements that will improve the user experience of React apps, that will be compatible with Frontity too.
Why Should I Use Frontity?
Free & Open-source
Frontity is available free for everyone. In addition to that, it’s an open-source framework and already has a big community so you don’t have to worry about tutorials and updates.
100% dedicated to WordPress
We can say that Frontity is an optimized framework that solely focuses on WordPress. This means you don’t need to learn new tools and configurations to use it. Frontity doesn’t have a complex configuration to get started and provides pre-configured queries to the APIs.
Opinionated framework
Unlike other frameworks, Frontity has its own state manager and CSS in JS solution. Thanks to the open-source label, you don’t have to figure out how to configure these tools, or learn other technologies such as Redux or GraphQL.
Extensible like WordPress
Rather than that of other JavaScript frameworks, you can add new functionality or expand the capabilities of Frontity using the existing Frontity and npm packages without having to build them from scratch.
Moreover, Frontity themes and extensions can be activated and deactivated without code changes and are reusable across projects, helping reduce both development and maintenance times.
SEO optimized
Frontity does Server Side Rendering. It uses isomorphic rendering so this means the browser will get fully formed HTML for pages (ready to be indexed). This makes it optimized for search engines right out of the box. Not only that, but Frontity also has an SEO package that adds support for some of the most popular WordPress SEO plugins.
Reliable for real-time content updates
Dynamic rending means the HTML does not have to be rebuilt each time the content is edited or new content is published. As a result, Frontity sites can be as fast as static sites as most of the requests are handled by intermediate cache layers and are cached by a CDN. Therefore, Frontity provides great power and reliability when it comes to frequent and real-time content updates, making it a great fit for those projects with content that might change rapidly.
How To Use Frontity?
How to Build a WordPress Web App with Frontity (in 4 Easy Steps)
Pros
- Easy to set up
- 100% dedicated to WordPress
- Fun to use
- Include advantages in the review area.
Cons
There are currently no drawbacks.
What Are the Alternatives to Frontity?
Conclusion
Improving your website’s performance, raise your search engine rankings, and impress your users is not an easy task. However, you can take your WordPress projects to the next level using Frontity.
With Frontity, you can boost your website’s performance along with creating a good user experience. It’s also optimized for SEO which has a positive impact on the visitor experience. Besides that, a high-performing website is also great for SEO, as search engines such as Google use page loading times as a major ranking factor.
References
Explore Docs
Related Post
