There are two fundamental types of websites: static websites and dynamic websites. The core difference between the two lies in the notion of whether the webpages are pre-rendered and hosted on the server, or whether the webpages are generated on the server in real-time upon user’s request. The former is considered as a static website, while the latter is considered as a dynamic website.
Static website
As mentioned, static websites are websites in which web pages are already pre-rendered, their content and structure are hardcoded and fixed, hence the term “static”. These websites will display the same content regardless of the type of user visiting the webpage and regardless of the browser the users are using. These types of websites are usually hard-coded using client-side HTML and CSS codes, wherein each page is created independently, and its content refers to no databases. Once a page is created and published, the content will remain unchanged regardless of the user’s actions. The only way you can edit or change the webpages, is by manually editing the HTML source code of each and every single page. These kinds of websites are usually used for informative purposes, and for content that are not regularly updated or changed.
These are example of static websites:
https://www.w3schools.com/,
https://www.learnpython.org/,
https://www.crunchyroll.com/
Advantages:
- Easier and cheaper to build and deploy
- Cheaper to host
- Faster load time
- Flexibility – every page can have different design or layout
- Easier for search engine to scrape and rank
Disadvantages:
- Tedious to update and maintain – usually needs web developer to update or maintain site efficiently
- Difficult to scale – need to manually build new page for new products
- Site not as engaging for users
- Content can get stagnant, and users will not have motivation to frequently visit the website
Dynamic website
In contrast, dynamic websites are websites in which webpages are generated in real-time, their content and structure are flexible and can be customized depending on the user’s request or preferences, hence the term “dynamic”. These types of websites are usually created using server-side programming languages, such as PHP, ASP, C#, Python to process requests, and they usually fetch their content by referencing a content management system (CMS) or other external databases. By using the server-side code and CMS database, each request can then generate different HTML webpages in real time, which are structured based on the user’s preferences. These kinds of websites are usually used to manage private accounts, where each user will receive personalized webpages that only contain their personal information, assets, or preferences. They are also used to present information that changes in real-time such as weather forecast, traffic conditions, stock prices, purchase cart, etc.
These are examples of dynamic websites:
https://www.facebook.com/,
https://www.accuweather.com/,
https://www.bankofamerica.com/
Advantages:
- Offers greater degree of website functionality and user interaction
- Connected to CMS and database – easily request customized content in organized and structured manner
- Much easier to update and maintain
- Motivate users to visit the site more often – due to better functionality, interaction, and ease of creating new pages
- Allow better users-developer collaboration
Disadvantages:
- More expensive to build and to host
- Fixed design template for webpages – most of the pages essentially use the same template into which data and content is poured into.
Static content vs. Dynamic content
In the beginning of the internet, websites were mostly static websites, meaning websites only contain content that are unchangeable, i.e. static content. With that, websites back then were limited to only have passive functions, such as, information dissemination and entertainment. Over time, people have seen greater potential of websites, and found ways to use it with more interactive functions, such as using it as a platform to interact with people online, for trade and commerce, for sharing real-time data, and even for social and business enterprises. This expansion in function was made possible by dynamically generating websites using programming languages, and using databases to fetch content in real-time and also based on user’s actions or preferences, i.e. dynamic content.
Nowadays, in order to meet customers’ needs and expectations, most websites (and web applications) are made to be multifunctional. Hence, this makes websites become hybrid of both static and dynamic websites, i.e. containing both static and dynamic content. By having both types of contents, websites will have more flexibility and versatility in its function and in its delivery.
In this section, we are going to show the general differences between a static content and dynamic content:
- Static content does not change, while dynamic content changes depending on the user’s preference or updates frequently. Users who visit/revisit your website will see exactly the same static content, but they may see different dynamic content depending on the user and/or time.
- Static content are uploaded directly into the webpage, while dynamic content are generated through processing codes written within the server. Static content will be downloaded and presented by the user in exactly the same format as it was uploaded by an admin, while dynamic content will be downloaded and presented in a different format based on the code set by the admin.
- Static content is used for public consumption, while dynamic content is usually reserved for private consumption. Since static content doesn’t change depending on the user or user’s preference, it usually contains information that can be used by anyone in public. On the other hand, dynamic content usually contains private information on a specific user which requires login information before access.
- Static content is easier to cache, while dynamic content can be tricky. Since static content is the same for all users, it has been a common practice to cache them on an edge server (CDN) for ease of access. Caching static content in edge servers can effectively speed up website access (described in more detail below). Although it is also possible to save dynamic content in edge servers, it is impractical to do so, since the content has to be updated very frequently, and/or caching private information pose security risk to users as well.
- Static content is more resource-efficient, unlike dynamic content. Static content only needs to be uploaded to and downloaded from the server, while dynamic content are created by running layers of application logic before it can be downloaded from the server. Additionally, techniques such as compression only need to be applied once to static content, unlike dynamic content.
- Examples of static content:
HTML pages
Style sheets (CSS)
Client-side Javascript
Image/Audio/Video files
Static Online forms
Downloadable content: softwares, apps, documents, spreadsheets, etc. - Examples of dynamic content:
User account information and database
Translated pages
Call-to-action buttons
Text/Voice/Video messaging applications
Interactive Online applications
Real-time data: stock prices, weather forecast, real-time health data, etc.