KAHIBARO
Discord Login Register ☰
☰

1.6. Static vs Dynamic Websites

Table of Contents

Understanding Static and Dynamic Websites

In backend development you will constantly hear the terms “static” and “dynamic” when people talk about websites or pages. This chapter explains what they mean, how they differ, and why backend code is mostly about making websites dynamic.

What Is a Static Website?

A static website is a site where the server sends the same files to every visitor, every time. The content does not change based on who you are, what time it is, or what data is in a database.

Usually a static website is made of plain HTML, CSS, and maybe some JavaScript files that are stored on disk and served as they are.

Imagine you have a file called about.html on your server. When someone visits https://example.com/about, the server simply reads that file and sends it to the browser without changing anything inside it.

Example of a very simple static HTML page:

html 
<!DOCTYPE html>
<html>
  <head>
    <title>My Static Page</title>
  </head>
  <body>
    <h1>Welcome to my site</h1>
    <p>This text is always the same for everyone.</p>
  </body>
</html>

If 1 person visits, they see the same heading and paragraph. If 1 million people visit, they all see the exact same content, unless you manually edit about.html and upload a new version.

You can think of a static website like a printed flyer or a PDF file. Once you print it, everyone gets the same page.

Common examples include simple company landing pages, personal portfolios, documentation sites, and blogs that do not need to show user specific or frequently changing content.

What Is a Dynamic Website?

A dynamic website is a site where the server can generate different content for different requests. The response can depend on things like:

In a dynamic site, the server often runs backend code to build the HTML (or JSON) just before sending it to the browser.

For example, think of a page that shows a list of products from a database. The HTML that the user receives is not stored as a fixed file on disk. Instead, your backend might do something like:

  1. Receive the request GET /products
  2. Read products from the database
  3. Build an HTML page that loops over those products
  4. Send the generated HTML to the client

Pseudo code for a dynamic response might look like this (in Python style):

python 
def products_page():
    products = db.get_all_products()
    html = "<h1>Products</h1><ul>"
    for product in products:
        html += f"<li>{product.name} - ${product.price}</li>"
    html += "</ul>"
    return html

If you add or remove products in the database, the output of products_page() changes. You do not edit an HTML file by hand, the backend code creates it dynamically.

You can think of a dynamic website like a restaurant menu on a screen that updates automatically when items are sold out or added, instead of a printed menu that never changes.

Key Differences between Static and Dynamic Websites

At a high level, static and dynamic websites differ in how content is delivered and where the “logic” lives.

Here is a comparison table that highlights the main differences:

AspectStatic WebsiteDynamic Website
Content generationPrebuilt files, unchanged per requestGenerated at request time by backend code
Backend logicUsually none or very minimalAlways involved, often complex
PersonalizationDifficult, mostly not per userEasy, content can depend on user, cookies, sessions, etc.
Data sourceFiles on diskDatabases, APIs, caches, business logic
ExamplesPortfolio, simple landing page, docsSocial networks, e commerce, dashboards, forums
PerformanceVery fast, easy to serve from CDNCan be slower, needs computation and database access
ScalabilityVery easy to scale, simple file hostingMore complex, needs servers, databases, possibly caching
Maintenance of contentManual edits, rebuildsChange data in database or admin UI, content updates directly

The main idea: static is “prebuilt content,” dynamic is “content built on the fly.”

The Role of Backend in Static vs Dynamic Sites

Backend development is mostly about dynamic behavior. However, static content still plays an important role.

For a static site, the backend responsibilities are minimal. A basic HTTP server or a content delivery network can serve files directly without custom backend code. You might not even need a dedicated backend application.

For a dynamic site, backend development is central. The backend has to:

Even in a dynamic application, many assets remain static, such as CSS files, JavaScript bundles, and images. These are often served as static files, even though the rest of the site is dynamic.

A realistic backend application will usually:

This mix of static and dynamic content is standard.

Examples of Static vs Dynamic Pages in the Same Site

Many real applications combine both static and dynamic pages.

Imagine an online store:

If you look at a URL like https://shop.example.com/about, it might be backed by a simple static file. But https://shop.example.com/cart is almost always dynamic, because it needs to know which user is making the request.

Even single page applications, where frontend JavaScript generates the UI, still usually talk to a dynamic backend to load data through APIs.

How Backend Code Makes a Page Dynamic

Backend code can make a page dynamic in several ways. Here are some common patterns that you will see later in the course.

First, URL parameters can define what to show. For example, GET /blog/123 might show the blog post with ID 123. The backend would:

  1. Read the ID 123 from the URL path
  2. Query the database: “Find post where id = 123”
  3. Render HTML or JSON with that post

Second, query parameters can control filtering or sorting in dynamic lists. For example, GET /products?category=books&sort=price_asc might:

  1. Read category = books and sort = price_asc
  2. Build a database query to fetch only books sorted by price
  3. Generate a dynamic list page or JSON response

Third, request bodies from forms or JSON can change state on the server. For example, when you send a POST request to /orders with a JSON body that lists products and quantities, the backend code can:

  1. Validate the input
  2. Save a new order record in the database
  3. Return a response containing the new order information

Every time these operations run, the output may change, because data and inputs change.

Dynamic Content and Databases

Dynamic websites are tightly connected to databases. When your backend returns different content based on data, it usually stores that data in a database.

For example, suppose you run a blog:

The dynamic flow might look like this:

  1. User visits /posts/42
  2. Backend reads 42
  3. Backend runs SQL: SELECT * FROM posts WHERE id = 42
  4. Backend puts the post data into a template
  5. Backend sends a completed HTML page as a response

If you add a new article to the database, you do not need to create a new HTML file. The same backend route /posts/{id} can display it automatically.

This is the core reason backend developers work heavily with databases. Data plus backend code equals dynamic content.

Personalization and Sessions

Another strong feature of dynamic websites is personalization. The backend can adapt the content to each user.

Typical examples include:

To do this, the backend often uses sessions or tokens to identify who the current user is. Once the backend knows which user is making the request, it can:

For instance, when a user visits /profile, the backend might:

  1. Check the session or token to identify the user as “user_id = 5”
  2. Query: SELECT * FROM users WHERE id = 5
  3. Use that data to generate the profile page

If user 6 visits /profile, the backend repeats the process but with id = 6, so the output is different. The URL is the same, but the response is dynamic per user.

Static sites cannot do this on the server side, because the server always returns the same file for everyone.

Static Generation and Modern Hybrids

Modern web development sometimes blurs the line between static and dynamic, but the concepts remain useful.

There are techniques like “static site generation,” where you use code and templates to build a set of static HTML files ahead of time. These are then served as static files. This approach can give you some benefits of both static and dynamic sites:

On the other side, there are dynamic backends that heavily cache their responses. Caching makes dynamic responses behave more like static files, because the same response might be served many times without running the backend logic again.

Even with these techniques, the mental model is still helpful:

As a backend developer you will often decide which content should be served statically and which should be generated dynamically to balance performance, complexity, and flexibility.

When to Choose Static vs Dynamic

From a backend point of view, the choice between static and dynamic content is about requirements.

Static content fits better when:

Dynamic content fits better when:

In real projects, you almost always have a mix. A typical backend developer builds the dynamic part, while also configuring how static assets are served efficiently.

Why This Matters for Backend Developers

Understanding static vs dynamic websites is important because it shapes:

Backend development is mostly about making websites dynamic. You will learn how to:

However, even advanced systems still rely on serving static files like images, CSS, and JavaScript. Knowing the difference helps you decide which parts of your application can be simple static content and which need full backend logic.

Views: 11

Comments

Please login to add a comment.

Don't have an account? Register now!

© 2025 Kahibaro
Visitors: 3057 / 24h
Impressum / Imprint
Datenschutz / Data Policy