Modern Way to Build Websites
Using Content Mesh to Build Websites
I would argue, the most efficient way to build blazing fast secure websites is to use a Static Site utilizing a new concept we are calling the 'Content Mesh', which eliminates the headaches and maintenance of using servers. First, let's explain how most websites are currently being built!
How Most Websites are Built
Today, most websites are built with the following parameters:
- All data comes from one place... Servers hosted by some entity.
- They are developed on a Monolithic CMS application (Wordpress & Magento for example).
- Then the Monolithic App is shipped to the end user.
So, when you load a webpage, all the data for that page must be retrieved from your Server and sent to the browser. The more requests made (images, CSS files ,etc) the slower the page will load. There is a 'round' trip made with stops inbetween and that takes time, which your user may not wait for. As a consequence of this website performance can really suffer.
But the Monolithic CMS (or way of managing data) is adequated (dying) and so inevitably even they are changing to a 'Headless' CMS model... The front end (as seen in your browser) and back end (where all the data lives) of an application are separate and different ie... 'The Content Mesh'.
The Future is The Content Mesh
In a traditional website your had images, text, products, & search fields all coming from the same source (Monolithic CMS).
In Content Mesh, you pull the data from where it makes the most sense.
- Your images are stored in the cloud.
- Use Algolia for your Search function.
- Your product & payment information from Stripe.
- Your content from Contentful CMS.
These are all the best at what they do & you not have to force everything else into them, you combine these different things into Gatsby.
So This is So Much Easier
- We can manage data using specially-built tools the way is should be managed. There is no need to create a way to force external data into a cms, ie.. ecommerce data into Wordpress or force content stratagies into Magento. Use Magento for your products and use a Headless CMS for your content.
- You can load data from anywhere using API's (allows applications to communicate with each other). In the development world this is known as JAMstack.
- Build custom UI's (user interfaces) that combine multiple data sources to make it an enjoyable experience for the user.
How to Configure The Content Mesh
- Centralize all your data access with GraphQL.
- Serve only optimized static assets, which removes the servers when serving your UI. You should just be building assets (files) and putting them into 'cloud storage' and putting them on a CDN. That should be your front end application, no need to make data requests to a server. When you make any changes you just rebuild your static assets.
Centralize Data with GraphQL
- Link all data types together (products from Shopify, data from Contentful for example). You can create relationships between (product care instructions in headless cms, product data in Shopify).
- Single source of truth (data schema in one place) using GraphQL.
- Scalable application for development teams via The Content Mesh.
- Consistent, scalable, & sharable development workflow. Everything in one place via GraphQL.
Going Static for Everything
- Blazing fast performance. a server rendered page is never faster that a static rendered asset, no server.
- Simple deployment flow. Building local files to a folder and uploading them to a CDN.
- Reduces Development overhead. No longer managing servers, just worrying about your CDN.
How it works in Gatsby
- Node API's to load any data source into GraphQL
- 'Early bind' data at build time. more secure
- Generate static assets
- Automate performance tuning
- Depoly to CDN (Netlify)
- Rehydrate to a React app in the browser