Modern Web Development with Headless Drupal

Drupal hasn’t always been the first choice for newer generations of web developers. Its steep theming learning curve and the shift toward modern JavaScript frameworks have pushed many frontend developers to look elsewhere for a more contemporary stack. At the same time, the Drupal community has been quietly building solutions in the contrib space to bridge that gap. 

At Stanford WebCamp, Alexei Gorobet, Director of Engineering at JAKALA, showed how Drupal can excel at what it does best—content management—while also delivering content to the frontend with the efficiency developers expect from cloud-native SaaS platforms. His session was packed with live demos that demonstrated how modern frontend workflows can pair seamlessly with Drupal in a headless architecture. 

The talk centered on recreating the polished editorial and developer experiences seen in SaaS platforms like Contentful, but with the flexibility and power of open-source tools backed by Drupal’s robust backend. 

This article breaks down the key ideas and takeaways from Alexei’s session, with links to the demo walkthroughs.

You can also watch the full presentation here: 

Setting a north star of the experience we're trying to create.

Contentful is a headless CMS and SaaS-based platform which delivers a fully managed CMS “in a box.” It’s hosted, maintained, and built for high availability, with the editor experience placed front and center. The goal is to give content teams a streamlined interface to edit, preview, publish, and immediately see updates reflected on the frontend. 

In this first demo, Alexei highlighted Contentful’s real-time preview mode, where changes appear instantly alongside the rendered frontend. Powered by React and hot-reloading frameworks like Next.js, this feedback loop offers a smooth, low-latency editorial experience that has set a benchmark in modern headless workflows. 

Access the Next.js Contentful Starter here.  

In the Drupal community, headless adoption sometimes sparks resistance, with common complaints like “I’m missing features if I go headless” or “this doesn’t work the way I want it to”. To address these concerns, Alexei moved into a second demo, recreating the same editorial workflow in Drupal to test how closely it could match and where friction points might still exist.  

But first, he explained the traits that make for a truly great developer experience.  

To demonstrate what’s possible, Alexei created two parallel Next.js apps: one connected to Contentful, the other to Drupal, and set out to replicate the same editor-friendly experience using open-source tools. 

Summarizing the approach:

1. Routing

The complicated part about routing is nothing is static. Using Next.js file-based routing, developers can easily create new pages with predictable URLs. For dynamic routing (e.g. /articles/[slug]), Alexei demonstrated how Drupal can serve content dynamically using API calls triggered by catch-all routes. 

2. Data Fetching with GraphQL

Alexei recommends the GraphQL module for Drupal, especially when paired with GraphQL Compose, for powerful, fine-grained content queries. With GraphQL, frontends request exactly the data they need, and Drupal responds efficiently. 

When combined with TypeScript, this workflow becomes AI-friendly and “hallucination-proof”: editors like Cursor and Copilot can make smarter suggestions, while built-in type safety helps developers avoid mistakes. 

3. Rendering Options

He walked through rendering models supported by React and Next.js: 

• Static generation 
• Server-side rendering (SSR) 
• Incremental static regeneration (ISR) 
• Partial pre-rendering 

Drupal content can be rendered through any of these approaches, giving developers flexibility to cache content, serve static versions, or update pages on demand. Alexei demonstrated how pages could be refreshed instantly via on-demand revalidation or allowed to expire after a set time. 

4. Live Previewing in Drupal

While Drupal doesn’t yet match Contentful’s live preview polish out of the box, it’s closing the gap. Alexei showed how projects like next-drupal and Jesus Olivas’s Drupal Decoupled starter kit enable in-editor previewing and rapid feedback loops—even when content is unpublished or unsaved. 

GraphQL combined with TypeScript delivers an ideal developer experience: 

• Schema introspection makes APIs self-documenting. 
• Fragment reuse simplifies component-level data fetching. 
• Real-time validation catches errors before they ship. 
• AI integration becomes more reliable with type-aware tooling. 

This setup allows both experienced engineers and “vibe coders” using AI tools to confidently build and iterate. 

Key Takeaways

• GraphQL + TypeScript= <3 creates an AI-ready, real-time development workflow. 
• Decoupled does not mean a bad editorial experience, as was demonstrated with Contentful. 
• React is not necessarily a client-side framework. There’s a lot of things developing. React is a fully react server, components are fully php for react. 

Resources

Drupal Decoupled 

Next.js Contentful Starter 

Learn more about our partnership with Contentful here.