Blogs

How Headless CMS and Static Site Generators Work Together

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.

Static Sites

A static website has web pages that are ready for browsers to consume immediately because the HTML, CSS, JavaScript, and other assets are pre-generated. Since the website is already rendered, there’s less demand placed on the user’s web browser. Often times, this means better web site performance — especially if the user is on a mobile phone or other devices with fewer computing resources.

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.

Another significant benefit of static websites is security. Without dynamic features and large amounts of JavaScript code, there are fewer vulnerabilities for hackers to exploit. Along with this, there are fewer API and database calls with static websites, which further limits access to backend systems.

Dynamic Sites

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.

Traditionally, dynamic websites were created with server-side scripting, but there is an increasing trend towards client-side scripting with frameworks like React and Vue. With dynamic sites, basic HTML pages are usually delivered first, and JavaScript code pulls the relevant data when the page loads using APIs. This also allows developers to build single-page apps so users can navigate between content and “pages” without fully reloading the website.

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.

Jason Smith
Chief User Experience Officer
October 28, 2019

Recommended Reading

Headless CMS vs Hybrid CMS: How dotCMS Goes Beyond Headless

What’s the difference between a headless CMS and a hybrid CMS, and which one is best suited for an enterprise?

Why Global Brands Need a Multi-tenant CMS

Maintaining or achieving a global presence requires effective use of resources, time and money. Single-tenant CMS solutions were once the go-to choices for enterprises to reach out to different market...

14 Benefits of Cloud Computing and Terminology Glossary to Get You Started

What is cloud computing, and what benefits does the cloud bring to brands who are entering into the IoT era?