Getting Started with the Jamstack
This guide gives an overview of Jamstack architectures and how to get started building a statically generated Jamstack website using modern tooling.
What is the Jamstack?Anchor
Jamstack is a modern approach to website architecture that enables performant website building that offers a seamless user experience. The Jamstack relies on decoupled services, meaning the front end and back end are separate services that are connected via API. The back end of a Jamstack site is powered by an API which can be a headless CMS or custom application. The front end relies on Javascript, HTML, CSS, in many cases built by a static site generator. Jamstack is also sometimes written as JAMstack to further emphasize the decoupled nature of the architecture.
JAMstack stands for Javascript, APIs, and Markup, and thus all Jamstack follow these general guidelines, with the key criteria being that they are largely static sites or applications using decoupled modern tooling.
What are the benefits of using the Jamstack?Anchor
There are many benefits of adopting a Jamstack architecture. We take a deep dive into them here:
More performant websitesAnchor
Jamstack sites are built with modern tooling that reduces overhead to focus on speed. Jamstack projects are essentially static files where the frontend is prebuilt, pre-rendered, served from a CDN. This process enables the sites to be delivered quickly.
Customizable Tech StackAnchor
Jamstack sites can be a mixture of SaaS offerings, modern tools, and custom applications giving teams endless possibilities for choosing the tech stack that is best for their team and use case. While this high level of customization can be intimidating at the beginning of a project, there are many resources for pointing teams in the right direction for their use case.
First Class ToolingAnchor
The popularity of the Jamstack architecture has been a contributing factor to the rich API-first tooling that accompanies the architecture style. Specialized services enable teams to quickly build more complexity into their Jamstack projects without having to build everything from scratch. In many cases, services can be tested without disturbing the existing stack, making experimentation much more fluid.
Thriving CommunityAnchor
The Jamstack community is a passionate group of creators and innovators and is growing all of the time. Developers coming from a wide range of backgrounds are building projects ranging from hobby projects to enterprise sites. This thriving community makes it clear that Jamstack will continue to develop and not just be a passing trend.
Positive Developer ExperienceAnchor
The Jamstack makes it easy for developers to specialize and work with tools that are exciting to them. Because the front end and back end are decoupled, developers can build within their specialization and outsource services that they do not have the capacity to build in-house. Jamstack sites are also highly secure because all requests are made to the front end, rather than the back end.
What are the drawbacks of using the Jamstack?Anchor
Jamstack architectures do have some drawbacks, especially for people who are used to working with monolith sites. While they all have workarounds, it is important for teams to understand what may be unexpected when working with the Jamstack.
Require a shift in mindset for content creatorsAnchor
Content creators can be very used to creating content using page builders using WYSIWYG. The Jamstack, however, employs Markup where HTML is served statically and may have a limited ability for teams to create content using the WYSIWYG approach. Static site generators with a headless CMS can help bridge the gap for teams that are used to building in a page builder where they can preview content before publishing it.
Content can get out of hand without a headless CMSAnchor
Because content essentially becomes a collection of static files, it can become quickly difficult to ensure that all of those files reflect the current content wishes. If teams want to remain flexible and have the ability to experiment with content over time, it may be wise to implement a headless CMS to improve the editor experience without the dev team building a custom solution.
Overwhelming amount of options for tooling and servicesAnchor
The offerings for Jamstack tooling are expansive and require time to dive into the diverse set of product offerings. There are players that range from industry heavyweights such as frameworks like Gatsby and Nextjs or customized tooling that can enhance the creation of a static site ranging from headless CMSs to analytics tools.
Who uses Jamstack architectures in production?Anchor
Jamstack architectures are popular in production for enterprises, startups, and side projects. The highly varied projects in production demonstrate that Jamstack has appeal to a wide range of development teams. There have been high-profile walkthroughs on how and why teams made the switch to the Jamstack like Colin Kapernick’s Just Do It campaign for Nike. Our team at GraphCMS has also profiled many clients that made the switch from monolith to the Jamstack including Startups.com and SMB Financing company QuickBridge.
What are the essential tools for starting a Jamstack project?Anchor
As mentioned throughout this post, tech stacks for the Jamstack are highly customized and dependent on the use case. That being said, there are some tools and services that are essential for building a performant stack quickly.
Static Site Generator (SSG)Anchor
Static Site Generators make it quick and easy to create HTML from templates, components, and a content source. Popular SSGs include Gatsby and NextJS. We took a deep dive into our top picks for SSGs in 2021 in a blog post.
Cloud ComputingAnchor
Cloud computing services offer hosting for web applications and static sites. Vercel and Netlify are popular options for hosting services.
CDNAnchor
A content delivery network (CDN) is a distributed network of servers and data centers that work to reduce the physical distance between servers and users. This helps decrease load times and bolster security and performance. Popular CDNs include Cloudflare, Fastly, and CloudFront.
Headless CMSAnchor
A headless CMS is a backend-only content management system that uses an API to make content available to the chosen frontend or presentation layer. Headless CMS give teams the flexibility to create and organize content easily in a frontend agnostic way. Evaluate how to choose a Headless CMS with our Headless CMS Selection Checklist.
