Faust.js, the Framework For Headless WordPress

Faust is the front-end framework for building headless WordPress sites. Over the past six months, the Faust team has been researching, prototyping, and testing out a new way of building headless WordPress sites that focuses on developer experience.

Headless WordPress offers plenty of benefits over traditional WordPress: better developer experience, scalability, better security, and better performance. There are also many tools at your disposal when building headless WordPress sites. There are a number of different frameworks to choose from such as Next.js, Gatsby, Nuxt, and SvelteKit to name a few. 

While it is nice to have flexibility and choice, it can be a daunting task if you are not intimately familiar with all the front-end frameworks, libraries, optimizations, deployment methods, etc. This is one of many problems that Faust solves, and it works with any build service and front-end host.

The following is a list of features that are absolutely necessary when building headless WordPress:

• Static Site Generation (SSG): You need to be able to distribute your content globally at the edge and optimize delivery by building static pages ahead of time.
• Server Side Rendering (SSR): Sometimes you can take advantage of SSG and other times you can’t. Both SSR and SSG (and Client Side Rendering) need to be possible so you can choose what makes sense for your business and application.
• Easy data fetching: With traditional WordPress you are used to having the availability of whatever data you need without having to make complicated queries. A headless WordPress site should be no different.
• Minimal configuration: You should spend time building your business, not messing with build configuration and production optimization.
• Core Web Vitals: You should be able to take advantage of all the tricks necessary to get top Lighthouse scores.
• Publishing Experience (PX): Your publishers should not have to sacrifice UX simply because your site is headless.
• Developer Experience (DX): It should be enjoyable to build headless WordPress sites. Developers should not feel like they are fighting against the system, but rather the system is working for them.

With all that in mind, today we are proud to introduce Faust to the WordPress community. Faust focuses on delivering the best developer experience when building on headless WordPress while preserving the publishing experience you know and love with WordPress. Here are some of the Faust features available today:

• SSG and SSR: Faust is built on top of Next.js, allowing you to take advantage of SSG and SSR that is already available with Next.js
• GraphQL: Faust uses a bleeding-edge GraphQL client that lets you query the WordPress WPGraphQL API without having to know GraphQL queries ahead of time. The first time you see this in action it feels like magic, and Faust is the first framework offering this kind of functionality. Never think about writing a GraphQL query again!
• Content previews: It has been a struggle to get previews working consistently for headless WordPress. Faust solves this problem so you do not have to worry about anything.
• Authentication: Faust has built-in mechanisms for authenticating with your WordPress backend so you can easily build gated content, eCommerce experiences, or make other authenticated requests.
• React: WordPress uses React in parts of the core DX. Faust takes things a step further allowing you to build your entire frontend using the most popular frontend library.
• React hooks: Faust is a natural extension to your WordPress API because it makes getting data from WordPress incredibly straightforward.
• Custom Post Types: Because of the unique way Faust helps you fetch data, adding Custom Post Types to your WordPress site and then accessing them on the frontend is trivial.
• Flexibility: While Faust works best when using Next.js and React, if you want to use other tools such as Gatsby, Nuxt, and SvelteKit you can do that!

Faust Is Already In-Use And The Community Is Growing

Faust currently has over 300 stars and 19 contributors on GitHub and over 150 weekly downloads on NPM. Many sites are already using Faust in production. We want to extend a huge thank you to those early adopters (I’m looking at all of you @wpengine/headless adopters too) who have been with us along the way identifying bugs, requesting features, and generally helping us shape Faust into what it is today!

Three Guiding Principles Of Faust

Faust got its start during an internal hackathon at WP Engine. The goal was to build a solution for previewing posts and pages in a headless WordPress site. At the time a few options for previews in headless WordPress already existed, but most of the solutions sacrificed the experience for the publisher by forcing them to log in to some external site or view their preview page inside of a frame. The solution we came up with enabled the same experience the publisher is used to with previewing posts in a traditional WordPress site but instead using headless WordPress.

The hackathon was only a day, but when we demonstrated it to the rest of WP Engine we received a ton of positive feedback and questions from people within the company. Most of the questions shared a common theme—What else can we do with headless WordPress to ensure that the publishing experience mimics that of traditional WordPress?

Since the hackathon we have gone down the road of putting together a framework that makes it easier to build headless WordPress sites with three key principles in mind:

1. We will strive to achieve a publishing experience consistent with traditional WordPress. When publishing content you shouldn’t know if your site is a traditional site or a headless site.
2. WordPress should be the data store and content delivery engine and, to the greatest extent possible, we should allow the frontend to determine the presentation.
3. Developer experience is a first class citizen. This means developing in the open, focusing on providing features that feel natural to use, and maintaining thorough, consistent, and up-to-date documentation.

What Lies Ahead?

Faust already solves many of the challenges you face when building a headless WordPress site. However, the work is not done. Faust is just getting started. The road ahead will be paved by the community that is growing fast.

How do you think Faust should evolve? Should we add support for more libraries, frameworks, and tools? Should we work to improve the experience of using Gutenberg Blocks in headless? We encourage you to go to our GitHub repository, star it, watch it, and even contribute in the form of an issue or PR! Also check out faustjs.org, a site dedicated to Faust. There you will find all of our documentation including a tutorial, how-to guides, and reference documentation. You should also join our Discord server for the headless WordPress community!