{"componentChunkName":"component---src-templates-post-jsx","path":"/en/drupal-architectures","result":{"data":{"markdownRemark":{"html":"<h1>Monolithic, Decoupled, and Progressively Decoupled Drupal: Which Architecture to Choose?</h1>\n<p>Thanks to its flexibility, Drupal adapts to different types of architectures to meet varied needs. In addition to the monolithic and fully decoupled (headless) approaches, there is also a very interesting middle ground: <strong>progressively decoupled Drupal</strong>.</p>\n<p>In this article, we explore these three architectures, their advantages, drawbacks, and use cases, with a particular focus on concrete examples for the progressively decoupled approach.</p>\n<hr>\n<h2><strong>1. Monolithic Drupal</strong></h2>\n<p>The monolithic approach is Drupal's traditional model, where it handles both:</p>\n<ul>\n<li><strong>The backend</strong>: Content management, users, and roles.</li>\n<li><strong>The frontend</strong>: Page rendering via Twig (Drupal's template engine).</li>\n</ul>\n<h3><strong>Advantages</strong></h3>\n<ul>\n<li><strong>Simplicity</strong>: Everything is managed in a single environment, making maintenance easier.</li>\n<li><strong>Reduced development time</strong>: Drupal themes and built-in modules allow quickly building a functional site.</li>\n<li><strong>Native features</strong>: Drupal natively handles SEO, content preview, and other useful tools.</li>\n<li><strong>Lower cost</strong>: No need to integrate additional technologies.</li>\n</ul>\n<h3><strong>Drawbacks</strong></h3>\n<ul>\n<li><strong>Limited user experiences</strong>: Monolithic sites are less dynamic compared to those using modern frameworks.</li>\n<li><strong>Limited scalability for complex cases</strong>: Performance can degrade for overly loaded or specific architectures.</li>\n</ul>\n<hr>\n<h2><strong>2. Decoupled Drupal (Headless)</strong></h2>\n<p>In a decoupled architecture, Drupal is used solely as a backend to manage content and expose it via an API (REST, JSON:API, or GraphQL). The frontend is entirely built with modern frameworks like <strong>React</strong>, <strong>Vue.js</strong>, or <strong>Angular</strong>.</p>\n<h3><strong>Advantages</strong></h3>\n<ul>\n<li><strong>Modern user experiences</strong>: JavaScript frameworks deliver fast, dynamic, and engaging interfaces.</li>\n<li><strong>Backend/frontend independence</strong>: Teams can work separately on the backend and frontend.</li>\n<li><strong>Flexibility</strong>: Perfect for complex projects requiring a scalable architecture.</li>\n</ul>\n<h3><strong>Drawbacks</strong></h3>\n<ul>\n<li><strong>Increased complexity</strong>: Requires advanced skills to manage APIs and frontend frameworks.</li>\n<li><strong>Longer development time</strong>: Building a frontend from scratch is more time-consuming.</li>\n<li><strong>Higher cost</strong>: Involves more technical and human resources.</li>\n<li><strong>Loss of some Drupal features</strong>: Native tools like SEO and content preview must be recreated on the frontend.</li>\n</ul>\n<hr>\n<h2><strong>3. Progressively Decoupled Drupal</strong></h2>\n<p>The <strong>progressively decoupled</strong> approach is a compromise between monolithic and fully decoupled. Drupal continues to manage part of the frontend (via Twig), but certain specific parts are rendered dynamically with JavaScript frameworks like React or Vue.js.</p>\n<p>This allows adding modern, interactive features while retaining the benefits of monolithic Drupal.</p>\n<h3><strong>Usage Examples</strong></h3>\n<ol>\n<li>\n<p><strong>An Interactive Search Engine</strong>  </p>\n<ul>\n<li><strong>Case</strong>: Your Drupal site mainly displays static content, but you want to integrate real-time search with filters (facets).  </li>\n<li><strong>Solution</strong>: Use React or Vue.js to build a dynamic search interface, while the rest of the site remains managed by Drupal and Twig.</li>\n</ul>\n</li>\n<li>\n<p><strong>A Dynamic Content Carousel</strong>  </p>\n<ul>\n<li><strong>Case</strong>: You want to display an interactive carousel that fetches the latest articles without reloading the page.  </li>\n<li><strong>Solution</strong>: Integrate a React or Vue.js widget into a Twig page. Drupal exposes data via JSON:API, and the widget consumes it for dynamic rendering.</li>\n</ul>\n</li>\n<li>\n<p><strong>An Advanced Interactive Form</strong>  </p>\n<ul>\n<li><strong>Case</strong>: You need a complex form, such as a booking form with multiple steps and instant validation.  </li>\n<li><strong>Solution</strong>: Drupal generates the page and stores the data, while the form is managed by Vue.js for a better user experience.</li>\n</ul>\n</li>\n<li>\n<p><strong>A Dynamic User Dashboard</strong>  </p>\n<ul>\n<li><strong>Case</strong>: Users need access to personalized data (e.g., statistics or history) with a fast, responsive interface.  </li>\n<li><strong>Solution</strong>: Drupal manages roles and permissions and exposes data via an API. React or Vue.js builds the user interface.</li>\n</ul>\n</li>\n</ol>\n<h3><strong>Advantages</strong></h3>\n<ul>\n<li><strong>Balance between simplicity and modernity</strong>: You benefit from the efficiency of monolithic Drupal while integrating modern features.</li>\n<li><strong>SEO and native features preserved</strong>: Drupal continues to handle SEO, clean URLs, and content preview.</li>\n<li><strong>Targeted development</strong>: You only add decoupled features where they are needed.</li>\n</ul>\n<h3><strong>Drawbacks</strong></h3>\n<ul>\n<li><strong>Moderate technical complexity</strong>: Requires mastery of both Drupal and JS frameworks.</li>\n<li><strong>Hybrid development</strong>: Maintaining consistency between static and dynamic parts of the site can be challenging.</li>\n</ul>\n<hr>\n<h2><strong>Architecture Comparison</strong></h2>\n<table>\n<thead>\n<tr>\n<th><strong>Criteria</strong></th>\n<th><strong>Monolithic</strong></th>\n<th><strong>Decoupled</strong></th>\n<th><strong>Progressively Decoupled</strong></th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><strong>Simplicity</strong></td>\n<td>Very simple</td>\n<td>Complex</td>\n<td>Moderately complex</td>\n</tr>\n<tr>\n<td><strong>User Experience</strong></td>\n<td>Standard</td>\n<td>Very modern and interactive</td>\n<td>Mixed</td>\n</tr>\n<tr>\n<td><strong>Native SEO</strong></td>\n<td>Yes</td>\n<td>No</td>\n<td>Yes</td>\n</tr>\n<tr>\n<td><strong>Development Time</strong></td>\n<td>Fast</td>\n<td>Long</td>\n<td>Moderate</td>\n</tr>\n<tr>\n<td><strong>Cost</strong></td>\n<td>Low</td>\n<td>High</td>\n<td>Moderate</td>\n</tr>\n<tr>\n<td><strong>Scalability</strong></td>\n<td>Limited</td>\n<td>Excellent</td>\n<td>Good</td>\n</tr>\n</tbody>\n</table>\n<hr>\n<h2><strong>Which Architecture to Choose?</strong></h2>\n<ul>\n<li><strong>Monolithic Drupal</strong>: For simple or classic projects (blogs, showcase sites, institutional sites) with a limited budget.</li>\n<li><strong>Decoupled Drupal (Headless)</strong>: For complex projects requiring modern user interfaces or specific needs (high performance).</li>\n<li><strong>Progressively Decoupled Drupal</strong>: To add interactive features to a classic Drupal site without rebuilding everything from scratch.</li>\n</ul>\n<hr>\n<h2><strong>Conclusion</strong></h2>\n<p>With its different architectural approaches, Drupal offers unique flexibility to meet each project's specific needs. Whether you opt for a simple monolithic site, a fully headless architecture, or a progressively decoupled model, the choice depends on your goals, resources, and vision for the user experience.</p>","excerpt":"Monolithic, Decoupled, and Progressively Decoupled Drupal: Which Architecture to Choose? Thanks to its flexibility, Drupal adapts to different types of…","frontmatter":{"date":"2024-11-17","metaDate":"2024-11-17","title":"Monolithic, Decoupled, and Progressively Decoupled Drupal: Which Architecture to Choose?","tags":["Drupal 10","Drupal 11","Architecture","Conception","Strategy"],"path":"/drupal-architectures","cover":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIEAwX/xAAXAQADAQAAAAAAAAAAAAAAAAAAAQME/9oADAMBAAIQAxAAAAF3hp1S3OUD/8QAGBAAAwEBAAAAAAAAAAAAAAAAAgMQESH/2gAIAQEAAQUC2o7Cae//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPwFH/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGRAAAQUAAAAAAAAAAAAAAAAAAAEQITFx/9oACAEBAAY/AnwhSz//xAAbEAEAAgIDAAAAAAAAAAAAAAABABEhQRAxUf/aAAgBAQABPyEAXqXwkNuOkRdDLEwryf/aAAwDAQACAAMAAAAQ7O//xAAWEQEBAQAAAAAAAAAAAAAAAAAAARH/2gAIAQMBAT8Qsaf/xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAgEBPxBH/8QAGhAAAwEBAQEAAAAAAAAAAAAAAAERITFRQf/aAAgBAQABPxCvMJPSp+Gn0Ek4Xnh9lwUU+TEp/9k=","aspectRatio":1.49800796812749,"src":"/static/e54f9fd928416f64c910a3bfd2ffe418/88110/picture-strategy.jpg","srcSet":"/static/e54f9fd928416f64c910a3bfd2ffe418/0b320/picture-strategy.jpg 480w,\n/static/e54f9fd928416f64c910a3bfd2ffe418/60b32/picture-strategy.jpg 960w,\n/static/e54f9fd928416f64c910a3bfd2ffe418/88110/picture-strategy.jpg 1920w,\n/static/e54f9fd928416f64c910a3bfd2ffe418/40175/picture-strategy.jpg 2880w,\n/static/e54f9fd928416f64c910a3bfd2ffe418/e58c2/picture-strategy.jpg 3840w,\n/static/e54f9fd928416f64c910a3bfd2ffe418/c36ea/picture-strategy.jpg 6016w","srcWebp":"/static/e54f9fd928416f64c910a3bfd2ffe418/d1a9d/picture-strategy.webp","srcSetWebp":"/static/e54f9fd928416f64c910a3bfd2ffe418/bc3bf/picture-strategy.webp 480w,\n/static/e54f9fd928416f64c910a3bfd2ffe418/39337/picture-strategy.webp 960w,\n/static/e54f9fd928416f64c910a3bfd2ffe418/d1a9d/picture-strategy.webp 1920w,\n/static/e54f9fd928416f64c910a3bfd2ffe418/fcbe1/picture-strategy.webp 2880w,\n/static/e54f9fd928416f64c910a3bfd2ffe418/c136d/picture-strategy.webp 3840w,\n/static/e54f9fd928416f64c910a3bfd2ffe418/bbbdf/picture-strategy.webp 6016w","sizes":"(max-width: 1920px) 100vw, 1920px"},"resize":{"src":"/static/e54f9fd928416f64c910a3bfd2ffe418/c4f3a/picture-strategy.jpg"}}}}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"pathSlug":"/drupal-architectures","locale":"en","prev":{"fields":{"locale":"en"},"frontmatter":{"path":"/paragraphs-vs-ief","title":"Paragraphs vs Inline Entity Form","tags":["Drupal 10","Drupal 9","Performance","Site building"]}},"next":{"fields":{"locale":"en"},"frontmatter":{"path":"/inbound-outbound-processing","title":"Inbound & Outbound Processing","tags":["Drupal","Core feature","HTTP requests","Module development"]}}}}}