In a world where user experience reigns supreme, a lone stack stands out providing fast, secure and usable sites: the Jamstack. Jamstack sites, or static sites, are great for blogs and marketing focused sites, but what about when content needs to be dynamic? Can the Jamstack handle these scenarios?
TL;DR
Yes. Yes, it can.
Before we go into how a static site can be dynamic, let's review what the Jamstack is.
What is Jamstack?
If you're new to the Jamstack, it's not like most of the stacks you might be familiar with, like LAMP (Linux, Apache, MySQL, PHP/Perl/Python) or MEAN (MongoDB, Express.js, Angular, Node.js). It's not focused on a set of technologies, but rather a modern architectural pattern for "building websites and apps that delivers better performance, higher security, lower cost of scaling, and better developer experience."
Jamstack stands for Javascript, APIs, and Markup. The power of the Jamstack comes with its core concept that sites are composed of static, pre-rendered HTML pages which can be enhanced using Javascript and APIs.
This core concept is where Jamstack websites get their speed, they're pre-rendered. We don't have to wait for the web server to fetch data, most likely from another server, render the page and return it to the client. The pre-rendered page is returned as-is to the client.
But wait... if the pages are pre-rendered, do we need a web server? No, a web server is no longer needed. We can use a content delivery network (CDN) to deliver our static pages.
This is how the Jamstack reduces the cost of scaling a site. One less server to manage, pay for and replicate as traffic increases.
Pre-rendering a Jamstack site
Because we're deploying static HTML files, we could generate these files by hand. I would strongly discourage this method primarily because updates take more time and are error-prone due to duplication of markdown.
Take the example where a new page is added to the navigation menu. All pages containing the navigation bar will need to be found and updated.
Most of the time you'll want to use a static site generator (SSG), like Gatsby, Nuxt, or Jekyll, to pre-render the HTML pages. With an SSG we can create templates and components one time and then reference them on the pages that need them.
Taking the same example used above, when a new item is added to the navigation bar, we only have to update it in the navigation bar component and all pages referencing this component will get the update once they're rebuilt.
Dynamic static site
If the idea of a static site being dynamic sends your brain spinning 🤯, no worries, mine did the same when I first tried to understand how this could be possible. Static sites are great for blogs and microsites where content doesn't change too often, but what about when we need the content updated at a more rapid pace, or based on interactions with the user?
Once I dove a little deeper into the concept of a dynamic static site, it made a little more sense. There are 2 ways a static site can be dynamic: during site pre-rendering and through user interactions with the site.
During site pre-rendering, a static site generator can hit APIs to gather the necessary data from an external source and use templates to dynamically create the pages.
Consider the example where you have a list of employees and there information stored in a content management system (CMS), such as Kentico Kontent, a static site generator can pull the list of employees from the CMS and build out an index page with a list of employees and individual pages for each employees details.
The other scenario is when you need to dynamically update content based on some constantly changing piece of data, like the current temperature, the number of stars on your GitHub repo, or the cart on your favorite e-commerce site.
This is accomplished by pre-rendering the page with default data. Once the page is loaded in the client, it can use Javascript to fetch the current data and update the page.
Want to know more?
If you're interested in learning more, check out the videos from my LIVE sessions on Twitch, where we discuss the Jamstack and look at getting started using 2 different platforms, Gatsby + React and Gridsome + Vue.js. I also code LIVE on Twitch, DevelopersGarage, every week where we explore and learn about the Jamstack, as well as, other various development technologies and platforms.
Top comments (0)