When it comes to creating a website, there’s no shortage of frameworks that promise to help you create a beautiful front end. With so many options choosing the best framework isn’t always easy.
React is one of the most popular front end frameworks. Unsurprisingly, if you want to use React in your WordPress project, you have lots of options. If you’re feeling overwhelmed by so much choice, it's understandable – but there's no need to panic.
In this article, we’ll introduce four React frameworks that you can use in your WordPress projects. We’ll cover the pros and cons of each framework. We’ll also look at some common scenarios where you may want to use one React framework over the other. Let’s get started!
What Is a REST API?
An Application Programming Interface (API) is a set of programming instructions and standards for accessing web-based applications and tools. You can use APIs to communicate with other websites, applications, and services. This includes requesting data from third parties.
Many companies have released their APIs as products that third parties can use. For example, Google has released a wide range of APIs that provide access to their services, including APIs for YouTube, Street View, and Google Play.
REST (Representational State Transfer) APIs are distinct from other APIs. To be considered RESTful, an API must follow specific guidelines. These guidelines help ensure the resulting API is lightweight, flexible, extensible, and secure. These guidelines include a separation between the client and the server, the use of cacheable data wherever possible, and a uniform User Interface (UI).
WordPress has its own REST API. This API was originally developed as a separate feature plugin. However, elements of the REST API were added into the core platform as early as WordPress 4.4. The API was fully integrated into WordPress 4.7, which means that every version of WordPress since then has its own fully-functional REST API.
WordPress’ REST API provides data in JSON format. By default, every WordPress website has JSON data available. Unless the site owner has restricted access to it, it’s easy to see your website’s JSON output – simply enter its URL in the following format:
http://example.com/wp-json/wp/v2/posts
Your browser should now display a series of JSON data related to your site's recent posts. This data isn’t particularly human-readable, but it’s compatible with a large number of web technologies. Similarly, you can see the JSON output of all your most recent pages, by replacing the /posts part of the URL with /pages.
What Does the REST API Mean for WordPress?
Traditionally, WordPress generated HTML using a theme based on PHP template files. However, the introduction of the REST API removed this dependency on the PHP rendering engine. This opened up lots of opportunities for WordPress developers.
The REST API makes it easier for WordPress to interact with other websites and web applications. 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.
WordPress' REST API can also communicate and exchange data, regardless of the language an external program is using. This has made the WordPress platform far more flexible and powerful, as you’re not confined to any specific technologies or languages.
The REST API makes it easier for developers to display content from an individual website within a multisite setup. It is also possible to display content from separate WordPress websites.
Today, the WordPress REST API is commonly used to separate content from the front end, paving the way for developers to use WordPress as a headless Content Management System (CMS). This is where React comes in.
How React and WordPress Can Help You Create a High-Performing App
The React framework is a JavaScript library. Developers can use this library to build UIs for Single Page Applications (SPAs) within web and mobile environments.
The major aim of developing React was to improve JavaScript’s UI development. Though originally launched for use with Facebook, React is now enjoying a great rate of adoption across several industries. It is also gaining popularity with the WordPress community, particularly with developers who want to set up headless WordPress.
With a headless setup, you can use the WordPress CMS on the back end, then build your front end using practically any development technologies you’d like. React-based frameworks can use the WordPress REST API as an interface to access your website’s data from outside the WordPress framework. This means it’s possible to create an SPA using React, then control the content using the familiar WordPress back end.
React can also make your projects faster by eliminating the need to re-render. Rather than re-loading each page in its entirety, an SPA loads content dynamically. This means the fundamental code of a website is loaded just once. If the state of a component changes, React will re-render the necessary components only.
React has a large and active developer community. Major firms such as Facebook, Airbnb, Dropbox, Netflix, and Reddit use React to build many of their applications. This comes with a lot of perks in terms of development and expert base.
Some of the React frameworks we’ll cover in this article are relatively new. Using cutting-edge technologies may be exciting, but it can also pose problems if you encounter technical issues. You may struggle to find an expert who has the know-how required to help resolve your problem. However, by opting for a React framework, you can request assistance from the large, and growing React community.
What You Should Look for in a React Framework
When using any web technology, it’s important to choose the right framework. Every framework has its own unique set of features, strengths, and weaknesses. Some frameworks are also better suited to particular kinds of projects.
In this article, we’ll share four React frameworks that have plenty to offer WordPress developers. However, the right framework will vary depending on your project. With this mind, here are some things to consider, when deciding whether a particular React framework is right for you:
-
The setup process. Some frameworks are easier to setup than others. In particular, you should check whether the framework is pre-configured to work with WordPress. It’s also a good idea to verify whether the framework provides any additional tools needed to build your project.
-
The learning curve. Mastering a new technology always requires time and effort, but some frameworks have a steeper learning curve than others. In particular, you should investigate whether there are any additional technologies you’ll need to learn, such as Redux, Webpack, Babel, and GraphQL.
-
Compatibility or optimization. All the frameworks in this article are compatible with WordPress. However, some may require additional optimization, in order to deliver the best possible experience. Other frameworks, such as Frontity, are designed with WordPress firmly in mind. Frameworks that are optimized for WordPress shouldn’t require any major additional configuration.
-
Flexibility or ease-of-use. Choice is a good thing, but all those extra settings can be confusing. When exploring new technologies, it’s smart to opt for a framework that’s beginner-friendly. However, it's a good idea to consider how you might use this framework in the future. A framework should offer the advanced features and flexibility you’ll need to support your growing projects.
There’s another major decision to make when choosing your framework. This is the choice between Server-Side Rendering (SSR) and Client-Side Rendering (CSR).
Client Side Rendering or Server Side Rendering?
There are two approaches to rendering content: client-side, and server-side. Both have their own unique strengths and weaknesses.
CSR is where content renders in the browser. Instead of receiving all the content from a HTML document, the browser receives a bare-bones HTML document with a JavaScript file. The rest of the content will then render inside the web browser.
With CSR, the initial page load is typically slower, but subsequent page loads will be faster. A CSR framework can update the UI by re-rendering only the affected DOM element. You don’t have to reload the entire UI following every call to the server. This means the CSR is well-suited to websites that provide rich user interactions, or that feature lots of dynamic content.
The opposite of client-side, is server-side. With SSR, the user makes a request and the server prepares an HTML package for that specific user. The server sends this data to the user’s machine, and the browser then constructs the content and displays the webpage.
The process of fetching data, creating the HTML package, and delivering it to the browser happens very quickly. This means the initial page load is faster, which results in a better user experience.
By reducing page load times, SSR may provide a Search Engine Optimization (SEO) boost. SSR is also good for SEO, as it doesn’t require search engine bots to render JavaScript.
However, with SSR the page rendering is typically slower. New content will also require full page reloads, which can have a significant impact on your website’s performance. For this reason, SSR is better suited to static websites. It also isn’t ideal for sites that feature lots of complex user interactions, or dynamic content.
4 of the Best React Frameworks for WordPress Development
There are lots of React frameworks to choose from. Every project is different, but we’ve collected four React frameworks that we believe have plenty to offer WordPress developers.
1. Frontity
Frontity is an open source framework for React. Unlike other React frameworks that are compatible with WordPress, Frontity was designed specifically for WordPress.org and WordPress.com. This means that Frontity is pre-configured to provide the best possible experience for WordPress users.
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 that’s immediately usable. This minimizes your site’s initial load time. The HTML file is also served to search engine crawlers. This keeps search engines such as Google happy, and helps you avoid SEO penalties.
Even if you’re using WordPress for a headless setup, you may still want to use the meta tags generated by a third-party SEO plugin. To help preserve your SEO, the Frontity team has created a REST API – Head Tags plugin. This plugin adds all the meta tags in your website’s HEAD section, to the REST API’s responses.
In addition, 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 and serves it as static content.
Frontity is designed to be easy to use. This framework has its own state manager and uses Emotion for the CSS, so you don’t have to learn the complexities of technologies such as Redux. This makes Frontity a good choice for React newcomers, or anyone who’s looking to launch a project quickly without necessarily having to master additional technologies. In fact, you can build a web application using Frontity and WordPress in five easy steps.
2. Gatsby.js
According to a study by Critical Case, a one second increase in page load time can result in 11 percent less page views. If you’re concerned about your site’s performance, Gatsby is a static site generator that places the focus firmly on speed.
Gatsby builds your project into static HTML files that are optimized for performance, and also loads only the necessary CSS, HTML and JavaScript. After your website is loaded, Gatsby will then call upon any additional resources that it requires. This results in faster page loading speeds.
However, Gatsby is geared towards displaying static content. While it does allow for client side code, it has a steep learning curve compared to some other solutions. If you need to display large amounts of dynamic content, Gatsby may not be the best framework for your project.
For newcomers, the Gatsby team provides a helpful starter default project. This project contains code related to your website’s front end, including a site header and page template. It also automatically installs all the modules of code that your project will depend upon. This can save you a considerable amount of time when getting started. If you choose Gatsby as your framework, we’d recommend using the starter default project wherever possible.
However, if you opt for Gatsby you'll need to trigger a build whenever you update your content. One solution is to deploy your website using the Netlify platform. You can use Netlify to create webhooks that will rebuild your project automatically whenever a new commit is pushed or merged to your repository’s master branch.
Alternatively, you can trigger a build using a WordPress plugin, such as WP Trigger Netlify Build. However, this rebuild process can add considerable complexity to your WordPress projects.
3. Next.js
Next.js is a minimalistic React framework. This framework renders applications on the client-side, but Next.js also supports SSR. This can help preserve your SEO, while also improving your project’s performance. Next.js can deliver an additional performance boost, thanks to its automatic server rendering and code splitting.
However, Next.js is an opinionated framework. This means the framework is designed to be easy to use – as long as you follow the path laid out for you. Deviate from this path, and an opinionated framework can suddenly become much less user-friendly.
This means Next.js isn’t the most flexible solution. For example, you may struggle to use a different router with your Next.js setup.
Before choosing Next.js as your framework, it’s a smart idea to consider how you might develop your project in the future. You can then read through the Next.js documentation, to decide whether this framework is compatible with your project’s roadmap.
If you do decide to use Next.js, you can install all the necessary software and start the development server from the command line. You’ll find detailed, step-by-step instructions, over at the official Next.js documentation.
4. Create React App (CRA)
The Create React App (CRA) is designed to get your React project up and running as quickly as possible. This tool offers a modern build setup with zero configuration. You just need to run a single command, and CRA will set up all the tools you need to start developing.
When you create a project with Create React App, it installs the latest version of React and React-DOM. It also installs the latest version of react-scripts, which is a development dependency that manages the other dependencies involved in starting, testing, and building your application.
CRA generates only the files needed to build your React project. You won’t have access to configuration files such as Webpack, Babel, and ESLint. This is great for anyone who wants to create a project without having to master additional technologies. Since CRA handles much of the configuration and setup for you, you’re free to concentrate on what really matters – building your project.
However, at some point you may need to perform more complex tasks that require access to these configuration files. Although CRA doesn’t provide these files by default, it does have an eject command. This copies all the configuration files and transitive dependencies into your project. However, this is a one-way operation that adds a significant amount of complexity to your project.
CRA projects are rendered on the client-side only. This means CRA isn’t suitable for developing highly-interactive websites, or projects that feature dynamic content. There’s also no code splitting, which is bad news for performance.
CRA is designed with ease-of-use in mind. If you do choose CRA as your React framework, you can create a new CRA project using only a handful of commands.
How to Host Your Completed React Project
Once you’re happy with your web application, you’ll want to share it with the world. Your options may vary depending on which React framework you chose to use in your project.
To provide users with the widest possible choice, the Frontity team ensures that their server code is small enough to work with serverless technologies. This means you can deploy your Frontity project to any Node.js server or serverless provider, including Vercel and AWS Lambda. Alternatively, since you’re using WordPress as the back end you may want to opt for your favorite WordPress hosting solution.
Conclusion
React is a hugely popular front end framework. However, with popularity comes lots of options – and choosing the best React framework for your project can feel overwhelming.
If you’re not sure where to start looking for a React framework, then check out any of the four choices we recommended earlier:
-
Frontity. An open source, server-side framework that’s optimized for WordPress.
-
Gatsby. A static site generator that prioritizes performance without sacrificing Search Engine Optimization (SEO).
-
Next.js. A performance-focused, opinionated framework that transparently handles SSR.
-
Create React App (CRA). A zero-configuration framework for when you need to create a React project, fast.
Technologies such as React can significantly boost your project’s performance, but why stop there? By opting for a hosting provider that prioritizes performance, you can supercharge your React project. If you’re lucky, then your hosting plan may even provide Turbo Servers that are 20X faster than competing WordPress hosting providers.
Image credit: Unsplash.
