The term was coined by Netlify and describes a web development approach that offers higher performance, better security, and an improved developer experience. Instead of incurring a server round-trip on every page load, Jamstack sites are self-sufficient within the browser.
Do Static Sites Use the Jamstack?
Static sites built with just HTML, CSS, and JavaScript are inherently client-side with no backend programming. In this way, they fit the criteria of the Jamstack.
Jamstack goes beyond simple websites and blogs though. Whereas static sites only utilize the “markup” aspect, perhaps with a little JavaScript, a Jamstack app may still have a backend and a persistent data store.
The difference compared to traditional web applications lies in how data reaches the store. In a legacy system, you might have an HTML form that creates records in a SQL database when you submit the page. You need a custom backend stack with supporting infrastructure.
A Jamstack application will cut the server-side complexity by sending data via APIs. You could still implement your own backend but it’s also common to use a third-party hosted solution such as Netlify or Google’s Firebase. Now the only infrastructure you need is a basic web server to supply your HTML and JavaScript to the user’s browser.
The Key Components
Here’s a recap of the Jamstack’s three constituent components:
JavaScript – The whole experience is powered by JavaScript within the user’s browser. You can use whichever framework you want, whether you favor React, Vue, Angular, or your own vanilla solution.
APIs – Data flows in and out of the user’s browser via APIs. If a form needs to be submitted, its input values should be captured by JavaScript and sent to your backend or a third-party service. This enhances the user experience by letting you display loading spinners and progress bars as data fetches occur. Markup – Content is created from human-readable markup formats such as HTML and Markdown. These can be served to the browser as-is for parsing by JavaScript. There’s no need to host a complicated CMS to create and edit content. You’d add a new blog post by writing a Markdown file and committing it to your project’s source control repository.
The overall approach sees markup and JavaScript land in the user’s browser from your web server. The JavaScript then mediates between your user and your backend storage APIs to facilitate any other data interactions you require.
A Smoother Developer Experience
Utilizing the Jamstack lets you focus on delivering functionality and improving the user experience. You don’t need to spend time configuring or maintaining costly backend infrastructure. Instead, you can use platform-as-a-service APIs to fetch and save your app’s data.
Jamstack pairs well with Git-based development and deployment workflows. As your stack is really just a web server, you can represent everything as a plain text file in your repository. Continuous delivery pipelines help you ship updates quickly, without re-provisioning servers.
Most of the time you won’t self-host any infrastructure components. Jamstack systems are commonly deployed straight to a static file host like Netlify, Firebase, GitHub Pages, or even a plain S3 bucket. Alternatively, you could containerize your application with Docker and launch it into a Kubernetes cluster.
Either way, you’re not manually copying files or tweaking server settings – you’re writing code and merging into your main branch to deploy. A final piece is usually a CDN like Cloudflare that sits in front of your web server solution, caching content to further improve performance for end users.
Decoupled Components
Jamstack lets you decouple the individual components of your application. In a traditional CMS-driven website, your code, content, and styles live together in a single system. You need the entire CMS available to serve any single function.
Using the Jamstack separates these components completely. Your web server serves the code while external platform providers handle your data. This gives you greater flexibility to switch out pieces of your stack as your requirements change.
The end user benefits from a more resilient experience too. Even if the data store goes down, you can still serve your core markup and JavaScript to display a proper error page. Loading times are faster as the browser only fetches code, not data, on its first contact with your server.
A key difference compared to server-rendered approaches is that Jamstack sites are always pre-built. You’re serving fully static assets, instead of combining code and data on every request the server receives. Your build process will run the compilation step once per deployment, creating the markup that your web server sends to browsers. This increases efficiency and performance.
The Drawbacks
The most significant Jamstack drawback can be the same code-based update model that often makes it so attractive. It’s often harder for content authors and editors to get involved, as they usually need to learn to write markup in HTML or Markdown. This can be daunting to non-technical writers familiar with a graphical WYSIWYG experience.
Another limitation is your inherent dependency on third-party platforms. The Jamstack encourages use of external APIs and hosting providers that could disappear or change their offering overnight. While running your own infrastructure comes with maintenance concerns, it also gives you certainty that your stack will stay functional long into the future.
It is possible to outgrow the Jamstack too. Implementing heavy dynamic features can cause issues if the platform you’re using can’t meet your requirements. You could end up bolting on your own backend midway through your product’s life. If you’re mostly serving text, images, and a few simple API calls, Jamstack should work well for you. For more complex scenarios, it may be trickier to find off-the-shelf solutions you can plug into your JavaScript and markup.
Get the Tools
You can create Jamstack apps with nothing more than a text editor and a terminal. Select a hosting provider, install its CLI, write some HTML files, and run the deploy command to push your site live.
In practice, most people opt to use some kind of scaffolding to make it easier to get started. If you’re building a web app, you could use a JavaScript framework to benefit from client-side routing and navigation. For static websites, you’ll probably want to use a static site generator like Jekyll, Hugo, or Gatsby that let you keep your theme separate from your content.
Dynamic functions are added by integrating third-party APIs, hosting your own microservices, or relying on serverless functions created with a public cloud platform. JavaScript-based solutions are readily available to implement forms, search, ecommerce, and other complex features, without writing a line of backend code yourself. You can find public lists of ideal services you could integrate with on GitHub.
Conclusion
The Jamstack is an approach to web app development that favors putting as much code as possible into the client. JavaScript and markup is sent to the browser; data then reaches your backend services via API interactions.
Jamstack’s popularity has grown with the improvements in browser APIs seen over the past few years. JavaScript has also significantly matured as a language, aided by dialects like TypeScript. These developments have made exclusive targeting of the frontend a more realistic proposition for many more teams.
Using a Jamstack approach often simplifies your app, facilitating quicker development and greater scalability. With less server-side endpoints to protect, your security posture improves and your maintenance burden is reduced. Jamstack can’t cater for every application but it’s worth considering when you’re working on frontend-first systems with relatively relaxed backend functionality.
Finally, don’t stress about doing things 100% “the Jamstack way” – the approach is open to interpretation. The concept’s really about putting the frontend first through utilizing the power of JavaScript and APIs. It doesn’t mean you can’t run your own infrastructure or write your own backend.
Focus on decoupling the components in your stack, accelerating client load times, and fetching data asynchronously via APIs at the time the browser needs it. These techniques help create more resilient applications with a better user experience, fully exploiting the capabilities of the modern web.
