Get Blisteringly Fast Speed with Crownpeak and Gatsby

1 Jul 2022
Crownpeak    profile image
Posted by Crownpeak

Further to Crownpeak’s launch of the SDK for React , we are pleased to announce the launch of a Gatsby Source Plugin enabling Crownpeak users to access Gatsby functionality in conjunction with Crownpeak’s Digital Experience Management (DXM) platform.

Now, developers can provide end-users with all the benefits of working with DXM, a decoupled, hybrid headless CMS, while accessing the advanced development, content sourcing, and deployment features Gatsby offers.

What is Gatsby?

Gatsby is a framework that, among other features, enables single-page app developers using the React framework to speed up content management system (CMS) page deployment.

Gatsby can also be utilized to enable users to consume content from other sources such as CRM systems, CDPs, and marketing automation and personalization platforms.

It enables the building, previewing, and deployment of search-engine-optimized digital experiences.

How does it work?

For many traditional CMS, facilitating rapid page loading requires spending a significant amount of money to upgrade system resources. This is necessary because these CMS work by sending a page request through the application to the database, which renders a page, pushes it back, and caches it.

For sites with high traffic volumes, the load on this infrastructure can get very heavy. This means that spending a large sum of money, often in the 10s or 100s of thousands of dollars, is often required to build the infrastructure necessary to boost performance to acceptable levels.

With Gatsby, this is less important because the software takes that dynamic content and statically creates it at build time rather than at request time. As a result, you end up getting a site that is static when an end customer visits it and therefore is quicker to load and offers greater scalability.

Gatsby offers:

  • Automated code-splitting
  • Image optimization
  • Inlined critical styles
  • Pre-loaded resources
  • Scalability
  • Security enhanced by serverless rendering, generating no surface subject to attack
  • Themes to simplify configuration
  • Recipes to automate common site building chores

The Crownpeak Digital Experience Management (DXM) Gatsby Source Plugin has been constructed to assist the Single Page App developer in building applications served by Gatsby that leverage DXM for content management purposes.

As an application is built in Gatsby, it collects information about pages, components, and their underlying data to perform server-side rendering. To facilitate this process for content contained within DXM, a runtime NPM Package is provided. The purpose of this package is to:

  • Read application configuration detail from a global environment file (e.g., Dynamic Content API endpoint and credentials, etc.);
  • Make data models available to the Gatsby Application, which a developer can map against
    • Dynamic Data - Processing data from the DXM Dynamic Content API, using the Search G2 Raw JSON endpoint.

What are the benefits of combining Crownpeak and Gatsby?

Gatsby enables rapid building, previewing, and deploying of content. Because critical content is only loaded on the page when the viewer needs to see it, and static content is prefetched, page loading is blazingly fast.

Content creation and deployment time are also accelerated, enabling development and front-end teams to collaborate to keep the customer experience as relevant as possible. Less time spent on the building and deployment process means that your staff has more time to focus on creating stunning, highly engaging content.

Gatsby integrates seamlessly with the existing software development life cycle of many developers and performs data polling from different locations. With the new plugin, Gatsby extends Crownpeak’s capabilities, allowing you to take advantage of all of Gatsby’s features while also benefiting from having DXM as your CMS.

The result is blisteringly fast speed at all stops on the development lifecycle, from building to previewing to deploying.

The combination of Crownpeak and Gatsby also enables you to use Gatsby with the SDKs offered by Crownpeak . These SDKs can reduce the code developers need to write when working with Crownpeak by as much as 95%; they provide a mechanism to use Crownpeak headlessly to support an on-the-glass experience with drag-and-drop.

How to get started

The Gatsby Source Plugin is available to all Crownpeak customers, enabling them to benefit from Gatsby’s functionality within DXM. The combination provides developers the best of both worlds, allowing them to work the way they want to, while speeding up the development process and the content serving process. To make things even easier, we’ve developed a Gatsby Starter to get you going quickly.

Watch this 20min video to learn how to implement Gatsby Source Plugin for Crownpeak DXM:

Gatsby Source Plugin for Crownpeak DXM

To see how you can make your websites fly with Crownpeak and Gatsby, request a demo today.

Tags: Web Content Management Digital Experience Management

More posts from Crownpeak