Static vs Dynamic Sites
What Are Static Sites?
Static sites are commonly described as web pages with fixed content, or content that remains the same for all visitors of the web pages. While this is mostly true, some discrepancies can exist depending on some cases.
As stated before, static web sites usually consisted of pages with static content created using HTML and CSS. They were requested by the client and delivered as they were stored by the web server via HTTP to be displayed by a web browser. The conntent was exaclty the same for every viewer of the web page.
What Are Dynamic Sites?
Dynamic sites are usually defined as web pages built using server-side scripting languages such as PHP, Python, or Perl, which provide the web pages with the capability of displaying dynamic content, responding to the user interaction with the page.
What About JavaScript?
The main difference between static and dynamic web pages was that no dynamic content was present in static sites. However, with JavaScript came the possibility of adding dynamic capabilities to web pages.
That doesn’t mean that every web page using JavaScript is a dynamic web site.
Different Types of Dynamic Pages
Currently, a lot of content-focused web pages exist and they are built using HTML, CSS, and JavaScript files. JavaScript is commonly used to add dynamic behavior to the web pages enhancing the UI and user experience interacting with the web page. You can actually use static website hosting services to host HTML, CSS, and JavaScript files for your web page.
Therefore, two types of dynamic web pages can exist:
- Server-side scripting web pages.
- Client-side scripting web pages.
Server-side scripting web pages are, as mentioned earlier, sites built using a server-side scripting language and their behavior include displaying content responding to user interaction with the page, which is managed by an application server. The content can vary depending on the requests, which can involve URL parameters, the time that the data is requested, a state of the data in a server or a database, and other variables.
Client-side scripting web pages are pages built using a client-side scripting language, such as JavaScript. It enables dynamic behavior in response to user interaction, such as clicking interface elements –or interactions using a keyboard.
JavaScript can enable a static web page to request and display content form another web service. This is where the traditional definition of a static web page differs from the current behavior of many web pages being created now, because the content displayed for some users can vary from the content displayed for other users viewing the same static site, because it is using a script to request information from a third-party service.
NOTE: JavaScript can also be used for server-side scripting. Node.js is an example of JavaScript runtime environment that enables the use of JavaScript for server-side scripting.
The Case of Content-Focused Web Pages
In the early years of web development, static sites were commonly used for content-focused sites, such as blogs, documentation pages, or any information-oriented web site.
HTML and CSS were enough for these purposes. However, because dynamic features such as commenting, forums, or user interaction were not possible in purely static sites, tools for creating dynamic sites became popular. These tools include Content Management Systems (CMS) or Blog engines such as: Drupal, Joomla, and Wordpress.
Benefits of Static Sites over Dynamic Sites for Content-Focused Web Pages
With the possibility of adding dynamic functionalities to static web pages, the popularity of static sites has returned. Many benefits of using static sites over dynamic sites exist for content-focused web pages –security being one of the most important. These benefints include:
- Static site files are delivered to the end user exactly as they are on the server
- There is no server-side language
- There is no database
- Higher performance (because there is no server-side processing nor database involved)
- Static sites provide improved security over dynamic sites (Static sites have less exposure to Internet than dynamic sites)
- Unlike CMSs, there’s no danger of attacks by malicious requests to databases (Users can only request static files)
- Security relies on the web server (if the web server is hacked, fixing the site is as simple as uploading the site back onto the server once it is fixed)
- Dynamic features can exist in static sites via third-party services, such as Disqus for comments
NOTE: Static sites are not necessarily the answer for every case, and adding dynamic functionalities to a static site is not always the best solution. However, for content-focused pages such as the described above, static sites are a great option.
Static Site Generators
Static site generators generate static HTML/CSS/JavaScript files that you can deploy to a server to display a static web page. Most of them provide the ability of using a local development server to test and debug the site and to use the command-line to build and even deploy the generated files to a remote server.
Also, most of them offer pre-built templates to use as they are, or they can be personalized with a few modifications. They usually work with Markup languages such as Markdown or ReStructured Text for content creation, and other tools such as JSON, or YAML for configuration files.
Popular Static Site Generators
Some of the most popular static site generators available include: Jekyll, Hugo, Gatsby, MkDocs, and VuePress. You can find a more extensive list of tools in the Staticgen page.
References
Find more information about this topic: