The web has been around for a while now. I have been building websites for 20 years now and I started by building static websites. Later I worked on many dynamic websites and web applications. This post is a quick rundown on the major difference between dynamic and static websites. There are some details about the JAM (Javascript API and Markup) stack. It also has some explanation of the technologies and costs associated with each of the 3 options. Prerequisites This blog post is written for a reader who knows the following: Basic knowledge of HTML and CSS is expected Knowledge of any backend language would be great. General know-how of how a website and DNS works would be beneficial. Dynamic Website On a dynamic website, the web-server responds with a web page content generated dynamically on each request tailored for the user. From a content editor's point of view, adding and editing content is easy and does not require more technical knowledge like knowing HTML for instance. Website content can be added or changed in a matter of seconds without a need of another additional process. This is possible as the data is usually pulled in from a datastore like a relational database. Facebook is a typical example of a dynamic website where content displayed depends on who is logged in and the content shared by the logged-in user's friends. Technical aspects of dynamic website Dynamic websites from a technical standpoint require more than just HTML and CSS. There would be some backend language needed to fetch the content on the fly from a datastore. Some popular backend languages are PHP, Python, Ruby. Dynamic websites are generally powered by a Content Management System (CMS). Some open-source CMSes include , (Claims to power of the web) and if you want to get started with one. popular Drupal WordPress 36% Joomla Cost for running a dynamic website A dynamic website will cost more money upfront to be built. It will also entail a larger recurring running cost for the database, web space, web server and other things you choose to include for your dynamic website. Recurring costs for running a dynamic website can range from 5 to thousands of dollars a month depending on the traffic and resources used to run the website. For example, a small Dynamic website can be hosted on a digital ocean droplet for $5 a month. Static website For a static website, the web-server responds with the same fixed content for every request regardless of the user. From a content editor's point of view, adding and editing content is not easy and requires more technical knowledge like knowing HTML and CSS. Data is pulled in only from static flat HTML files. Adding or editing website content will take longer than Dynamic websites. It will involve a "deployment" process for each change for a pure static website. The first website is static. CERN Technical aspects of a static website Static websites from a technical point of view are just a collection of HTML and CSS files. It may have some client-side JavaScript. There would be no backend language or an external data store. For a purely static website a full-blown database dependent, CMS is also not in the scope. There are that can help manage the content still deployment and Git is something technical to learn. The main advantages of a static website would be speed, security, and scalability. Static Site Generators Cost for running a static website A static website would cost less to build than a dynamic website. Updating content on a purely static website would be a difficult task. As a static website would only require webspace, the monthly running cost would be low and potentially free depending on where it is hosted. For example, a small static website can be hosted on for ~$2.5 a month. Reclaim hosting JAM stack with a CMS On one hand, the static website seems to be simple but they are restrictive and require technical knowledge. On the other, a dynamic website needs more effort and resources upfront, it also has a higher technical complexity and running cost. So where is the balance? Enter JAM stack and Static Site Generators (SSG) with a Content Management System (CMS). Static site generators have been there for a while. Jekyll one of the popular static site generators was released in . A static site would use templates to sew up the static web pages with a build process. 2008 generator With a JAM stack website properly configured with a , adding or editing content would be easy and relatively fast. headless CMS (taken from ) is a JAM Stack website example, hosted on Amazon S3. Take shape JAMStack.org examples JAM stack ingredients JAM stack term was coined by Mathias Biilman, the co-founder and CEO of Netlify, the official website defines the term as “a modern web development architecture based on client-side JavaScript (J), reusable APIs (A) and prebuilt Markup (M).” The idea is to have static HTML with Javascript that talks to APIs where the markup is prebuilt. The main focus is not to provision any server and host the website on a CDN or similar providers like Netlify, GitHub pages and so on. This shows a brief history of JAM stack's growth and popularity. JAMstack timeline JAM stack with a static site generator, a headless CMS, custom functions and forms can help create a dynamically static website. Technical aspects of a JAM stack website JAM stack websites from a technical side are still a collection of HTML and CSS files. It will have some client-side JavaScript to talk with external APIs. There would be no backend language or external database for the website but it will communicate with other API to get and store data. The main advantages of a JAM stack website would be ease of editing, speed, security, scalability and better developer experience. Cost for running a JAM stack website A JAM stack website could cost less to build than a dynamic website. Updating content on a JAM configured properly with a headless CMS would be a simple task. As a static website would not generally require a dedicated database, the monthly running cost would be higher than a static website but lower than a dynamic one. With an array of new offerings and SAAS, a JAM stack website can be running potentially free too. For example, a JAM website can be hosted on with as a CMS for no monthly cost but with limits. You can also explore to put it all together and get a website working with just clicks. Netlify Forestry Stackbit Summary Let's summarize the key difference of Dynamic, Static and JAM Stack website below: Conclusion Selecting between a dynamic, pure static or a Static Site Generator (SSG) compiled JAM stack will depend on what you want to build, knowing their differences will certainly help. If you are building a small personal blog go with a JAM stack website, if you want to build a full on e-commerce website probably a dynamic website is your best bet. A pure Static web would be advisable for something that is “build and forget”, or needs changes like once a quarter.

Amazon

Facebook

Fetch

Winner of Noonies 2020 for the award CI/CD Writer of the Year.

2020 - CI/CD Writer of the Year

My Blog

Book a call

Read My Stories

Too Long; Didn't Read

Get free API security automated scan in minutes

Static vs Dynamic Website with JAM Stack Website in Between

Too Long; Didn't Read

Companies Mentioned

@geshanm

RELATED STORIES