An intro to the JAMstack
So, what is it?
These principles provide several benefits. By removing the need for communication between the client and server to display non-dynamic content, the client is able to be much more autonomous. Deployment of the client is less likely to be gated by updates to backend services, decreasing days to deployment for a significant portion of your codebase. The use of prebuilt markup means that more of your content is already available via the cdn that serves your client-side code, improving site performance.
Static Site Generators (SSG)
As I've mentioned above, one of the key elements of JAMstack applications is the use of prebuilt markup. Think of every server-side template you've ever used. Without a doubt, many of the pages generated from those templates did not really have to be rendered on each http request for a given page. The templates served as a convenient way to avoid manually writing tons of HTML. That's exactly what these SSGs do. You define a template within the framework of an SSG. Then, the SSG processes that source and outputs it in a static format of JS, CSS, HTML, and other assets. It provides the convenience without losing the performance benefits of static content.
Updating a codebase every time that the static content changes will lead to more deployments. Luckily, there is a large community working to make automated deployments much more straightforward. One of the big names that you will come across when searching for a solution is Netlify. Their service will update the available version of your content following commits to a git repository.
Once I understand the concepts and tools around a new framework or technology, my next question is usually around how much is required to get it up and running. For JAMstack applications the answer can be very straightforward, but in true client-side fashion, there are a ton of options. Here are a few that I recommend:
- Netlify Templates These templates allow you to deploy an app for a variety of SSG libraries on Netlify with one click. You will be able to connect and view the code in either Github or Gitlab. There will also be a live version available for testing at a randomly generated url. -Codesandbox If you want to get up and running a bit faster, then you can use a Codesandbox template to view the code for a SSG like Gatsby with the option of deployment via a few different services. -Local development with Static Site Generators For a local development option, you could follow the instructions by Gatsby or Hugo to generate your first project.
We've gone over the basic principles of JAMstack applications and the tools to help you get started. I hope that you've found this introduction to be useful. These concepts and tools will certainly play a role in my workflow going forward.