Content Management Systems (CMS) are the main stay of most Web & Mobile based businesses, especially those engaged in Content Marketing, E-Commerce, Digital Publishing and Education. A CMS helps users create, manage, and modify content on a website without the need for specialised technical knowledge.

A CMS reduces the need of building your own system for creating web pages, storing images, and other functions, the content management system handles all that basic infrastructure requirements for you so that you can focus on more forward-facing aspects of your website.

WordPress is probably the name most people associate with CMS, primarily because it has been the popular choice and has been around for a long time. In that time, it has grown to power nearly 40% of all websites available on the internet. In fact, it is often considered the defacto choice for any organisation looking to make a start with their digital presence.

WordPress for beginners is often considered to be easy to use and does everything for you out the box. Many organisations, may never outgrow the need for WordPress and it will work just fine for their simple use cases.

What are the vital Components of a CMS

Most Content management system is made up of two core parts:.

Content Management Application (CMA)

The part of the software system that allows you to actually add and manage content on your site.

Content Delivery Application (CDA) 

The backend, behind-the-scenes process that takes the content you input in the CMA, stores it properly, and makes it visible to your visitors.

The traditional CMS approach to managing content was to put everything in one big bucket

  • Written Content
  • Images
  • Video
  • Audio
  • HTML
  • CSS
  • Javascript

This is often double edged sword, because it made it difficult to share content across multiple systems easily, and it often incurred very costly migration projects and even more expensive system integrations to expand or even change functionality.

When your business is just starting out, and still in the relatively small scale this approach works great and in many ways is the most convenient approach.  It’s often tempting to put everything in your online CMS, such as

  • Product Information
  • Graphics
  • Price Lists
  • User Information
  • Customer Relationship Management (CRM)

The problem with this approach is that only does it clutter your main marketing machine it also becomes a massive security vulnerability and your website is a very attractive target for nefarious actors.

What is a Headless CMS

The needs of digitally transformed businesses have changed and the number of different devices and platforms that they need to target with their content has increased, they simply cannot use the All-in-one approach offered by platforms like WordPress.

Many organisations are now making use of Static Website Generators and the JamStack approach to building their web and mobile presence.

The traditional CMS approach makes it difficult for content to adapt to other digital platforms.

A headless CMS is a back-end content management system where the content repository is separated or decoupled from the presentation layer. Content that is housed in a headless CMS is delivered via API (Application Programming Interface) for seamless display across different devices.

Headless CMS architecture is a multichannel solution for effectively publishing dynamic content across a variety of platforms and devices. Content stored in a headless architecture is raw and unformatted, and its final presentation isn’t limited by a front-end system.

This is achieved by headless content management system, not taking the traditional approach of organizing content around pages. Instead, using a content model approach — a framework for organizing types of content and defining how each type relates to another.

What is a Static Generated Website

Statically generated sites or pre-rendering and server-side rendered applications are two modern ways to build front-end applications using JavaScript frameworks. These two modes, yet different, are often mixed up as the same thing.

Most JavaScript web and mobile based frameworks enable developers to build three types of applications

 

  • Single Page Applications (SPA)
  • Server Side Rendered Applications (SSR)
  • Static Site Generator (SSG)

A static-site generator (SSG) is a software application that creates HTML pages from templates or components and a given content source. Give it some text files and content, and the generator will give you back a complete website; this completed website is referred to as a static-generated site. This means that the website’s pages are generated at build time, and their contents do not change unless you add new content or components and then rebuild — you have to rebuild the website if you want it to be updated with the new content.

Advantages of Static Generated Websites

  • Speed

    Your sites' pages and content are generated at build time, you do not have to worry about API calls to a server for content, thus improving performance

  • Deployment

    Once your static site has been generated, you will be left with static files. Hence, it can be easily deployed to a platform such as Netlify.

  • Security

    A static-generated site solely comprises static files, with no database for an attacker to exploit by injecting malicious code. So, vulnerability to a cyber attack is minimal.

  • Verson control

    You can use version control software (such as Git) to manage and track changes to your content. This comes in handy when you want to roll back changes made to the content.

Understanding the differences between SSR & SSG

  • SSR

    Server side Rendering has been a fairly common pattern for web development for a number of years. A number of the leading Web Development Frameworks like Ruby on Rails, Django, PHP & WordPress, and .net Framework, all essentially make use of this pattern to dynamically populate HTML templates with variable content. The content is generated on a per request basis from details stored in a Database. It is also comparatively slower because the HTML templating process happens at the time of the request instead of the build process

  • SSG

    Static Site Generators enable developers to create many pages all at once using templates with the content plugged into them. The content for each page is developed and written in Markdown file and plugged into the correct template format to ensure wach page is standardised using the a static site generator. This pattern is much faster for the developer, because it reduces the amount of HTML boiler plate code required for each page.

    The site is also generated at Build time, by a scripts or Static Website Generator like Nuxt, Gridsome or Next.js etc that plugs all content to the desired templates pre-generating the HTML to render each page properly

Drastically improved performance results

The performance difference between both is literally Chalk & Cheese.  Primarily because when a user navigates to a route in SSG based site the content is already available in the form of a Static page.

There are some elements that make SSG based websites somewhat less flexible as opposed to their SSR based one. However, these are also overcome by implementing the correct tooling and automation which does require additional skills. However, it does also in some way reduce the amount of Technology and infrastructure required to host websites.  However, in some cases this complexity may be just moved to a less critical layer.