Introduction

WordPress has been the most popular Content Management System (CMS) out there for a long time. Almost 40% of the websites today use WordPress in some shape or form, which in itself is quite a significant accomplishment. Its popularity lies in the fact that it is open-source, user-friendly, secure, SEO-friendly and above all, it is packed with themes and plugins which make the development process more manageable.

WordPress was initially designed and used as a monolith system with the plugins and the themes residing on the same server. But things changed in 2016 when WordPress introduced their REST API, which enabled the creation of headless WordPress sites.

It also means that modern frontend frameworks such as ReactJS can be used in combination with it. It brought better security, scalability and availability to the WordPress CMS solution.

ReactJs has gained traction among web developers over the years because it was fast, easy to learn, component-based, which promoted the don’t repeat yourself (DRY) principle and supported server-side rendering. With the ReactJs team continually rolling out new features, this comes as no surprise that ReactJs is one of the most popular frontend libraries.

Due to its popularity, new frameworks based on ReactJs started popping up with specific use-cases. The two most popular frameworks are NextJs and GatsbyJS, primarily used for server-side-rendering and static-site-generation, respectively.

If ReactJS is so good and WordPress is great too, why not use them together to build a website powered by CMS using modern web development tools. It’s a no-brainer that developers started using WordPress in conjunction with ReactJS. In this blog, we will be scrutinizing two such frameworks that combine WordPress and ReactJS, namely Frontity and GatsbyJs.

Brief

Before we begin our deep dive into these frameworks, it is fair to say that both of these frameworks are great in their ways.

GatsbyJS is a static-site generator. It is used to create blazingly fast sites that are static by nature and have few content updates. GatsbyJs provides flexibility and extensibility with the use of its plugins. Gatsby plugins offer a wide range of functionalities such as making the site offline, adding inline SVG support, adding Google Analytics, and the list goes on.

These plugins can be installed directly and are easy to use. Of all the different plugins that it provides, gatsby-source plugins, in particular, are used to fetch data using GraphQL from either local or remote sources. These sources can range from JSON, CSV files to CMSs such as WordPress and Prismic.

Even though Gatsby is a tremendous ReactJS framework that can work with WordPress, it isn’t designed to work with WordPress exclusively. Therefore, there’s still some additional tooling and complex configuration which is left to the developer.

Here is where Frontity comes into the picture. Frontity is a ReactJS framework designed solely for WordPress. It enables developers to build headless WordPress sites with ReactJS based frontends. It aims to simplify the complex process of creating a decoupled site.

Each part of this framework is optimized and simplified to be used in unison with WordPress. Developers no longer need to figure out what tools to use for things like CSS and state management and dive right in to create a new WordPress theme using ReactJS. It also provides plugins that provide a wide range of features. It also supports the usage of node packages.

Similarities

Both Gatsby and Frontity have meagre initial page load times, and the in-app routing is handled by these frameworks that use prefetching concepts, which means the users never have to wait for navigation inside the app.

Both of these frameworks split the code and send the minimum required code for the app to work, which increases the performance.

Both of these frameworks provide PWA compatibility and offline support with the use of service workers.

Both these frameworks provide their plugins to make it easy for the developer to develop complex features. Both of these frameworks support the use of external packages from npm.

These two frameworks are optimized to get the maximum score in Lighthouse, including performance, SEO and accessibility.

The extra features of Frontity

Everything is already wired up: React, Webpack, Babel, SSR, Routing, CSS-in-JS, WP REST API, TypeScript, Linting, Testing, etc.

No complex configuration is necessary; developers frequently need the tools, such as the queries to the APIs that deliver content, which is pre-configured.

Frontity has its state manager, and it uses Emotion for the CSS. Thanks to that, developers do not need to learn the complexities of such technologies as Redux. At the same time, it powers a very flexible extensibility pattern, more similar to that of WordPress itself, rather than that of other JavaScript frameworks.

Using the same ReactJs codebase, Frontity can output Google AMP suitable HTML

When using Gatsby, developers usually require the knowledge of GraphQL. Frontity removes this hassle as its built-in state manager provides the data.

How to implement WordPress with Gatsby?

It is as easy as creating a wordpress site; you will need quick configurations on both Gatsby and WordPress.

1. You’ll have to add the WPGatsby and WPGraphQL plugins to your WordPress site
2. Then you will need the official Gatsby WordPress plugin to your Gatsby site
3. After that, configure the plugin with your WordPress credentials & host URL
4. By following all the three steps above, you’ll be able to access all your WordPress data using GraphQL queries on the GraphQL site

The significant limitations here are that you can not use a WordPress theme with Gatsby site; moreover, the plugins used on the WordPress site will be unavailable to you on the frontend, so for the same functionality, you will need to Gatsby plugin too, and sometimes it becomes hard to maintain the code on both the sides.

To solve this vital issue, Frontity was introduced, which is a rendering engine; previously, on the WordPress side, the developers had to rely on the PHP rendering engine. Frontity eliminates this and can render the HTML by using WordPress data.

Here’s the NPM trends comparison image for gatsby-source-wordpress-experimental, gatsby-source-wordpress and frontity. As we can see, gatsby is still very popular with WordPress even though Frontity is built to support WordPress only.

Moreover, we have taken the experimental package because it is a more stable version than the standard gatsby wordpress source plugin.

By looking at the pace of Frontity usage, it is suggested for WordPress users to at least try Frintity in smaller projects and help the community to grow. It will encourage the makers of Frontity and WordPress to come with more developer-friendly and feasible solutions to use them together.

And if you don’t want to take the risk of trying a new tech with your project, you can choose the Gatsby as it is in the game for a very long time, and you’ll be able to get more support for your queries, unlike Frontity.

End Note

It always depends on the project requirements that you receive and which framework you should use. But now you have the comparison right here between the two most popular frameworks to decide wisely.

We at ZealousWeb, always remain well-versed with all the updates around any technology and its frameworks. We take pride in catering to our clients and updating their stores as and when we come across a better and greater framework for them. Let’s talk when you have a great idea to take to fruition!