I came to know about Jamstack through Netlify, back when I didn’t know anything about web development (except that HTML is easy and CSS is scary). I started discovering the architecture recently and I must say, I’m having a lot of fun! I wanted to document what I’ve been learning here with the hope that it might help someone who is on the same path as I am.
So, let’s get started!
What is Jamstack?
Jamstack is an architecture designed to make the web faster, more secure, and easier to scale. It builds on many of the tools and workflows which developers love, and which bring maximum productivity.
Simply put, it is a practice of making websites a certain way that is simpler than the traditional monolithic way. Imagine you are building a fullstack application. The typical approach to this problem would be to build the front-end and back-end as one application, connect it to a database, host the backend to run on a server and manage these servers. This approach sounds complicated.
Now, consider Jamstack.
It uses the principles of pre-rendering and decoupling to increase simplicity and help deliver faster more secure web applications. This means you don’t have to worry about maintaining servers, scaling and other back-end stuff since the CDN already took care of it.
At a high level, Jamstack consists of the following components:
JavaScript
JavaScript allows us to provide all of the dynamic and interactive parts of our application and make it more than just markup. It also allows us to organize our code, access necessary APIs and increase the functionality of our web app.
APIs
This layer powers up our application. Using APIs, we can fetch data from an outside source and hydrate our pre-built markup. This opens up endless possibilities for creating applications with the Jamstack architecture.
Markup
Markup can be the HTML you wrote or the JavaScript that compiles to HTML on the frontend. Markup is what the user ends up seeing on your web application.
For a web application to be considered a Jamstack app, the HTML needs to be served statically.
How Jamstack works
- We build pages using basic markup like HTML or something more functional like JavaScript.
- If we used JavaScript of a JS framework, we use a build tool like webpack to make these pages deployment ready i.e., convert the JS to HTML on the server.
- These deployment-ready HTML files can be served from a CDN (like Netlify or Vercel) which cache the data as needed and deliver these pages all over the world.
Comparison to traditional stacks
In traditional monolithic stacks like MEAN or MERN, the JavaScript framework used i.e., Angular and React are client-side rendered. This means when the site is served, the JavaScript loads and manipulates the Document Object Model(DOM) when the site is accessed by the user. This results in a slower load time.
In Jamstack, the CDN builds the delivered JavaScript files and delivers HTML files to the user which results in a comparatively faster load time. Even for a dynamic web application, all the non-dynamic parts are pre-rendered and the dynamic elements are then hydrated into the site on the client side.
Why Jamstack?
Security
On a Jamstack site, there aren’t many moving parts when it is delivered. Everything is rendered into HTML files which makes some common attacks like SQL injection impossible.
( Well, you CAN have a DB if you want to. You can have it in the API layer of Jamstack by using something like Hasura )
Scale
In the case of monolithic stacks, the application needs logic on the server to cache the most accessed content. For Jamstack sites, the CDN takes care of caching entirely.
With Jamstack sites, everything can be cached in a content delivery network. With simpler deployments, built-in redundancy and incredible load capacity.
Performance
Since the pages are served pre-rendered, there will be a noticeable increase in performance. With all the pages already available on a CDN close to the user’s location, load times will also be decreased.
Maintainability
You won’t have any maintenance tasks on the server side since it is taken care of by the CDN. The biggest maintenance issue you might face is to update your packages which can be very easily solved with a tool like Snyk since it makes PRs with the required changes. You just have to merge the PR and you are good to go. This gives the developer more time to concentrate on the application.
Portability
The entire site can be stored in a single git repository. You can import into a CDN of your choice and you are good to go. This makes switching CDNs easier.
Developer Experience
Jamstack sites can be built with just HTML, JavaScript, any of the many JS frameworks, or a simple static site generator like Hugo, Jekyll and many more. These are existing technologies many developers are familiar with and the Jamstack architecture is basically how most developers build websites. Hence, the development process will be efficient and effective.
Hosting options
All you need to host a Jamstack site is a Content Delivery Network (CDN). CDN eliminates the need for you to do the deployment tasks like maintaining and scaling servers, setting up CI/CD, configuring the CDN. It allows you to write code and not worry about the deployment process. Here are the two popular options you should consider:
Netlify
Netlify is one of the most famous content delivery networks out there and has a lot of interesting features. It allows you to host your website on their CDN and assign a Netlify subdomain for free. You can write Lambda functions to run during build time if necessary, configure Netlify Forms for collecting data, see the analytics of your website too! All in one place. They have a generous free tier called “Starter” which covers automated builds with each push to your site’s repository, live site previews, instant rollbacks, 1 concurrent build, 100 GB bandwidth and 300 build minutes per month.
Know more at Netlify.
Vercel
Vercel is also one of the most famous CDNs and it has similar features to Netlify in most cases. They also have a generous free tier called “Hobby” which gives you 100 GB bandwidth, serverless functions, 1 concurrent build, 6000 minutes of build time per month and free analytics.
Know more at Vercel.
Top comments (0)