Jamstack Development 101
This post dives into the basics of Jamstack and the tools you need to get started with Jamstack architectures.
What is the tl;dr on Jamstack?Anchor
Jamstack is an architecture approach which relies on static files to serve a highly performant website
First coined by Netlify, the Jamstack grew out of a trend to create modular microservice architectures to build performant websites
Jamstack architectures connect services together via API to create a customized stack without the long lead times of in-house development
In combining the power of Javascript, reusable APIs, and Markup teams are able to create a wide range of sites from enterprise-level marketing sites, to hobby project portfolios
How is Jamstack different from other architecture styles?Anchor
Traditional architectures are highly dependent on their presentation layer as well as require several steps from client request until the final request is served. The client makes the request to the webserver via URL which then requests data from the application server. The application server finally requests the information from the database. The request is then fetched from the database through the server layers to be formatted before finally being rendered and served to the client. This can take time, create additional complexity, and create potential vulnerabilities in the tech stack.
With the Jamstack, the frontend, presentation layer, and backend, data layer, are completely separate. This decoupled stack enables teams to prerender web pages according to their URL using CDNs. When a client requests a webpage, the call hits the CDN which returns a prerendered page. This approach leads to faster page speeds and a more simplistic infrastructure.
Why are people excited about the Jamstack?Anchor
Higher PerformanceAnchor
Jamstack reduces the number of moving parts needed to load a page or serve an asset. With pages and assets stored on globally distributed CDNs, teams can expect quick page load times and content that is stored near their user base. Higher performance can also be seen at scale for these same reasons.
More SecureAnchor
The Jamstack enables teams to build products where external requests only interact with the frontend systems and not the actual database. The prerendered pages and assets ensure that only there are as few public-facing systems as possible to diminish the likelihood of an attack.
No Vendor Lock-inAnchor
Because of the modular nature of Jamstack architectures, teams have the ability to choose a custom stack of services. If needs or tastes change, it is easy to make changes to the tech stack, especially in regard to serving content and auxiliary services.
Better Developer ExperienceAnchor
Developers have the ability to specialize and work with tools that are able to support their efforts. Instead of having to build everything from scratch, the rich community and tooling available for Jamstack enable developers to build projects that excite them.
Higher ReliabilityAnchor
Because the tech stack is statically generated and served via a CDN, teams have a highly reliable end product. The highly scalable architecture and simplified, modular services contribute to the highly reliable nature of the Jamstack.
Where do teams evaluating migrating to the Jamstack start?Anchor
There are some key first steps to evaluating a new tech stack and migrating from a monolith system to a Jamstack architecture. Here we give you a good place to start but this list is by no means exhaustive for all of the things that must be considered
Understand the contentAnchor
What content types will be served in the end project?
What content needs to be migrated from the existing project?
How often will the content be updated?
Will the content be served to multiple frontends?
How much content will there be for the initial setup? Future scaled version?
How big is the current and future team?Anchor
What is the current development capacity? Future development capacity plans?
What is the frontend/backend split
Are there specializations that should be considered within this team?
What about deficiencies that should be considered within the current team?
How many content creators will interact with content?
Where are your existing and potential users?Anchor
How many existing users will interact with the new project?
Where are they located?
What are the location-specific considerations in regards to users (ie. GDPR)?
In which regions are teams targeting new users?
What needs to be migrated to the new system?Anchor
How much content must be migrated from existing systems to the new system?
What form will this content be migrated to?
What is the process for exporting from the existing system?
Are there insights that are helpful from existing systems that could be useful in the new system?
Evaluate tools that match these initial criteriaAnchor
Importing and exporting content from systems is critical to understand when choosing new tools
Location-based regulations and offerings are critical, in particular when choosing the CDN
Make sure tools have the flexibility and scalability to serve teams not only for the initial implementation but will grow organically
Consider budget and timeline for the implementation of the individual tools and the entire stack
Start with the essential tools and move to more support tools
What are the essential tools for starting a Jamstack project?Anchor
Headless CMSAnchor
The headless CMS will serve as the content core for your project. It’s important to consider things like test environments, ease of collaboration, and the ability to connect external services to the headless CMS.
Frontend FrameworkAnchor
The frontend frameworks make building out the frontend faster and more structured. Popular choices for frontend frameworks in the Jamstack include React and Vue.
Cloud ServicesAnchor
Cloud services are critical services that are specific to the team’s use case. These could be Authorization and Authentication services or Digital Asset Managers or any other piece of technology that is critical to the success of the first iteration of the use case.
Content Delivery Network (CDN)Anchor
A Content Delivery Network (CDN) is a globally distributed set of servers that store and serve content. By storing the content geographically close to the users, CDNs ensure content is high performing by reducing page load times. Popular CDNs include Cloudflare and Fastly.
Static Site Generator (SSG)Anchor
Static Site Generators (SSGs) generate fully static HTML websites from content, templates, and components. They can be a key element of quickly building a static website. Popular SSGs include Next.js, Gatsby, 11ty.
Static Hosting SolutionsAnchor
Static hosting solutions make it easy to deploy new content and host the content in the cloud. Popular solutions for static hosting solutions include Vercel and Netlify.
