How Headless CMS and Static Site Generators Work Together
Oct 29, 2019
By: Jason Smith
When it comes to delivering personalized digital experiences, companies have turned to highly dynamic websites. The cost of these dynamic websites, however, is that they often struggle with poor performance. And this is especially true with users moving towards mobile, tables, and other devices with fewer computing resources.
The need for higher performance has recently sparked growth in the use of static site generators, the AMP stack, and many alternatives encouraged mostly by developers and IT teams. But the majority of marketers still aren’t making page speed a priority.
Let’s look at the difference between static and dynamic sites and how a headless CMS works with Static Site Generators to deliver blazing-fast websites with ease.
Static vs. Dynamic Sites Explained
While most websites of the past were static, the internet is now full of both static and dynamic sites. Dynamic sites may offer more feature-packed websites, but static sites still have their use-cases. Let’s look at some of the key differences between the two types of websites.
Most static websites further improve their performance by publishing web pages on content delivery networks (CDNs). CDNs cache content globally at the network edge to reduce the loading times and bandwidth of websites. Even without using a CDN, most HTTP servers are highly efficient for delivering static files. It’s also much easier to scale a website when you don’t need to spin up multiple database instances and keep them in sync. The heavy lifting is at the time the website content changes instead of when a user visits the website.
A dynamic website provides different content on each visit based on the user preferences, the time of day or season, the user’s language, and many other factors. Many dynamic websites integrate seamlessly with a CMS to deliver highly personalized experiences. This means most of the work is done in real-time when the user visits the website instead of whenever content and data changes like static websites.
While they may offer unique experiences for users, dynamic sites can drain system resources and are often more expensive than static websites. There are ways to mitigate bandwidth waste such as caching, optimizing API calls, using GraphQL, and many other tactics, but it’s unlikely that dynamic sites can match the performance of static sites.
If real-time data and dynamic experiences are required, dynamic sites are the way to go. Otherwise, static sites offer a reliable, scalable, and simpler alternative. But enterprise-grade static sites are only straightforward if they’re paired with the right tooling.
Using SSGs With a Headless CMS
Static site generators (SSGs) like GatsbyJS make it straightforward to pull data via APIs and generate a static PWA that’s easy to deploy to any web host or content delivery network. Using an SSG alone, however, puts limitations on marketing teams. Most SSGs don’t have a WYSIWYG editor or workflow capabilities to track and collaborate over content creation. That’s why a CMS is not only essential for dynamic sites but static sites as well. CMSs are a great source of content before running a static site generator.
Traditional CMSs, however, are not up to the task of efficiently delivering content through APIs. These CMSs were great for monolithic dynamic websites, but they don’t offer the flexibility necessary for SSGs as well. That’s why headless or hybrid CMSs are a natural fit for static site generators. A decoupled CMS has a rich set of content management features like workflows, integration with third-party systems, and many other capabilities while developers have the freedom to build the frontend using the tools they want.
With an SSG, developers can set the tool up to pull content via APIs and generate a new static site whenever content has changed within the CMS. That way, the static site is always up to date, but there’s little processing necessary when the user visits the website. A headless CMS and SSG is the perfect match.
dotCMS Supports Both Static and Dynamic Sites
dotCMS supports both static and dynamic sites out of the box because it’s API-driven and has low code tooling for developing new endpoints whenever necessary. That’s why the platform is straightforward to integrate with GatsbyJS, Hugo, or nearly any other SSG.
With dotCMS, marketers can even take a hybrid CMS approach by having a dynamic main company website and using static sites for landing pages, campaign sites, event sites, or other high traffic websites. The platform is built for multi-site management, so it’s straightforward for marketers to quickly launch a variety of microsites that are highly tailored to specific audiences.
It’s crucial that you choose the right technologies and website architecture for each particular use-case. That’s why a flexible platform like dotCMS can help your company remain digitally agile. You’ll be prepared for static sites, dynamic sites, or any other technology that emerges in the future. With dotCMS, you won’t get left behind.
For more on SSGs, see our post on building a website with dotCMS and GatsbyJS.