Home Today Static vs. Dynamic vs. Jamstack: Where’s The Line?

Static vs. Dynamic vs. Jamstack: Where’s The Line?

WebHostPolice
-
45
Static vs. Dynamic vs. Jamstack: Where’s The Line?

You’ll often hear developers talking about “static” vs. “dynamic” sites, or you may have heard someone use the term Jamstack. What do these terms mean, and when does a “static” site become either a Jamstack or dynamic site? These questions sound simple, but they’re more nuanced than they appear. Let’s explore these terms to gain a deeper understanding of Jamstack.

Finding the line

What’s the difference between a chair and a stool? Most people will respond that a chair has four legs and back support, whereas a stool has three legs with no back support.

OK, that’s a great starting point, but what about these?

The more stool-like a chair becomes, the fewer people will unequivocally agree that it’s a chair. Eventually, we’ll reach a point where most people agree it’s a stool rather than a chair. It may sound like a silly exercise, but if we want to have a deep appreciation of what it means to be a chair, it’s a valuable one. We find out where the limits of a chair are for most people. We also build an understanding of the gray area beyond. Eventually, we get to the point where even the biggest die-hard chair fans concede and admit there’s a stool in front of them.

As interesting as chairs are, this is an article about website delivery technology. Let’s perform this same exercise for static, dynamic, and Jamstack websites.

At a high level

When you go to a website in your browser, there’s a lot going on behind the scenes:

  1. Your browser performs a DNS lookup to turn the domain name into an IP address.
  2. It requests an HTML file from that IP address.
  3. The webserver sends back the requested file.
  4. As the browser renders the web page, it may come across a reference for an asset, such as a CSS, JavaScript, or image file. The browser then performs a request for this asset.
  5. This cycle continues until the browser has all the files for the web page. It’s not unusual for a single webpage to make 50+ requests.

For every request, the response from the webserver is always a static file, even on a dynamic website. You could save these files to a USB drive, email them to a friend just like any other file on your computer.

When comparing static and dynamic, we’re talking about what the webserver is doing. On a static site, the files the browser requests already exist on the webserver. The webserver sends them back exactly as they are. On a dynamic site, the response gets generated by software. This software might connect to a database to retrieve data, build a layout from template files, and add today’s date to the footer. It does all of this for every request.

That’s the foundational difference between static and dynamic websites.

Where does Jamstack fit in?

Static websites are restrictive. They’re great for informational websites; however, you can’t have any dynamic content or behavior by definition. Jamstack blurs the line between static and dynamic. The idea is to take advantage of all the things that make static websites awesome while enabling dynamic functionality where necessary.

The ‘stack’ in Jamstack is a misnomer. The truth is, Jamstack is not a stack at all. It’s a philosophy that exhibits a striking resemblance to The 5 Pillars of the AWS Well-Architected Framework. The ambiguity in the term has led to extensive community discussion about what it means to be Jamstack.

What is Jamstack?

Jamstack is a superset of static. But to truly understand Jamstack, let’s start with the seeds that led to the coining of the term.

In 2002, the late Aaron Swartz published a blog post titled “Bake, Don’t Fry.” While Aaron didn’t coin “Bake, Don’t Fry,” it’s the first time I can find someone recognizing the benefits of static websites while breaking out perceived constraints of the word.

I care about not having to maintain cranky AOLserver, Postgres and Oracle installs. I care about being able to back things up with scp. I care about not having to do any installation or configuration to move my site to a new server. I care about being platform and server independent.

If we trawl through history, we can find similar frustrations that led to Jamstack seeds:

  • Ben and Mena Trott created MovableType because of a [d]issatisfaction with existing blog CMSes — performance, stability.
  • Tom Preston-Werner created Jekyll to move away from complexity:

    I already knew a lot about what I didn’t want. I was tired of complicated blogging engines like WordPress and Mephisto. I wanted to write great posts, not style a zillion template pages, moderate comments all day long, and constantly lag behind the latest software release.

  • Steve Francia created Hugo for performance:

    The past few years this blog has [been] powered by wordpress [sic] and drupal prior to that. Both are are fine pieces of software, but over time I became increasingly disappointed with how they are both optimized for writing content even though significantly most common usage is reading content. Due to the need to load the PHP interpreter on each request it could never be considered fast and consumed a lot of memory on my VPS.

The same themes surface as you look at the origins of many early Jamstack tools:

  • Reduce complexity
  • Improve performance
  • Reduce vendor lock-in
  • Better workflows for developers

In the past 20 years, JavaScript has evolved from a language for adding small interactions to a website to becoming a platform for building rich web applications in the browser. In parallel, we’ve seen a movement of splitting large applications into smaller microservices. These two developments gave rise to a new way of building websites where you could have a static front-end decoupled from a dynamic back-end.

In 2015, Mathias Biilmann wanted to talk about this modern way of building websites but was struggling with the constricting definition of static:

We were in this space of modern static websites. That’s a really bad description of what we’re doing, right? And we kept having that problem that, talking to people about static sites, they would think about something very static. They would think about a brochure or something with no moving parts. A little one-pager or something like that.

To break out of these constraints, he coined the term “Jamstack” to talk about this new approach, and it caught on like wildfire. What was old static technology from the 90s became new again and pushed to new limits. Many developers caught on to the benefits of the Jamstack approach, which helped Jamstack grow into the thriving ecosystem it is today.

Aaron Swartz put it nicely, 13 years before Jamstack was coined: keep a strict separation between input (which needs dynamic code to be processed) and output (which can usually be baked). In other words, decouple the front end from the back end. Prerender content whenever possible. Layer on dynamic functionality where necessary. That’s the crux of Jamstack.

The reason you might want to build a Jamstack site over a dynamic site come down to the six pillars of Jamstack:

Security

Jamstack sites have fewer moving parts and less surface area for malicious exploitation from outside sources.

Scale

Jamstack sites are static where possible. Static sites can live entirely in a CDN, making them much easier and cheaper to scale.

Performance

Serving a web page from a CDN rather than generating it from a centralized server on-demand improves the page load speed.

Maintainability

Static websites are simple. You need a webserver capable of serving files. With a dynamic site, you might need an entire team to keep a website online and fast.

Portability

Again, a static website is made up of files. As long as you find a webserver capable of serving website files, you can move your site anywhere.

Developer experience

Git workflows are a core part of software development today. With many legacy CMSs, it’s difficult to have Git development workflows. With a Jamstack site, everything is a file making it seamless to use Git.

Chris touches on some of these points in a deep-dive comparison between Jamstack and WordPress. He also compares the reasons for choosing a Jamstack architecture versus a server-side one in “Static or Not?”.

Let’s use these pillars to evaluate Jamstack use cases.

Where is the edge of static and Jamstack?

Now that we have the basics of static and Jamstack, let’s dive in and see what lies at the edge of each definition. We have four categories each edge case can fall under.

  • Static – This strictly adheres to the definition of static.
  • Basically static – While not precisely static, most people would call it a static site.
  • Jamstack – A static frontend decoupled from a dynamic backend.
  • Dynamic – Renders web pages on-demand.

Many of these use cases can be placed in multiple categories. In this exercise, we’re putting them in the most restrictive category they fit.

JavaScript interaction Static

Let’s start with an easy one. I have a static site that uses JavaScript to create a slideshow of images.

The HTML page, JavaScript, and images are all static files. All of the HTML manipulation required for the slideshow to function happens in the browser with no external influence.

Cookies Static

I have a static site that adds a banner to the top of the page using JavaScript if a cookie exists. A cookie is just a header. The rest of the files are static.

External assets Basically Static

On a web page, we can load images or JavaScript from an external source. This external source may generate these assets dynamically on request. Would that mean we have a dynamic site?

Most people, including myself, would consider this a static site because it basically is. But if we’re strict to the definition, it doesn’t fit the bill. Having any part of the page generated dynamically defiles the sacred harmony of static.

iFrames Basically Static

An inline frame allows you to embed an HTML page within another HTML page. iFrames are commonly used for embedding Google Maps, Facebook Like buttons, and YouTube videos on a webpage.

Again, most people would still consider this a static site. However, these embeds are almost always from a dynamically-generated source.

Forms Basically Static

A static site can undoubtedly have a form on it. The dilemma comes when you submit it. If you want to do something with the data, you almost certainly need a dynamic back-end. There are plenty of form submission services you can use as the action for your form.

I can see two ways to argue this:

  1. You’re submitting a form to an external website, and it happens to redirect back afterward. This separation means the definition of static remains intact.
  2. This external service is a core workflow on your website, the definition of static no longer works.

In reality, most people would still consider this a static site.

Ajax requests Jamstack

An Ajax request allows a developer to request data from an external source without reloading the page. We’re in the same boat as the above situations of relying on a third party. It’s possible the endpoint for the Ajax call is a static JSON file, but it’s more likely that it’s dynamically-generated.

The nature of how Ajax data is typically used on a website pushes it past a static website into Jamstack territory. It fits well with Jamstack as you can have a site where you prerender everything you can, then use Ajax to layer on any dynamic functionality or content on the site.

Embedded eCommerce Jamstack

There are services that allow you to add eCommerce, even to static websites. Behind the scenes, they’re essentially making Ajax requests to manage items in a shopping cart and collect payment details.

Single page application (SPA) Jamstack

The title alone puts it out of static site contention. A SPA uses Ajax calls to request data. The presentation layer lives entirely in the front end, making it Jamtastic.

Ajax call to a serverless function Jamstack

Whether the endpoint of an Ajax call is serverless with something like AWS Lambda, goes to your Kubernetes clustered Node.js back-end, or a simple PHP back-end, it doesn’t matter. The key for Jamstack is the front end is independent of the back end.

Reverse proxy in front of a webserver Static

Adding a reverse proxy in front of the webserver for a static site must make it dynamic, right? Well, not so fast. While a proxy is software that adds a dynamic element to the network, as long as the file on the server is precisely the file the browser receives, it’s still static.

A webserver, modem, and every piece of network infrastructure in between are running software. If adding a proxy makes a static site dynamic, then nothing is static.

CDN Static

A CDN is a globally-distributed reverse proxy, so it falls into the same category as a reverse proxy. CDNs often add their own headers. This still doesn’t impact the prestigious static status as the headers aren’t part of the file sitting on the server’s hard drive.

CDN in front of a dynamic site with a 200-year cache expiration time Dynamic

OK, 200 years is a long expiry time, I’ll give you that. There are two reasons this is neither a static nor Jamstack site:

  1. The first request isn’t cached, so it generates on demand.
  2. CDNs aren’t designed for persistent storage. If, after one week, you’ve only had five hits on your website, the CDN might purge your web page from the cache. It can always retrieve the web page from the origin server, which would dynamically render the response.

WordPress with a static output Static

Using a WordPress plugin like WP2Static lets you create and manage your website in WordPress and output a static website whenever something changes.

When you do this, the files the browser requests already exist on the webserver, making it a static website—a subtle but important distinction from having a CDN in front of a dynamic site.

Edge computing Dynamic

Many companies are now offering the ability to run dynamic code at the edge of a CDN. It’s a powerful concept because you can have dynamic functionality without adding latency to the user. You can even use edge computation to manipulate HTML before sending it to the client.

It comes down to how you’re using edge functions. You could use an edge function to add a header to particular requests. I would argue this is still a static site. Push much beyond this, where you’re manipulating the HTML, and you’ve crossed the dynamic boundary.

It’s hard to argue it’s a Jamstack site as it doesn’t adhere to some of the fundamental benefits: scale, maintainability, and portability. Now, you have a piece of your core infrastructure that’s changing HTML on every request, and it will only work on that particular hosting infrastructure. That’s getting pretty far away from the blissful simplicity of a static site.

One of the elegant things about Jamstack is the front end and back end are decoupled. The backend is made up of APIs that output data. They don’t know or care how the data is used. The front end is the presentation layer. It knows where to get dynamic data from and how to render it. When you break this separation of concerns, you’ve crossed into a dynamic world.

Dynamic Persistent Rendering (DPR) Dynamic

DPR is a strategy to reduce long build times on large static site generator (SSG) sites. The idea is the SSG builds a subset of the most popular pages. For the rest of the pages, the SSG builds them on-demand the first time they’re requested and saves them to persistent storage. After the initial request, the page behaves precisely like the rest of the built static pages.

Long build times limit large-scale use cases from choosing Jamstack. If all the SSG tooling were GoLang-based, we probably wouldn’t need DPR. However, that’s not the direction most Jamstack tooling has taken, and build performance can be excruciatingly long on big websites.

DPR is a means to an end and a necessity for Jamstack to grow. While it allows you to use Jamstack workflows on massive websites, ironically, I don’t think you can call a site using DPR a Jamstack site. Running software on-demand to generate a web page certainly sounds dynamicy. After the first request, a page served using DPR is a static page which makes DPR “more static” than putting a CDN in front of a dynamic site. However, it’s still a dynamic site as there isn’t a separation between frontend and backend, and it’s not portable, one of the pillars of a Jamstack site.

Incremental Static Regeneration (ISR) Dynamic

ISR is a similar but subtly different strategy to DPR to reduce long build times on large SSG sites. The difference is you can revalidate individual pages periodically to mimic a dynamic site without doing an entire site build.

Requests to a page without a cached version fall back to a stale version of that page or a generic loading page.

Again, it’s an exciting technology that expands what you can do with Jamstack workflows, but dynamically generating a page on-demand sounds like something a dynamic site would do.

Flat file CMS Dynamic

A flat file CMS uses text files for content rather than a database. While flat file CMSs remove a dynamic element from the stack, it’s still dynamically rendering the response.

The lines have been drawn

Exploring and debating these edge cases gives us a better understanding of the limits of all of these terms. The point of this exercise isn’t to be dogmatic about creating static or Jamstack websites. It’s to give us a common language to talk about the tradeoffs you make as you cross the boundary from one concept to another.

There’s absolutely nothing wrong with tradeoffs either. Not everything can be a purely static website. In many cases, the trade-offs make sense. For example, let’s say the front end needs to know the country of the visitor. There are two ways to do this:

  1. On page load, perform an Ajax call to query the country from an API. (Jamstack)
  2. Use an edge function to dynamically insert a country code into the HTML on response. (Dynamic)

If having the country code is a nice-to-have and the web page doesn’t need it immediately, then the first approach is a good option. The page can be static and the API call can fail gracefully if it doesn’t work. However, if the country code is required for the page, dynamically adding it using an edge function might make more sense. It’ll be faster as you don’t need to perform a second request/response cycle.

The key is understanding the problem you’re solving and thinking through the trade-offs you’re making with different approaches. You might end up with the majority of your site Jamstack and a portion dynamic. That’s totally fine and might be necessary for your use case. Typically, the closer you can get to static, the faster, more secure, and more scalable your site will be.

This is only the beginning of the discussion, and I’d love to hear your take. Where would you draw the lines? What do static and Jamstack mean to you? Are you sitting on a chair or stool right now?

45 COMMENTS

  1. Great goods from you, man. I have understand your stuff previous to and you are just extremely fantastic. I actually like what you’ve acquired here, certainly like what you’re saying and the way in which you say it. You make it enjoyable and you still take care of to keep it smart. I cant wait to read much more from you. This is actually a wonderful website.

  2. Hello very nice web site!! Guy .. Excellent .. Wonderful .. I will bookmark your website and take the feeds also厈I am glad to search out numerous helpful info here in the submit, we’d like work out more strategies on this regard, thank you for sharing. . . . . .

  3. Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You definitely know what youre talking about, why throw away your intelligence on just posting videos to your blog when you could be giving us something enlightening to read?

  4. hello there and thanks to your information ?I抳e certainly picked up anything new from proper here. I did however experience some technical points the usage of this website, as I skilled to reload the website a lot of times previous to I could get it to load properly. I were thinking about if your web hosting is OK? No longer that I am complaining, but sluggish loading circumstances instances will sometimes affect your placement in google and can damage your high quality score if advertising and ***********|advertising|advertising|advertising and *********** with Adwords. Anyway I抦 including this RSS to my e-mail and could glance out for much extra of your respective exciting content. Ensure that you update this again soon..

  7. I have really learned newer and more effective things by means of your blog. One other thing I want to say is the fact that newer laptop or computer operating systems often allow additional memory to use, but they as well demand more storage simply to run. If your computer is not able to handle a lot more memory plus the newest software requires that ram increase, it can be the time to shop for a new PC. Thanks

  8. It’s the best time to make a few plans for the long run and it is time to be happy. I’ve learn this publish and if I could I wish to suggest you few attention-grabbing things or advice. Maybe you can write subsequent articles relating to this article. I desire to read even more issues approximately it!

  9. It is my belief that mesothelioma is most dangerous cancer. It’s got unusual features. The more I look at it the greater I am sure it does not react like a real solid tissue cancer. In the event mesothelioma is a rogue viral infection, then there is the probability of developing a vaccine as well as offering vaccination to asbestos uncovered people who are at high risk of developing potential asbestos connected malignancies. Thanks for giving your ideas about this important health issue.

  10. I’m really enjoying the theme/design of your website. Do you ever run into any internet browser compatibility problems? A couple of my blog audience have complained about my site not working correctly in Explorer but looks great in Chrome. Do you have any advice to help fix this issue?

  11. After study a couple of of the weblog posts in your website now, and I actually like your approach of blogging. I bookmarked it to my bookmark website listing and will be checking back soon. Pls check out my site as properly and let me know what you think.

  12. Hi, Neat post. There’s a problem along with your site in internet explorer, could check this?IE still is the market chief and a big element of folks will omit your fantastic writing because of this problem.

  13. There are actually numerous particulars like that to take into consideration. That could be a great point to convey up. I provide the ideas above as basic inspiration but clearly there are questions just like the one you bring up where a very powerful factor will likely be working in honest good faith. I don?t know if greatest practices have emerged around issues like that, but I’m certain that your job is clearly identified as a good game. Both girls and boys really feel the influence of only a second抯 pleasure, for the rest of their lives.

  14. In the awesome design of things you actually receive an A for effort and hard work. Where exactly you actually misplaced everybody ended up being in all the details. As it is said, the devil is in the details… And that could not be more accurate right here. Having said that, permit me reveal to you precisely what did give good results. The text is quite persuasive and that is probably the reason why I am taking the effort to comment. I do not really make it a regular habit of doing that. Next, although I can certainly notice the jumps in logic you come up with, I am not sure of exactly how you seem to connect the details that make the actual final result. For right now I will, no doubt yield to your issue but trust in the future you actually connect your facts much better.

  15. I would like to thank you for the efforts you’ve put in writing this site. I am hoping the same high-grade web site post from you in the upcoming also. Actually your creative writing skills has inspired me to get my own website now. Actually the blogging is spreading its wings fast. Your write up is a good example of it.

  16. Thanks for your write-up. I would also love to say that the first thing you will need to complete is to see if you really need credit repair. To do that you must get your hands on a duplicate of your credit file. That should really not be difficult, since government necessitates that you are allowed to have one free of charge copy of your own credit report each year. You just have to request the right folks. You can either look at website for your Federal Trade Commission as well as contact one of the major credit agencies specifically.

  17. Pretty component to content. I just stumbled upon your website and in accession capital to say that I get in fact enjoyed account your weblog posts. Any way I will be subscribing for your feeds or even I fulfillment you get admission to consistently rapidly.

  18. certainly like your web-site but you need to take a look at the spelling on quite a few of your posts. Many of them are rife with spelling problems and I in finding it very troublesome to inform the reality nevertheless I抣l definitely come again again.

  19. Thanks for the points you have provided here. Something important I would like to talk about is that laptop or computer memory specifications generally rise along with other advancements in the technological innovation. For instance, when new generations of cpus are brought to the market, there is certainly usually a matching increase in the scale demands of both computer memory and hard drive space. This is because the software operated by these processor chips will inevitably boost in power to take advantage of the new technological know-how.

  20. I do agree with all the ideas you have presented in your post. They’re very convincing and will definitely work. Still, the posts are very short for newbies. Could you please extend them a bit from next time? Thanks for the post.

  21. Something else is that while searching for a good internet electronics shop, look for online stores that are consistently updated, maintaining up-to-date with the hottest products, the most effective deals, along with helpful information on services and products. This will ensure that you are handling a shop which stays atop the competition and provides you what you should need to make intelligent, well-informed electronics buying. Thanks for the crucial tips I’ve learned from your blog.

  25. Hey there! Someone in my Facebook group shared this website with us so I came to check it out. I’m definitely enjoying the information. I’m book-marking and will be tweeting this to my followers! Superb blog and brilliant style and design.

  27. A large percentage of of what you articulate happens to be astonishingly appropriate and it makes me ponder the reason why I hadn’t looked at this with this light before. This particular piece really did switch the light on for me as far as this specific issue goes. Nevertheless there is actually one position I am not necessarily too cozy with and while I make an effort to reconcile that with the main theme of the position, let me observe just what all the rest of your visitors have to say.Nicely done.

  28. Thanks a lot for the helpful article. It is also my opinion that mesothelioma has an particularly long latency period, which means that signs and symptoms of the disease would possibly not emerge until finally 30 to 50 years after the preliminary exposure to asbestos. Pleural mesothelioma, which can be the most common variety and has an effect on the area across the lungs, will cause shortness of breath, breasts pains, and also a persistent cough, which may result in coughing up blood.

  29. Neat blog! Is your theme custom made or did you download it from somewhere? A theme like yours with a few simple adjustements would really make my blog jump out. Please let me know where you got your design. Bless you

  30. Hey There. I discovered your weblog the use of msn. This is a very smartly written article. I will make sure to bookmark it and return to read more of your useful info. Thanks for the post. I will certainly return.

  31. A lot of thanks for all your work on this web site. My mum enjoys conducting internet research and it’s simple to grasp why. A number of us learn all concerning the dynamic tactic you give helpful items on your website and as well as welcome contribution from website visitors on this area of interest plus our princess is discovering a great deal. Take advantage of the rest of the year. You’re the one doing a powerful job.

  32. Good day I am so happy I found your weblog, I really found you by mistake, while I was searching on Digg for something else, Anyways I am here now and would just like to say kudos for a incredible post and a all round enjoyable blog (I also love the theme/design), I don抰 have time to read it all at the minute but I have book-marked it and also included your RSS feeds, so when I have time I will be back to read a lot more, Please do keep up the great job.

  33. I would also like to add that when you do not surely have an insurance policy or you do not participate in any group insurance, you could well make use of seeking the help of a health insurance broker. Self-employed or people who have medical conditions commonly seek the help of any health insurance brokerage. Thanks for your writing.

  34. Hello are using WordPress for your site platform? I’m new to the blog world but I’m trying to get started and create my own. Do you need any html coding knowledge to make your own blog? Any help would be really appreciated!

  36. Thanks for another informative site. Where else could I get that type of info written in such an ideal way? I have a project that I am just now working on, and I’ve been on the look out for such info.

  37. Yet another thing to mention is that an online business administration program is designed for students to be able to without problems proceed to bachelor degree education. The 90 credit certification meets the lower bachelor education requirements and once you earn your current associate of arts in BA online, you should have access to the most up-to-date technologies with this field. Several reasons why students are able to get their associate degree in business is because they’re interested in this area and want to obtain the general schooling necessary before jumping in a bachelor college diploma program. Many thanks for the tips you provide with your blog.

  38. Greetings! I know this is somewhat off topic but I was wondering if you knew where I could get a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having problems finding one? Thanks a lot!

  39. You really make it seem so easy along with your presentation but I to find this matter to be actually something that I feel I might by no means understand. It seems too complicated and very huge for me. I’m taking a look ahead for your subsequent put up, I抣l try to get the cling of it!

  40. In these days of austerity as well as relative stress and anxiety about having debt, lots of people balk up against the idea of making use of a credit card to make purchase of merchandise or perhaps pay for a holiday, preferring, instead to rely on a tried and also trusted way of making transaction – hard cash. However, if you’ve got the cash on hand to make the purchase in full, then, paradoxically, this is the best time for you to use the cards for several motives.

  41. The next time I learn a weblog, I hope that it doesnt disappoint me as a lot as this one. I imply, I know it was my option to learn, but I really thought youd have something attention-grabbing to say. All I hear is a bunch of whining about something that you might fix if you happen to werent too busy searching for attention.

  43. Hello there! I could have sworn I’ve been to this blog before but after browsing through some of the post I realized it’s new to me. Anyways, I’m definitely happy I found it and I’ll be book-marking and checking back frequently!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

© Newspaper WordPress Theme by TagDiv