React, etc. Tech Stack

React, Flux, GraphQL, Hack, HHVM...? All of this and more!

GraphQL and Next.js for building WordPress sites with React.js

WordPress has been on the React.js bandwagon for some years now. Since the introduction of the Calypso interface for, the use of React has expanded to it's use in the Gutenberg editor as well. Now with the licensing woes of the BSD+Patents licensing gone the community can keep moving forward with the UI library from Facebook with full steam.

Over the years there has been a tremendous investment in the WordPress codebase from the community. Most of this investment is in the PHP codebase that continues to power all WordPress installations. Even with React now prominent in the WordPress community, there are still areas where it has had no impact.

One area in general where people agree that WordPress has been lacking is the templating layer. It continues to use the raw PHP syntax for templating, which is powerful but also somewhat cumersome as well as offering no automatic protections such against input escaping, etc.

There have been attempts to add templating engines like Twig and Smarty to WordPress, but so far they have not made it to the core distribution and as of now are unlikely to do so in the near future. In a changing technology landscape things and best practises change, so it might be that the next step for website creators is decoupled site building.

Headless WordPress sitebuilding with GraphQL

For decoupled sitebuilding developers rely on a content feed from a Content Management System (CMS) as well as another tool that builds the theming of the site and uses the CMS just as a data source.

This headless approach is popular in many cases as it provides maximum flexibility and even the possibility to switch between CMS backends. This has been slowed down by the fact that RESTful interfaces themselves do not define anything but an architectural pattern of the content API.

GraphQL is a more simple way to get content in requests, and there are already good plugins available for WordPress. So, an ideal combination for WordPress sitebuilders is using the GraphQL protocol together with React, the JavaScript view layers that WordPress developers need to start mastering as the library gets integrated into WordPress core.

Traditionally headless sites were built on the premise of a client side JavaScript library running in the browser. This approach is valid, but has some downsides to regular serverside rendered implementations, especially when thinking of the web as a content delivery method rather than an interactive application platform.

Server Side Rendered (SSR) React.js is good for SEO

An ideal solution for WordPress developers creating content driven websites and apps might actually be a novel framework that works on both the client and the server. There are several of these already on the market, and they can now be considered to be very mature as well.

For React.js the most prominent universal framework is Next.js from Zeit. This framework enables a low barrier entry to the Server Side Rendered (SSR) React sitebuilding. In this approach the first pageview is always rendered on the server and only from there on will users use the content API directly using the GraphQL API.

Using this approach developers can get full advantage of the React's JSX templating syntax, as well as any other familiar JavaScript tools from the ecosystem - but still achieve best-in-class search engine compatibility (SEO) that WordPress is known for.

Learn more about WordPress, GraphQL and Next.js:

Written by Jorgé on Thursday September 28, 2017

Permalink - Tags: graphql, javascript, wordpress, nextjs

« React.js Patents Clause to be removed with React 16 release - GraphQL CMS alternatives in 2018 »