December 31, 2019 - Pawel Mansfeld

Difference between static & dynamic websites

Voiced by Amazon Polly

There are a lot of websites, when browsing we are not able to clearly determine whether it is a static website or dynamic website. Anyway, it makes no difference to the user.

If we are dealing with a small business website, in quarter of the cases it will be a static web page. With huge web sites, blogs and online stores, we can be 100% sure that the content is dynamically generated. Each of these technologies has its pros and cons.

So, what’s the difference? The content on the static page is saved in an html static file and the visible text is almost always combined with the rest of the code.

Static website example – Elisse

Content edition requires direct interference in such a file and requires knowledge how websites work and how to write HTML code. This is how static page editing looks:

For this reason, static websites are rarely edited by average people and are not suitable for publishing e.g. a frequently updated business or freelancer blog.

Advantages of static websites

  • faster and easier to produce
  • cheaper to maintain on the server (does not require MySQL server)
  • easy to carry
  • loads quickly

Disadvantages of static websites

  • difficult to edit
  • it usually contains less content and features
  • content quickly bored Internet users
  • redundant code (all subpages have repetitive e.g. menus and footer in separate files)
  • more often refers to other addresses

Dynamic websites are linked to a database (either a JSON file or other information aggregation files) that contains content on the page. Every time someone visits a page, this content is downloaded and the page is created on the fly. The change of published content takes place in the database itself and is usually made using CMS, i.e. a content management system. We deal with this solution on WordPress and other websites, where there are many subpages or an extensive product catalog.

Dynamic website example – Profiler

Editing the page content is simple and does not differ, e.g. from creating a document with photos in a text editor such as Microsoft Word.

Content creation and edition in WordPress

Thanks to this, it motivates us to constantly update and add new content, and this obviously has a positive effect on search engine position and user involvement. Of course, this technology also has its pros and cons.

Advantages of dynamic websites

  • easy to update and expand by the average user
  • it contains (or at least should contain) current and extensive information
  • attracts Internet users due to frequent updates

Disadvantages of dynamic websites

  • greater cost to maintain on the server (requires MySQL)
  • production and design is more expensive and takes longer
  • website is llittle bit slower

The last point can be compensated by using effective web application cache, e.g. in the file system or RAM (memcached technology). Modern CSM systems have such efficient cache systems, so this point can be successfully neglected, but if you want to be strictly accurate, dynamic pages will always run little bit slower (note: it is exactly about server response time TTFB, not loading time).

Statyczny CMS

There is one more solution – compromise. For one of my clients I have developed a static CMS, which is a compromise between these two cases. The page code is generated into php files when the subpage is updated. This solution combines the advantages of static and dynamic pages, excluding the disadvantages of both. We provide the ability to edit the page without the need for a MySQL database.

How did my CMS work? Here you are:

Step 1: We create a form in HTML5 where you can add content:

<form role="form" action="" method="POST">
<div class="form-group"><label>Treść sekcji lub kod:</label> 
<textarea name="ad1" rows="8"><?php echo file_get_contents("ad_top.php"); ?></textarea> 
<button class="btn btn-sm btn-default" name="submit1" type="submit">Aktualizuj</button></div>
</form>

We read the existing content from the file from the ad_top.php file.

Step 2: Update content files

if(isset($_POST["submit1"])){
if(isset($_POST["submit1"])){ $code = $_POST["ad1"]; 
$file = fopen('ad_top.php', 'w+'); 
ftruncate($file, 0); 
$content = stripslashes(stripslashes($code)); 
fwrite($file , $content); 
fclose($file );} 

Here it is a formality. We download the text, process the strings and put them into a file.

Step 3: Place the reference to the content on a specific page:

<?php echo file_get_contents("ad_top.php"); ?> 

Note that, there is a ready solution for such a CMS called Jekyll.

The best website architecture

The best architecture of a website is a case where elements that do not change frequently are static (from a technical point of view) and those that change frequently – dynamic.

For example, the main menu is static by nature – changes rarely take place there. It should therefore be encoded manually in the header of the page so as not to slow down the script and check “whether it has changed so sometimes” of course, it will be uncomfortable to modify it, but such a solution serves a much more valuable purpose – the page speed.

The same situation is with the footer and e.g. the main page header. Meanwhile, the menu in various types of CMS is dynamic by default – it can be changed from the system level and with the development of the site it can be quite inefficient.

Most creators “prefer to have peace” and give the user the option of editing the main menu (by drag and drop).

Static pages today

In times of glorification of speed and AMP technology (2018-2020), static pages are experiencing a small renaissance. If frequent changes do not occur on the website, it is worth choosing a static website solution that will harmoniously work with modern technologies (e.g. mobile devices) and the cost of hosting will go almost to zero.

The second advantage of static pages is the ability to easily convert them into full-fledged mobile applications using frameworks such as Cordova and tools like PhoneGap as well as PhoneGap Build cloud services.

Sources:

https://mansfeld.pl/webdesign/strona-statyczna-czy-dynamiczna/