When many people think of a website, the concept of static vs. dynamic websites never comes into play. After all, the website just appears, right? Technically yes, but there’s a lot going on behind the scenes.
For someone who plans to create or migrate a website, knowing these two types of websites is essential. The kind of site you choose will affect how developers manage and update the site and possible operational and maintenance costs.
In this article, you’ll learn about the differences are between static vs dynamic websites. You’ll get to see how developers make static and dynamic sites, how your browser renders them and many other useful comparisons.
What are Static and Dynamic Websites?
As the name implies, a static website’s elements are fixed or hard-coded. A static website’s contents never change regardless of the browser youse use.
A static website only serves HTML, CSS, and Javascript client-side code. It doesn’t have to process any kind of computations once a reader accesses the page. The browser handles any code for dynamic content such as buttons or input.
Most static websites are informational in nature. Take personal blogs, for example, where the intent is to display information for readers. On a personal blog, users typically just browse the site’s contents.
Conversely, a dynamic website goes beyond client-side code. Ultimately, a dynamic website is based on HTML and CSS, much like a static website. But, for a dynamic website to be functional, it requires server-side languages such as PHP, ASP.net, or JavaScript to generate HTML code dynamically.
Dynamic websites use the term CRUD, which stands for Create, Read, Update, Delete. CRUD represents operations performed against a database. And if you guessed that dynamic websites use databases, then you guessed right!
Website Rendering Differences
How do web servers deliver static and dynamic websites to readers’ browsers?
Static Websites Exactly Deliver the Code on the Web Server
Remember that static websites contain hard-coded HTML documents with optional CSS and JS files. Whatever code you upload to a web server is precisely the code that will be served to the users browsing your website.
For example, below is a sample static website project in Visual Studio Code that contains three files. This static website’s homepage only displays a header and a button.
When you click a button on this simple webpage, a word will be revealed.
Below is the code of the index.html file. This serves are the homepage of the static website.
<!-- index.html -->
<html>
<head>
<title>Static Site Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Static Web Test</h1>
<div>
<button>Click to see what happens</button>
</div>
<p style="display: none;">Surpise!!!</p>
<script src="button.js"></script>
</body>
</html>The next code below is for style.css. This CSS file defines the style of how the homepage elements appear in the browser.
/* style.css */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button {
background: lightgrey;
color: black;
border: 1px solid darkgray;
font: inherit
}Lastly, the code below is the code for button.js that contains the JavaScript code that the browser will trigger when a reader clicks the button.
// button.js
var btn = document.querySelector('button')
btn.addEventListener('click', function() {
document.querySelector('p').style.display = 'block'
})Suppose that the static website is now up, the demo below is what it would look like. Then, if you open the page source code, you should see that the page’s code is exactly the same as the source code of the index.html file.
Note: This static website example is tested using the HTTP Server / HTML Preview extension in Visual Studio Code.
As you can see from the demo above, even if the user interacted with the page by clicking on a button, the underlying code never changed. That is the behavior of a static website; the browser handles everything.
Dynamically Websites Read a Database First
As opposed to a static website, a dynamic website uses server-side processing to generate the code. This means that the underlying code behind the page may change at any time, depending on the design.
For example, below is a Node.js dynamic website project containing only one JavaScript file.
The code for dynamicsite.js is shown below. This code is a server-side script that displays the current computer time every time the page is loaded.
// dynamicsite.js
var web = require('http');
web.createServer(function (req, res) {
let xTime = new Date().toISOString().match(/(\d{2}:){2}\d{2}/)[0]
res.end(
'<h1 style="font-family:verdana">Dynamic Site Test</h1>' +
'<p style="font-family:verdana">The time now is: <b>' + xTime + '</b></p>'
);
}).listen(8080);The demo below shows how the dynamic website is displayed. The underlying HTML code changes each time the page is refreshed.
Note: This dynamic website example is tested using Node.js.
Now that’s a basic example of how a dynamic website behaves under the hood.
Static vs Dynamic Websites: How Are Contents Managed?
Now you know how static and dynamic websites are rendered and served. How about adding, updating, or deleting content? Suppose that you have a static personal blog website, how do you add new posts? If you have a dynamic e-commerce site, how do you add new products in your catalog?
The type of website you would define how you manage your website content. Below are the typical options for content management.
Hard-Coding Static Pages
Whenever a website or its contents needs updating, doing so almost always involves changes in code. The fundamental and probably the oldest method is hard coding. This method involves editing the site’s source code using any text editor.
This method may be the most tedious and time-consuming because every aspect of the website must be coded manually. But, this also gives static websites the flexibility over the design because every page can be different.
Some websites with simple design and function can take advantage of writing their content in Markdown. Then, convert those Markdown documents to HTML, thereby producing web pages that can then be uploaded to the webserver.
For example, the static website below has three pages; index.html, page1.html, and page2.html. Although these files are a part of one static website, they were written to have different designs or themes.
Static Website Generators
Instead of manually writing code, static website generators offer the ability to create an entire static website either from scratch or from boiler-plate templates. New posts or pages are typically written in Markdown, and HTML files are generated during the website build process.
The resulting files can then be uploaded to a webserver to bring the website to life. In some static website generators, it is also possible to write content in other formats like straight-up HTML and JSON.
Below is the list of some of the most popular static website generators that you can explore.
The sample website below was generated using Jekyll without having to type a single line of code.
Content Management System (CMS)
By now, you’ve heard about WordPress. How about Drupal, Joomla, and Netlify? Those are the names of the most popular content management systems or CMS.
A CMS is a tool used for creating content on a website without having to write a single line of code. Think of it as the GUI editor where you can create your content without understaning the underlying code.
Dynamic websites typically connect to a CMS. In fact, when you buy a web hosting package, it already includes website builders and CMS that can be deployed in a single-click (or few clicks) of the mouse. CMS is probably the reason dynamic websites are the popular choice.
Static websites can be configured to use CMS as well. For example, Netlify has integration support with static site generators such as Jekyll, Hugo, and NextJS. Although setting up the CMS integration with these platforms usually involves more work when compared with dynamic websites.
When To Use a Static Website vs. a Dynamic Website
If you’re wondering when the old-age question will be answered, “Which one is better?”, you can keep waiting. There probably won’t be a definitive winner. Whether a dynamic or static website is better is subjective to what your requirements are.
There is a lot to consider when choosing the type of website. Below are just some of the factors to consider.
| Factor | Static Website | Dynamic Website |
| Cost | Static sites are typically cheaper to host. They can even be hosted for free using GitHub Pages. | Because of the expected extra processing requirement, dynamic websites may need a more capable hosts. Higher host specs usually means higher cost. |
| Content Management | To update content, coding skills will be required to write HTML or Markdown (and other languages). There are established and emerging headless CMS options that support static websites. | Established and popular content management systems already exists such as WordPress, Drupal, and Joomla. Updating content may never need a developer’s involvement. Users would be able to manage content on their own. This could translate to development or maintenance cost savings in the long run. |
| Extensibility | Add-ins may not be available to static websites. But, third party services may be integrated into a static website. Some examples are Disqus and MailChimp. | There are tools and add-ins that can extend the functionality and optimization of dynamic websites. |
| Security | Securing a static website can be more complex due to JavaScript running on the browser and can be exploited. This is not to say that static websites cannot be secured. It’s just that developers need to be more creative for security. | Dynamic website security may be easier to achieve as there are already best practices, libraries and tools that are included in server-side languages. |
| Complexity | Knowing HTML, CSS and JavaScript are the basic coding skills for static website development. Other languages may be needed only if you use static site generators. | Typically requires more web development skills and knowledge of more programming languages. |
| Backup/Recovery | Only files are being backed up. If the website crashes, files can be restored to recover a static website. | There may be a need for more complex backup. In addition to backing up the website, there may be databases that need to be backed up as well. |
| Static vs Dynamic Website |
Conclusion
If you already own a website, you probably already know if you have a static or dynamic website. If not, then you should have learned in this article how to distinguish between these two types.
A static website does not mean that what you see on the page does not change at all. It only means that the content or underlying code is pre-built and never changes. Each time a reader views a page from a static website, the same code is served over and code.
A dynamic website does not mean that no homepage or HTML code is being served. Instead, the server generates the HTML page dynamically. Each request to the dynamic website may yield different content, and the HTML code behind the page typically changes.
If you’re just planning to build a new website, your choice will largely depend on its purpose. Like, e-commerce and recruitment websites may be better as dynamic. While a blog or portfolio website will find static websites to be sufficient.
Static websites are where it all started and will probably never go away. Especially now that static site generators are gaining more popularity. Dynamic websites will only get better as further development happens continuously.
Further Reading
Be sure to check out these other ATA posts if you’re interested in learning more about static and dynamic websites.
