Deep Dive

“The fastest auto dealership site in the world” Hundreds of hours of perf learnings, distilled

ContactSign Up for Free

Evolving the Headless CMS with Kontent by Kentico and Gatsby

Ondrej Chrastina
March 2nd, 2022

Editor’s Note: This is a guest blog post by Ondřej Chrastina, a Developer Relations leader at Kentico.

Over the last few years, the Headless CMS market has seen significant growth. At Kentico, we’ve seen the potential of the Headless CMS approach and have worked tirelessly over the last six years to fulfill our vision of what an ideal Headless CMS platform should be with Kentico CMS. Wanting to take that approach a step further, we decided to embrace a new approach: Kentico is no longer just a content management system, so we now offer two different products for two different segments of the market: Kontent by Kentico and Xperience by Kentico

Previously known as Kentico CMS, Xperience by Kentico is a unified digital experience platform (DXP) that includes a content management system and a set of digital marketing & commerce tools for smaller and mid-sized companies. Kontent by Kentico (previously known as Kentico Cloud) is our headless CMS platform for enterprises, and provides developers the flexibility to design digital experiences for any channel with an API-driven approach that integrates seamlessly with your existing tech stack. Kontent helps you leverage Gatsby easily and quickly.

Kontent and Gatsby

Gatsby has always focused on being easy to set up and spin up for developers, and we’ve taken that same approach with Kontent. To that end we make configuration and setup painless and straightforward for developers. Kontent is a headless CMS that offers you Content as a Service (CaaS) for all your content needs. Kontent provides CaaS with an easy-to-use editing interface and excellent collaboration features, so all your work on content can happen in one place without requiring technical help for each user.

The first-class source plugin that allows you to consume the data from the Kontent delivery REST API is fully compatible with Gatsby Cloud incremental preview. With Kontent addon Web Spotlight and Gatsby incremental preview, you can leverage the onsite editing experience of your Gatsby site right in the Kontent UI. The source plugin also allows you to not just fetch the content itself, but also meta information about the model, like taxonomy. And with new experimental features you can trigger your site rebuild by workflow step change, or shorten the build times by reducing the size of your Gatsby model.

Kontent at GatsbyConf: The Takeaway 

We hope Gatsby developers walk away from our session at GatsbyConf 2022 with a better understanding of how seamlessly Kontent works with Gatsby, including our support for such noteworthy Gatsby features as Deferred Static Generation (DSG) and Server-Side Rendering (SSR). More specifically, we’ll showcase how Kontent and Gatsby can simplify supporting multiple languages on your Gatsby-powered site, and explore some of the more advanced approaches to multilingual support.

In addition, we’ll show how you can take advantage of more advanced features in that context. For example, support for Gatsby’s DSG has helped our customers see increased build and hosting performance. 

We also recently released a new GraphQL API that makes sourcing content even easier.  The API is used to provide specific content to your website. Since the API responses are cached at the CDN level, content is provided more quickly to wherever it is needed.  

 

Kontent at GatsbyConf: The Talk

Talk: Building Advanced Multilingual Landing Pages with Gatsby and Kontent

Time: March 3rd, 12:00 PM MST – 2:00PM MST

You’ve tried Gatsby and know how it works, but are you up-to-date with its new features? In this workshop, you’ll build a new Gatsby site that fetches content from Kontent by Kentico, implement advanced rich text resolution with multilingual content, set up pages for both static and deferred rendering, and enable visual live-site editing for non-technical users with SSR.

What you will learn:

  • How to set up Gatsby project
  • How to connect it to Kontent
  • How to handle advanced cases for rich text resolution
  • How to handle multilingual use-cases (e.g. missing content in another language)
  • How to configure static, DSG, and SSR
  • How to enable editors work on their content in visual context of the website

Prerequisites:

  • Have a VS Code or another editor installed and available
  • Ideally, sign up for a free trial of Kontent (not required, but advised)

What should you bring: A glass of your favorite drink to celebrate the end result!

Kontent + Gatsby Developer Resources

To help you get your Kontent and Gatsby project up to speed quickly, here’s a list of available resources that should be helpful. 

Gatsby + Kontent Solution Page

https://kontent.ai/technologies/gatsby-cms/

Gatsby + Kontent Integration page

https://kontent.ai/integrations/gatsby/ 

Kontent Gatsby Packages

https://github.com/Kentico/kontent-gatsby-packages

Monorepo with Gatsby Kontent packages includes the source plugin providing data from Kontent delivery REST API and components package that helps you with the rich text resolution and image processing. Moreover you can browse the examples that will help you to start with Kontent and Gatsby. Developers can also contribute and explore the repository via embedded development site hooked right into the source code and components source code.

Gatsby: Sourcing From Kontent by Kentico

https://www.gatsbyjs.com/docs/sourcing-from-kentico-kontent/

Gatsby Cloud & Kontent
https://support.gatsbyjs.com/hc/en-us/articles/360052324654-Connecting-to-Kontent 

Gatsby: Using Gatsby with Kontent
https://www.gatsbyjs.com/guides/kentico-kontent/ 

Gatsby & Kontenet starter project
https://github.com/Kentico/gatsby-starter-kontent-lumen 

Gatsby &Kontent docs
https://kontent.ai/learn/tutorials/develop-apps/optimize-your-app/static-sites/?tech=react#a-leverage-graphql-with-gatsby 

Web Spotlight by Kontent

https://webspotlight.kontent.ai/

GraphQL API

https://kontent.ai/learn/reference/delivery-graphql-api/

 

Share on TwitterShare on LinkedInShare on FacebookShare via Email

Ondrej Chrastina is a Developer Relations Leader at Kentico.

Follow Ondrej Chrastina on Twitter

Tagged with CMS, GatsbyConf, headless-cmsView all Tags

Talk to our team of Gatsby Experts to supercharge your website performance.

Contact Gatsby Now
© 2022 Gatsby, Inc.