What’s under the hood: Where does the content come from?

by Nick Hu
20 June 20222 min read

It may not look like it, but our website just went through a complete overhaul and tune up. By using Next.js’s static site generator we’ve moved away from loading spinners and shaved 100’s of milliseconds off our page load times (that’s a lot in the website world)!

What’s the stack?

  • Strapi Headless CMS
  • Typescript
  • React.js
  • Next.js
  • URQL (for GraphQL)
  • SCSS modules
  • AWS S3 & CloudFront - Frontend & CMS
  • AWS EC2/ECS – API

In this post we’ll discover how we simplified the delivery pipeline for our content creators.

Where does the content come from?

There’s more than one way to skin add content to a website and our old one used three different methods. Why? Well, 4 years is almost 50 developer years (1 year is equal to 13.37 developer years). Progressive design updates, feature additions, and work for our wonderful clients meant that our own website was past its service date.

Our goal was to allow non-developers to update more content and structure. Using Strapi headless CMS we used our javascript and react skills to build a custom CMS solution, tailored for their needs.

To provide more creative control over how a page is structured we took advantage of Strapi’s dynamic component structure to provide a drag and drop component layout. We defined all the available frontend components, when creating/updating a page all you need to do is select the desired component and fill in the content.

Our new dynamic component system

On the react frontend we created a content renderer function that loops through the page components and renders them in the order provided via the CMS.

const  components  =  items?.map((item, index) => {
  switch (item.__typename) {
    case  'ComponentLayoutQuoteBlock':
      return <QuoteBlock  content={item?.body}  key={`${item?.__typename}-${index}`} />;
    case  'ComponentLayoutMarkdown':
      return <MarkdownBlock  content={item.content}  key={`${item?.__typename}-${index}`} />;
    // … more component types
    default:
      return null;
  }
});

Stay tuned for next time where we take a deeper into how we turn the CMS content into lightning fast web pages.

Sign up and stay in the loop!

Your email address

No spam and no sharing of your details. Just useful thoughts and ideas in your inbox. :)