Static vs Dynamic Websites: What’s the Difference?

June Castillote

June Castillote

Read more posts by this author.

You may have heard about the Static vs Dynamic website comparison before. For a regular internet user who is meant to consume content, this comparison may not mean much as long as the site can do what they need.

But 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 the site is managed and updated. As well as the possible operational and maintenance costs.

In this article, you’ll learn about the differences are between static vs dynamic websites. You’ll know what static and dynamic sites are made of, how they are rendered, how contents are managed, and what are some of their characteristics compared.

Static vs Dynamic Websites: What Are They Made Of?

Static Website
Static Website

As the name implies, a static website’s elements are fixed or hard-coded. It doesn’t matter which browser or client is used to view a static website; every page’s code does not change.

A static website is limited to HTML, CSS, and JS client-side code. This means that there is no additional processing that happens on the server once the page is accessed. Any code for dynamic contents such as buttons or input is handled by the browser.

Most static websites are informational in nature. Take personal blogs, for example, where the intent is to display information for readers. User interaction is typically limited to just browsing the site’s contents.

Dynamic Website
Dynamic Website

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 are usually associated with the term CRUD, which stands for Create, Read, Update, Delete. That may be familiar to you because those are operations typically performed against a database. And if you guessed that dynamic website use databases, then you guessed right!

Static vs Dynamic Websites: How Are They Delivered?

At this point, you already know essentially what static and dynamic websites are. But, how are they served and delivered to users? Are they generated and rendered the same way or not?

Literally Static

Remember that static websites contain hard-coded HTML documents with optional CSS and JS files. This means that whatever code you uploaded to the 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. And when the button is clicked, a word will be revealed.

Static Website Project in Visual Studio Code
Static Website Project in Visual Studio Code

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 will be triggered when the button is clicked.

// 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.

Static Web Example
Static Web Example

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; everything is handled on the browser.

Dynamically Generated

As opposed to a static website where you need to hard code how every element is shown, 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.

Dynamic Website Project in Visual Studio Code
Dynamic Website Project in Visual Studio Code

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.

Dynamic Website Example
Dynamic Website Example

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.

Example of a static website with different page themes
Example of a static website with different page 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.

A static website generated by Jekyll
A static website generated by Jekyll

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 are typically the ones that can be connected 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.

Side-by-Side Comparison

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. And not all can be covered in this article. Below are just some of the factors to consider.

FactorStatic WebsiteDynamic Website
CostStatic 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 ManagementTo 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.
ExtensibilityAdd-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.
SecuritySecuring 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.
ComplexityKnowing 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/RecoveryOnly 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 page from a static website is viewed, 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 HTML page is generated by the server 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

Subscribe to Adam the Automator

Get the latest posts delivered right to your inbox

Looks like you're offline!