5 Great JavaScript Frameworks For Decoupled WordPress Websites

When building with Decoupled WordPress we are replacing the template and theming engine in WordPress. But what should we replace it with? There are a lot of options out there. Let’s start by asking some questions to narrow the field of possibilities.

What platform are you building for?

The web, mobile, digital signage(ads)? One of the strengths of decoupled WordPress is that you do not have to only build websites. For this article, we will stick to building for the web.

What language are you building in?

Programming languages are often a chicken-and-egg problem. Do you choose a language based on what your engineers know, or do you make your engineers learn a language based on the best solution for the problem? While there are many great server-side programming languages we could use to build our websites, including languages like Go and PHP, building for the web will always mean JavaScript. So, why not use those JavaScript skills for both the server and browser code? Here at WP Decoupled, we believe strongly that JavaScript is the best language for building websites and we will be talking about your options for JavaScript frameworks in this article. You may choose differently.

What is a framework?

Frameworks can be many things, but at their core, they add structure to a project. In the web world, a framework can provide patterns for rendering UI elements, server-side or static rendering, data fetching, authentication, and much more. There are two distinctive types of frameworks we need to understand before getting into this conversation: UI Framework vs Meta Framework.

A UI Framework (aka. Component Framework) helps you build UI elements for your site using HTML, CSS, and JS. Some examples of UI frameworks are React, Vue, Svelte, Lit, SolidJS, etc. If you are familiar with WordPress templates and themes, a UI framework replaces these and allows us to render pages, posts, etc. While these are essential tools for making a UI, a full website has many more concerns like routing and authentication. This is why we have meta frameworks.

Meta frameworks (aka. application frameworks) are built around UI frameworks and provide important features like static and server rendering, routing, organization, authentication, and maybe more. Some examples of meta frameworks are Next.js, Nuxt.js, SvelteKit, Astro, SolidStart, Quik, Angular, etc. If you are familiar with the WordPress template hierarchy and permalinks, a meta framework will replace or supplement these on your decoupled website.

NOTE: Quik and Angular are also UI frameworks. But the only way to use them is within the context of the meta-framework. Whereas React has multiple meta frameworks or can be used on its own.

The distinction between UI and meta frameworks is important because we have another chicken-and-egg problem. Picking a meta framework will lock you into a specific UI framework, usually. Sometimes picking a UI framework locks you into a meta framework. But most importantly, you need and want to use a meta-framework. If you do not use one, you will most likely end up inventing your own in the end.

Great Frameworks for Decoupled WordPress

So you are looking for a Javascript meta-framework to build your website? Without further ado, in no particular order…

1. Next.js

UI Framework: React

If you want React you probably want Next. It is a solid framework with lots to offer. If you are just getting started with decoupled/React/JS frameworks, I would highly recommend looking into Faust.js over straight Next. Faust provides a great starting point that makes a lot of technology stack decisions and does the plumbing so you can get started building your site. But, if you are looking to use different technologies (e.g. Rest API over GraphQL, a different GraphQL client, etc.) then Next is a great starting point!

Next offers lots of great rendering options from server to client that help make your site performant and flexible. Most importantly, the React and Next ecosystems are both very mature, this includes WordPress-specific communities, as exemplified in Faust. Importantly, WordPress is also going in on the React ecosystem via the new Gutenberg Editor. This means you can invest in learning React and use it in both WordPress and Next!

2. Gatsby

UI Framework: React

Gatsby has a large selection of data-sourcing plugins purpose-built for different CMSes, including one for WordPress maintained by the Gatsby team! Gatsby is a strong contender in the quick and easy-to-get-started category. Add your source plugin, point it to WordPress, and start fetching data.

Gatsby’s strengths lie in creating pre-rendered websites where performance is extremely important. Gatsby has some weaknesses, most importantly, if you go beyond what their data layer can provide (eg. complex data structures using ACF, or live data) things start getting very complicated very fast.

---

Quick authorial note, as a consultant I do not recommend Gatsby, especially for decoupled WordPress. I very much wish this was not the case. I got started in my dev and open source careers working on the Gatsby project. The decoupled WordPress ecosystem also owes much to Gatsby Inc. for funding WPGraphQL for several years and the general popularity of this stack. Gatsby was a pioneer in the early days of decoupled WordPress.

Alas, chronic mismanagement and other factors have meant It has fallen behind other frameworks and not become all it could be. I hope this changes, Netlify recently acquired Gatsby, which means change could be coming, I have seen some good signs and heard of some bad ones. Time will tell.

---

3. Nuxt.js

UI Framework: Vue

If you love Vue, you know all about Nuxt. For those out of the loop, Nuxt is Vue’s meta-framework. If you are looking to build with Vue, this is a go-to option with strong tech and a strong community for support, docs, and libraries.

Like other meta frameworks, there are lots of options for rendering methods and you can build a wide variety of sites. If Vue’s your jam, Nuxt will not let you down.

4. SvelteKit

UI Framework: Svelte

Svelte and SvelteKit are the new-ish kids on the block and they are quickly becoming fan favorites. The site you are on is running SvelteKit in fact! Svelte does things a little differently than React and Vue, which helps make for a better developer experience and more performant websites. Its community is newer and smaller; so, there are not as many libraries and community articles, but it has great docs and the community is absolutely exploding.

SvelteKit has some great config options that mean on a route-by-route basis you can configure prerendering, SSR, and CSR. You can not go wrong here, SvelteKit will let you build anything from content sites to full-blown web applications.

5. Astro

UI Framework: Astro Syntax, React, Svelte, Vue, etc…

Astro provides some really compelling and innovative technology that makes it a strong contender! First, Astro does not require using any of the traditional UI Frameworks, they have “Astro Syntax” that gets rendered server-side only. This is more PHP-like than the JSX of React and Vue and may appeal to those coming from WordPress/PHP world. Second, using their Islands tech you can use React, Vue, Svelte, etc, or any combination of them in your Astro site.

Both these technologies are server-first and Islands require you to opt into client-side rendering to ship any JS to the browser. This makes Astro the leanest framework out of the box in terms of the amount of JS it ships to the browser. A huge win for performance. Astro excels when it comes to building blogs and other content-heavy sites.

6. Bonus

I could continue listing meta frameworks for the next year, but the benefit and your attention span both have their limits. I will throw out a list of other popular and innovative frameworks that may interest you.

• Angular
• Eleventy
• SolidStart (Solid)
• Quik
• Remix (React)
• For even more checkout jamstack.org