{"id":4291,"date":"2020-01-08T18:36:47","date_gmt":"2020-01-08T13:06:47","guid":{"rendered":"https:\/\/www.idslogic.com\/blog\/?p=4291"},"modified":"2025-02-25T16:07:53","modified_gmt":"2025-02-25T10:37:53","slug":"why-gatsby-is-a-great-option-for-decoupling-drupal","status":"publish","type":"post","link":"https:\/\/www.idslogic.com\/blog\/why-gatsby-is-a-great-option-for-decoupling-drupal","title":{"rendered":"Why Gatsby Is a Great Option for Decoupling Drupal"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_72 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.idslogic.com\/blog\/why-gatsby-is-a-great-option-for-decoupling-drupal\/#Why_Use_Gatsby_and_Drupal_Together\" title=\"Why Use Gatsby and Drupal Together?\">Why Use Gatsby and Drupal Together?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.idslogic.com\/blog\/why-gatsby-is-a-great-option-for-decoupling-drupal\/#Important_features_of_Gatsby_that_make_it_ideal_for_decoupling_with_Drupal_CMS\" title=\"Important features of Gatsby that make it ideal for decoupling with Drupal CMS:\">Important features of Gatsby that make it ideal for decoupling with Drupal CMS:<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.idslogic.com\/blog\/why-gatsby-is-a-great-option-for-decoupling-drupal\/#Developed_Keeping_Performance_in_Mind\" title=\"Developed Keeping Performance in Mind:\">Developed Keeping Performance in Mind:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.idslogic.com\/blog\/why-gatsby-is-a-great-option-for-decoupling-drupal\/#PWAs_Out_of_the_Box\" title=\"PWAs Out of the Box:\">PWAs Out of the Box:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.idslogic.com\/blog\/why-gatsby-is-a-great-option-for-decoupling-drupal\/#It_is_Easy_to_Learn_and_Use\" title=\"It is Easy to Learn and Use:\">It is Easy to Learn and Use:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.idslogic.com\/blog\/why-gatsby-is-a-great-option-for-decoupling-drupal\/#Some_Advantages_of_Decoupling_Drupal_with_Gatsby\" title=\"Some Advantages of Decoupling Drupal with Gatsby:\">Some Advantages of Decoupling Drupal with Gatsby:<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<p><span style=\"font-size: 14pt;\">Creating your CMS website with headless Drupal and Gatsby is a great option as Drupal is an enterprise quality CMS for free and it can be paired with a modern development experience while enjoying all the benefits of JAMstack, performance, security and scalability.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Why_Use_Gatsby_and_Drupal_Together\"><\/span><span style=\"font-size: 14pt; color: #008000;\"><strong><span style=\"font-size: 18pt;\">Why Use Gatsby and Drupal Together?<\/span> <\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-size: 14pt;\">Gatsby is a fast React based static site generator that can be used to create static sites and then the content can be pulled from Drupal CMS. Among various CMSes available in the market, Drupal gives a breakthrough experience, which offers powerful content modeling, UI creation, workflow capabilities, thereby helping the branding, marketing and lead generation efforts. Drupal CMS and Gatsby is a powerful combination and is also a great option for a decoupled architecture.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Decoupled Drupal has become a very popular approach and <span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"\/drupal-development\/\">Drupal development companies in India<\/a><\/span> are creating enterprise grade websites as they are familiar with the CMS. Drupal is \u00a0great for:<\/span><\/p>\n<ol>\n<li><span style=\"font-size: 14pt;\">Content modelling and complex page layouts having multiple sections per page<\/span><\/li>\n<li><span style=\"font-size: 14pt;\">Teams that have a multi stage review processes and content creation<\/span><\/li>\n<li><span style=\"font-size: 14pt;\">Drupal developers who value using open source technologies that are highly popular<\/span><\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Important_features_of_Gatsby_that_make_it_ideal_for_decoupling_with_Drupal_CMS\"><\/span><span style=\"font-size: 18pt; color: #008000;\"><strong>Important features of Gatsby that make it ideal for decoupling with Drupal CMS:<\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-size: 16pt; color: #003366;\"><strong>The Plugin Usage Makes Everything Simple and Easy:<\/strong><\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Plugins help to make the website offline, supports inline SVGs, add Google analytics and make Gatsby extensible and flexible. There are different types of Gatsby plugins and the Gatsby source plugin helps to fetch data from the remote or local source and allows it to be used via the GraphQL. This of course implies that anything can be used as a source to work with Gatsby and then create static sites. Though some plugins may need to be listed by name, there are some others that may take options.<\/span><\/p>\n<blockquote>\n<p style=\"box-shadow: 0 0 16px #cccccc; padding: 10px;\"><span style=\"font-size: 14pt;\"><strong>Also Read:<\/strong> <span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"\/blog\/the-journey-of-drupal-from-1-0-to-drupal-8\">The Journey of Drupal from 1.0 To Drupal 8<\/a><\/span><\/span><\/p>\n<\/blockquote>\n<h3><span class=\"ez-toc-section\" id=\"Developed_Keeping_Performance_in_Mind\"><\/span><span style=\"font-size: 16pt;\"><strong><span style=\"color: #003366;\">Developed Keeping Performance in Mind:<\/span> <\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-size: 14pt;\">The Gatsby framework is created to optimize the performance of the site on its own and it compiles the Webpack configuration to create the site, once the source code is created. It works by prefetching the resources to give a world-class surfing experience to the website users. It also follows Google\u2019s PRPL architectural pattern that aims to boost the website\u2019s performance on mobile devices. The pattern helps to structure and serve the Progressive Web Apps and a <span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"\/drupal-development\/\">Drupal development company<\/a> <\/span>can create PWA with Gatsby by running the page via HTTPS and also installing a plugin for the service worker.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"PWAs_Out_of_the_Box\"><\/span><span style=\"font-size: 16pt;\"><strong><span style=\"color: #003366;\">PWAs Out of the Box:<\/span> <\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-size: 14pt;\">Gatsby applies the best practices to boost the performance and also adds to the smoothness of the user experience to offer the users an app like experience.\u00a0 Gatsby boots up React on loading the page and navigates the site to give you a single page application experience having near instant transitions without page reloads. It works by prefetching the related content in the background so as to nullify the chance of delay on the user click.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"It_is_Easy_to_Learn_and_Use\"><\/span><span style=\"font-size: 16pt;\"><strong><span style=\"color: #003366;\">It is Easy to Learn and Use:<\/span> <\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-size: 14pt;\">Gatsby is based on React.JS that is a JavaScript library used to create user interfaces by using components. It is comparatively easy to learn and if you are aware of JavaScript codes, then it becomes easier. Working with Gatsby doesn\u2019t need anyone to learn everything from the scratch and so it saves a lot of crucial time. Gatsby also has a vast and active community that helps the Drupal development company having any concerns.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Some_Advantages_of_Decoupling_Drupal_with_Gatsby\"><\/span><span style=\"font-size: 16pt; color: #003366;\"><strong>Some Advantages of Decoupling Drupal with Gatsby:<\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-size: 14pt;\">Static site generators pre-generate the pages of the site, which render pages on demand, thereby alleviating the needs for a live database. Using Gatsby helps to enhance the performance and reduces the maintenance costs. The static site generators have become highly popular over the past few years and it has become the preference for Drupal developers in India who want to create a simple website with minimal server setup and low cost. Drupal is a powerful CMS and is preferred by the publishers for its WYSIWYG and content times that help them manage the content more systematically and easily.<\/span><\/p>\n<blockquote>\n<p style=\"box-shadow: 0 0 16px #cccccc; padding: 10px;\"><span style=\"font-size: 14pt;\"><strong>Also Read:<\/strong> <span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"\/blog\/differences-between-drupal-7-and-drupal-8-from-a-technical-and-business-perspective\">Differences Between Drupal 7 and Drupal 8 From A Technical and Business Perspective<\/a><\/span><\/span><\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Creating your CMS website with headless Drupal and Gatsby is a great option as Drupal is an enterprise quality CMS for free and it can be paired with a modern development experience while enjoying all the benefits of JAMstack, performance,&#8230;<\/p>\n","protected":false},"author":1,"featured_media":4292,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[534,549],"class_list":["post-4291","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-drupal-development","tag-drupal-development-company"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/4291","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/comments?post=4291"}],"version-history":[{"count":3,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/4291\/revisions"}],"predecessor-version":[{"id":10914,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/4291\/revisions\/10914"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/media\/4292"}],"wp:attachment":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/media?parent=4291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/categories?post=4291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/tags?post=4291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}