WordPress as headless CMS offers some benefits over traditional WordPress: a better developer experience, scalability, better security, and better performance. There are multiple tools and frameworks to chose from when building a Headless WordPress site, such as Next.js, Gatsby, Nuxt, and SvelteKit, to name a few.
Building a headless WordPress solution without an intimate familiarity with front-end frameworks, libraries, optimisations, deployment methods – can be an intimidating task. These are some of the challenges that Faust.js tries to solve – making Faust.js work with any build service and front-end host.
These are some of the features that are necessary when building Headless WordPress:
- Static Site Generation (SSG): Developers must be able to distribute content globally at the edge and optimize delivery by building static pages ahead of time.
- Server-Side Rendering (SSR): Sometimes, developers can take advantage of SSG, and sometimes not. Both SSR and SSG (and Client-Side Rendering) must be possible so that developers can choose what makes sense for the business and application.
- Data retrieval: Traditional WordPress development usually has all data available without having to make complicated queries. A Headless WordPress site should not be any different.
- Minimal configuration: Time is best spent building the business, not messing with build configuration and production optimization.
Core Web Vitals: It should be straightforward to take advantage of the technical functions necessary to get top Lighthouse scores.
- Publishing Experience (PX): Publishers should not have to sacrifice UX simply because a website is headless.
- Developer Experience (DX): It should be enjoyable to build Headless WordPress sites. Developers should not feel like fighting against the system, but rather the system is working for them.
With that in mind, Faust focuses on delivering the best developer experience when building Headless WordPress while preserving a good publishing experience. Here are some of the Faust features available at the time of writing:
- SSG and SSR: Faust is built on top of Next.js to take advantage of SSG and SSR available with Next.js.
- GraphQL: Faust uses a bleeding-edge GraphQL client that enables querying the WordPress WPGraphQL API without knowing GraphQL queries ahead of time. Faust is the first framework offering this kind of functionality.
- Content preview: It has been a struggle to get previews working consistently for Headless WordPress. Faust solves this problem.
- Authentication: Faust has built-in mechanisms for authenticating with the WordPress backend, enabling building gated content, eCommerce experiences, or make other authenticated requests.
- React: WordPress uses React in parts of the core. The Faust framework takes things a step further, enables building the entire front-end using the most popular front-end library.
- React hooks: Faust is a natural extension to the WordPress API, thus making getting data from WordPress straightforward.
- Custom Post Types: Because of the unique way Faust fetches data, adding Custom Post Types and accessing them on the front-end is trivial.
- Flexibility: While Faust works best when using Next.js and React, other frameworks such as Gatsby, Nuxt, and SvelteKit works as well.
Faust Is Already In-Use, And The Community Is Growing
At the time of writing, Faust has over 300 stars and 19 contributors on GitHub and over 150 weekly downloads on NPM. Sites are already using Faust in production.
The Guiding Principles Of Faust
The goal for Faust is to build a solution for previewing posts and pages in a Headless WordPress site. A few preview options in Headless WordPress were previously available, but most of these solutions sacrificed the user experience for the publisher by forcing users to log in to external sites or view preview pages inside of a frame. The Faust team’s solution enabled the same experience the publishers are used to with previewing posts in a traditional WordPress site but instead using Headless WordPress.
The Faust developer team has put together a framework that makes it easier to build Headless WordPress sites with three fundamental principles in mind:
- A publishing experience consistent with the classic WordPress experience.
- WordPress should be the data store and content delivery engine, and the front-end determines the presentation.
- Developer experience is a first-class citizen. Meaning focusing on providing features that feel natural to use and maintain and consistent and up-to-date documentation.
What Lies Ahead?
Faust already solves many of the challenges developers face building a Headless WordPress site. However, this does not mean that work is complete. On the contrary, Faust is just getting started, and the road ahead will is in the hands of the community, and it is growing fast.
The Faust teams encourage developers to go to the Faust GitHub repository, star it, watch it, or contribute in the form of an issue or PR! Also, check out faustjs.org, a site dedicated to the Faust framework, where developers can read documentation, including tutorials, how-to guides, and reference documentation.