Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

What is the difference between static and dynamic webpages?

Imama Zahoor

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Overview

Webpages differ in the way they display content and facilitate user interaction. There are two main types of web pages:

  • Static
  • Dynamic

Static webpages remain unchanged for every user. On the other hand, dynamic webpages support user interaction and may display different content for every user.

Static webpages

A static web page consists of fixed content and structure. It does not change according to a user's action, such as clicking a button. Hence, the webpage will be the same for every user.

Content included in a static web page includes the following:

  • Images
  • Audio and video
  • Static forms

Static webpages are typically created using HTML, CSS, and JavaScript. They're stored on the web server. Any alteration to the page needs to be done manually by editing the HTML source code. The client first sends an HTTP request to the server. The server then replies with an HTTP response and the requested web page without any additional processing. The process is shown below:

A simple HTTP request and response cycle used in static web pages

Dynamic webpages

A dynamic webpage is less rigid in its structure and content. It supports user interaction, and the display may change accordingly.

Content included in a dynamic web page includes the following:

  • Database
  • Real-time data, such as weather forecast
  • Chat applications

Dynamic webpages depend on both client-side and server-side programming, such as using HTML and CSS alongside JavaScript or PHP. While the final display page is still an HTML document, the server may introduce additional processing in response to the sent HTTP request. It does this by forwarding the HTTP request to an application program, which executes and produces an HTML output. The process is shown below:

An HTTP request and response cycle used in dynamic web pages

Differences between static and dynamic web pages

Static and dynamic webpages each have their advantages and hence, can be used according to individual needs and goals. Some important differences are outlined in the table below:

Features

Static web pages

Dynamic web pages

Stability of content

The content remains unchanged.

The content may change.

Storage

The content is stored directly on the server. Due to this, page load time is also slow.

The content is stored in the database which increases page load time.

Updating content

Any change to the content or structure needs to be made manually through editing the HTML source code.

The content can be updated automatically across all pages.

User interaction

They do not support user interaction.

They support user interaction and show appropriate responses in real-time.

Cost and effort

They require less cost and effort to be created, but long-term maintenance cost is high.

They require more cost and effort to be created, but long-term maintenance cost is low.

Languages

Traditionally, HTML, CSS, and JavaScript are used.

Languages such as PHP, Perl, and AJAX are used.

RELATED TAGS

CONTRIBUTOR

Imama Zahoor
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring