What Is Frontity?
Frontity is an open-source, server-side React framework built exclusively for WordPress. Unlike general-purpose React frameworks, Frontity is optimized from the ground up to work with WordPress as a headless content source. It fetches data from WordPress via the REST API and renders pages on the server before sending fully formed HTML to browsers. This server-side rendering approach provides fast initial page loads and excellent search engine optimization, addressing two common concerns with single-page JavaScript applications.
The framework handles all the complex infrastructure that developers typically need to configure manually when building React applications. Frontity manages routing, code splitting, server-side rendering, state management, and CSS-in-JS styling through its own ecosystem of packages. Developers can focus on building the frontend experience rather than configuring build tools and server infrastructure. This zero-configuration approach makes Frontity particularly attractive for teams familiar with WordPress who want to adopt modern frontend technologies without learning an entirely new development stack.
Frontity also includes built-in support for Progressive Web App features, automatic code splitting for optimal performance, and a state management system called Frontity Connect that mirrors React's component model. The framework provides two starter themes--Mars Theme and TwentyTwenty--that serve as starting points for custom development. These themes demonstrate Frontity's component architecture and can be extended or replaced entirely based on project requirements. The Mars Theme provides a clean, minimal foundation ideal for content-focused sites, while the TwentyTwenty Theme offers a more design-forward starting point with modern visual styling.
Why Use React With WordPress?
React's component-based architecture has become the dominant paradigm for modern frontend development. Components encapsulate both the visual elements and behavior of user interface sections, making complex interfaces easier to build and maintain. Developers compose applications from reusable components that manage their own state and render conditionally based on data. This modular approach scales well for large applications and enables teams to work efficiently on different parts of an interface simultaneously.
Frontity brings these React benefits to WordPress projects without requiring developers to abandon the WordPress ecosystem. Content editors work in the familiar WordPress block editor, creating posts and pages with the full range of blocks available in the WordPress ecosystem. Frontity's @frontity/wp-source package automatically fetches this content and makes it available to React components. Developers build themes using standard React patterns and tooling, including popular libraries like Emotion for CSS-in-JS styling--a modern approach to styling that keeps styles co-located with components, similar to techniques covered in our guide to CSS modules.
The combination also addresses WordPress's historical performance challenges. Traditional WordPress themes often load excessive JavaScript and CSS, resulting in slow page loads and poor Core Web Vitals scores. Frontity's server-side rendering delivers pre-rendered HTML immediately, while React hydrates into an interactive application after the initial page load. When combined with our SEO services, this performance foundation helps sites achieve better search rankings and user engagement metrics.
Performance Advantages
Frontity's server-side rendering fundamentally changes how users experience WordPress sites. When a browser requests a page, Frontity renders the complete HTML on the server, including all content fetched from WordPress. Users see the rendered page instantly, even on slow connections, because no JavaScript execution is required to display the initial content. This eliminates the blank screens and loading spinners common with client-side rendered single-page applications.
The framework also implements automatic code splitting based on routes. JavaScript for the homepage only loads when needed, while code for blog posts loads separately. This keeps initial bundle sizes small and reduces the amount of JavaScript users must download. Frontity prefetches links in the viewport, loading JavaScript for linked pages in the background before users even click. The combination of these techniques creates an experience that feels instantaneous even for content-heavy WordPress sites with hundreds of posts. Modern CSS techniques like CSS typed arithmetic further complement this performance-focused architecture.
Everything you need to build modern WordPress frontends
Server-Side Rendering
Pre-rendered HTML delivered instantly to browsers for fast initial page loads and optimal SEO.
Automatic Code Splitting
JavaScript bundles are split by route, loading only what's needed for each page.
Link Prefetching
Links in the viewport load JavaScript in the background before users click.
Frontity Connect State
React-friendly state management that makes data access simple and predictable.
CSS-in-JS with Emotion
Style components directly in JavaScript with optimized CSS extraction and injection.
Progressive Web App Ready
Built-in PWA support for offline access and app-like experiences.
Getting Started With Frontity
Setting up a new Frontity project requires only Node.js and npm or yarn. The Frontity CLI handles all project scaffolding, creating the necessary configuration files and installing dependencies. Developers run the create command from their terminal, select a starter theme, and immediately have a working development environment:
npx frontity create my-wordpress-site
cd my-wordpress-site
npm run dev
The project structure separates configuration, source code, and dependencies clearly. Frontity projects use a frontity.settings.js file for site-wide configuration, including the WordPress API URL, site title, and menu structure. The packages array in this file defines which Frontity packages are active, allowing developers to enable or disable features easily.
Project Configuration
The frontity.settings.js file serves as the central configuration point for Frontity projects. This file defines the site's name, description, and URL, along with the WordPress API endpoint and any packages to include:
const settings = {
name: "my-wordpress-site",
state: {
frontity: {
url: "https://your-wordpress-site.com",
title: "My WordPress Site",
description: "A modern React frontend for WordPress"
}
},
packages: [
{
name: "@frontity/wp-source",
state: {
source: {
api: "https://your-wordpress-site.com/wp-json"
}
}
},
"@frontity/mars-theme"
]
};
Frontity's package system enables modular feature addition without bloating the core application. The packages array specifies which Frontity packages are active, each configured through its own state section. For example, the analytics package tracks page views through its configuration, while the wp-source package receives the WordPress API URL. This modular approach keeps applications lean, as only enabled packages contribute to the final bundle size.
1import { connect, usePost } from 'frontity';2 3const PostComponent = ({ state }) => {4 const post = usePost(state);5 6 if (state.source.get(state.router.link).isFetching) {7 return <div>Loading...</div>;8 }9 10 return (11 <article>12 <h1>{post.title.rendered}</h1>13 <div dangerouslySetInnerHTML={{14 __html: post.content.rendered15 }} />16 </article>17 );18};19 20export default connect(PostComponent);Comparing Frontity With Alternatives
Frontity, Gatsby, and Next.js all enable React-based frontends for WordPress, but they take different approaches. Gatsby uses static site generation, building all pages at deploy time for maximum performance. This works well for content that rarely changes but requires rebuilds when new content publishes. Next.js offers both static generation and server-side rendering, providing flexibility for different content types. Frontity focuses specifically on WordPress, offering a simpler configuration path at the cost of flexibility for non-WordPress data sources.
| Feature | Frontity | Gatsby | Next.js |
|---|---|---|---|
| WordPress Integration | Native, zero-config | Plugin required | Manual setup |
| Rendering | Server-side | Static + SSR | Static + SSR |
| Learning Curve | Low (WP-focused) | Medium | Medium-High |
| Data Layer | REST API | GraphQL | Flexible |
| Plugin Ecosystem | Growing | Extensive | Minimal |
When to Choose Frontity
Frontity excels for projects that need WordPress's content management capabilities with frontend experiences matching dedicated web applications. Publishing sites with large content libraries benefit from WordPress's editorial workflow while Frontity delivers fast, engaging reading experiences. E-commerce sites can use WordPress for product management while Frontity renders interactive shopping interfaces. Marketing sites gain the ability to implement complex landing page designs while maintaining familiar content authoring.
Traditional WordPress themes remain viable for projects with simple design requirements and limited development resources. Themes like GeneratePress and Astra deliver good performance out of the box while allowing customization through the block editor and theme options. However, projects requiring highly customized interactions, complex animations, or application-like features will find Frontity's React foundation better suited to these requirements. For teams looking to integrate AI-powered features into their WordPress sites, Frontity's modern React architecture provides an excellent foundation.
For organizations committed to WordPress as a content platform but wanting modern frontend capabilities, Frontity represents a well-designed bridge between these worlds. When combined with our web development services, teams can leverage WordPress's content management strengths while delivering exceptional user experiences.