I recently got interested in the Jamstack, this new architectural approach to build websites. In this article, I propose you an overview of the subject and an example of Jamstack implementation using Google Cloud services.
Wtf is the Jamstack ?
There are many different opinions on what the Jamstack is, but they all highlight a set of practices that revolutionize the way websites are built.
Frontend/backend decoupling
The frontend is strictly decoupled from the backend and the database. The backend is most often integrated with the frontend during the build time and not the runtime. This allows the frontend to be deployed globally on a CDN, closer to the users.
This is completely contrary to a WordPress website where the CMS is strongly coupled to the frontend (LAMP stack).
Static is better
The maximum number of frontend pages must be pre-rendered as static files before deployment. It is much faster for the browser to process static files, allowing a faster display of the web page.
This vision is opposed to Single Page Applications (Angular, React…), which are based on full client-side rendering.
APIs for dynamic content
Regarding dynamic content, the frontend uses Javascript to query APIs, allowing a modular approach. You can exploit the existing ecosystem of third-party services or build your own services as serverless functions.
Automated builds
As the website is pre-rendered at build time, automated builds are used to build the website and update the CDNs when the content changes. These builds are typically triggered by a push to the git repository or by a webhook called by a CMS.
A typical Jamstack workflow — Contentful
Benefits of the Jamstack
Performance
Content is pre-rendered and served from a CDN, allowing a very good performance.
Security
The Jamstack is more secure by design because it reduces the attack surface of your website. CDNs are safer than servers because they only serve static files.
Scalability
The Jamstack is very scalable, once again thanks to pre-rendered frontend and the use of CDNs .
Developer experience
Because of its modular approach, the Jamstack allows frontend developers to separate themselves from monolithic architectures and focus on what they do best.
The Jamstack is very suitable for building sites that do not offer personalized content to their users. Some dynamic features may be harder to implement in a static site.
😎 Landing pages, blogs, eCommerce, documentation, WordPress replacement
🥵 Very large sites, social networks, SaaS UI
Tools and services
The Jamstack has a rich ecosystem, offering a wide choice of tools and services to help you build your solution.
Static site generators
As their name suggest, static site generators allow to generate static web sites and thus have a key place in the Jamstack. See Jekyll, Eleventy, Gatsby, Hugo…
Recently, a new generation of Javascript frameworks has emerged, allowing static site generation but also new features, like Incremental Static Regeneration, that could be the future of the Jamstack. Have a look at frameworks like Next.js, Nuxt.js, SvelteKit, Fresh…
Headless CMS
Headless CMS are decoupled from the frontend and can be requested using their APIs (REST / GraphQL). See Strapi, Ghost, Keystone, Contentful…
Sometimes, it’s more convenient to store content directly in the git repository. Git-based CMS can plug into your git repository and update your content in it. Have a look at Netlify CMS, Forestry, Prose…
Hosting
Some platforms offer everything you need to host your Jamstack site (CDN, CVS integration, automated builds, serverless functions) and make it possible to deploy a site in one click. See platforms like Netlify, Vercel or Fly.io.
APIs & Microservices
You can benefit from the very rich ecosystem of third party services to build your site. For example: Auth0 for authentication, Algolia for in-site search, Twilio for sending SMS, Stripe for payments…
You can also build your own services and deploy them as serverless functions thanks to solutions like Firebase functions or Cloudflare workers.
The Jamstack landscape — Redpoint / Astasia Myers
Jamstack + Google Cloud = ✨
I work a lot with Google Cloud in my job at Devoteam G Cloud and I realized that it provides all the services needed to build and host a Jamstack site!
So I started creating a small proof of concept with the ultimate goal of building a blog following the Jamstack practices.
We will use Eleventy as a static site generator. I chose it for its simplicity and the fact that it offers a blog template.
For the headless CMS, we will use Strapi because it’s an amazing open-source product aaaaand it’s french 🐔. Strapi is easily deployable on App Engine and can connect to a Postgres database on Cloud SQL and a Cloud Storage bucket to store media.
To host our static website, we will use Cloud Storage + Cloud CDN.
Finally, for automated builds we will use Cloud Build. We can set a trigger based on a push on our repo, if we want to change the look of our blog. A second one based on a webhook that we can register in Strapi: it will be triggered if we update the content of our blog.
Architecture of our Jamstack on Google Cloud proof of concept
A few Terraform files and some Strapi configuration later: our blog is up and running!
I love recursion
All the source code is available on GitHub, feel free to use it:
https://github.com/femtozer/jamstack-gcloud
Here are some resources, if you want to learn more about the Jamstack: