Check out a free preview of the full Introduction to Gatsby course:
The "The Content Mesh" Lesson is part of the full, Introduction to Gatsby course featured in this preview video. Here's what you'd learn in this lesson:

Jason discusses what the content mesh is, and what it means to be a static site generator that can build static files from many data sources.

Get Unlimited Access Now

Transcript from the "The Content Mesh" Lesson

[00:00:00]
>> Jason Lengstorf: The next thing that Gatsby trying to do is that, Gatsby is acting as an orchestration layer for taming the Content Mesh. I'm saying a lot of words, don't worry, I'm going to explain them. And the many sources of data that are available on the web. So the monolithic CMS, as I said, is kinda dying.

[00:00:16] We're still seeing things like WordPress like Drupal, and they're still being used. But we're starting to see them shift toward this model of being headless, they act as an API as opposed to a UI layer. Decoupled Drupal is very popular, WordPress now has an API so you can do headless WordPress.

[00:00:36] There are entire CMS that are being built, designed to be headless, things like Sanity.io, things like Contentful. These are companies that were designed without a UI layer, they're just a way to manage data. And we need to be able to deal with that, right? So you need another solution for dealing with that data.

[00:00:55] So we call this Gatsby, the Content Mesh, my coworker, Sam Bhagwat, came up with this term. And it's the idea that, if you have data from all these disparate places. You're able to stitch them together into one common layer, the mesh. And that normalizes that data in a way that allows us to access it.

[00:01:14] Where it doesn't matter when you're building your site, if you're doing it with WordPress, or Shopify, or a combination thereof. You can also do it with local files, you can do it with a Jason, or a CSV. Whatever you've got, we can pull it in and we normalize it into this graphical layer.

[00:01:32] So it feels the same to work with your data, no matter where that data came from.
>> Jason Lengstorf: So in an old school site, if you were to take and look at this. You've got a search bar, you've got some images, some text, some products, and you would have to make a decision.

[00:01:48] All right, is this an e-commerce site or is this a blog? Because, if it's a blog, maybe we're gonna use WordPress. And then we have to figure out a way to shoehorn e-commerce into a WordPress site. Or maybe we're gonna use Magento because it's an e-commerce site. But now we have to shoehorn a blog into Magento.

[00:02:08] And both of them can handle that, but it's not what they were built to do. WordPress is built to be blogging software, Magento was built to be e-commerce software. And most tools are purpose-built for a thing, they do one thing really well. And that's what this headless CMS specialization is really showing us.

[00:02:25] Is that you can get these wonderful purpose-built tools that do one thing so, so well, and that's what you wanna use it for. With the Content Mesh, you're able to do that, so you just use the service that solves the problem. If you want a great search experience, hook in Algolia.

[00:02:40] You want content management for your text, pull in Contentful, it's great for that. You want to make sure that your assets are served in an optimized and cacheable way, Cloudinary is really good for that. You wanna sell something, Stripe is excellent for that. So you don't have to make these trade offs anymore, you can just look at what you need.

[00:02:59] Look at the best tool for each task, not for overall like on average, this is better than everything else. But, specifically for this task, this tool is the best, and then choose that tool and stitch it together into one solidified layer.
>> Jason Lengstorf: What this looks like in Gatsby is we're able to just put source plugins for anything.

[00:03:20] Another GraphQL API, I'm not gonna name all these logos, but you're able to just pull in content from everywhere. And it comes into Gatsby as this unified layer. You then build using reacting GraphQL. The GraphQL layer allows you to query for the data from any of these data sources.

[00:03:36] Or all of them together in one kind of unified query, which we'll look at a little later in the workshop. Once you're done, you run the Gatsby build process, which gives you a folder full of static assets. Those static assets can go up on any CDN, you can host them on, you can throw them up on an FTP, if you want.

[00:03:53] Or you can put them on Amazon S3, on Netlify, on Fastly, on whatever you prefer, whatever you have available to you. And then once you're done, this is where Gatsby really stands out from other static site generators because we go beyond that. Once you hit the browser, it rehydrate into a fully functional reactor.

[00:04:12] So you're not just serving static sites, you're actually serving Progressive Web Apps. And to look at how that kinda works in practice, this is our Swag Store. Now, this is an old version in the UI, the new version is a little different. We built this store because everybody who contributes to Gatsby is kind of automatically invited to be a maintainer of our repo.

[00:04:33] And we also give you a coupon code for proclaiming a free item swag. And we do that to say thank you to the people who are willing to volunteer their time to maintain Opensource. So the way this works is we've got products, you can add those products to a cart.

[00:04:47] And you're able to log in with your GitHub account, which is the how we verify whether or not you're a contributor to our repo. So we pull in the products from Shopify at Build Time. We query those products from our database, and we build static HTML with those.

[00:04:59] At run time, we check whether or not you're logged in, and we use Shopify API's to build a shopping cart. So we're able to kind of attach a shopping cart from Shopify to your user account that's at Auth0. And all of that is tied to static HTML that we built ahead of time with Shopify.

[00:05:18] Once you're logged in, we do the same thing. We use GitHub to pull in your recent contribution, so how many contributions you made. And then the actual contribution that was most recent, and then below that, we just pull in some issues. These are the latest issues, and we want that to be dynamic because those change by the minute, right?

[00:05:37] So this leads us to the third thing that Gatsby is, which is, it's a Progressive Web App generator. The idea is that we just wanna make the right thing the easy thing. We've talked about how hard it is to get all of these things right. Well, if you need to deliver a dynamic app experience.

[00:05:53] And you need to design this really interactive, really highly functional, extremely scalable, fast website, doing all of that from scratch would be extremely hard. But, if Gatsby lays the foundation, so that you don't have to think about the vast majority of what you're doing and just focus on the experience.

[00:06:12] Then you get most of it right by default, we call this making the right thing the easy thing. And the idea behind making the right thing the easy thing is that. By setting good defaults, you as an app developer, don't need to think about making good choices. You make good choices by not making choices.