When I started learning about how the web works, I learnt that there are 2 types of web servers, a static server where it only serves you the resource that you are asking for and a dynamic server which usually does some logic with your favourite programming language and then returns a result based on the context.
But why do we mention static servers if we can do everything with dynamic web servers?
Well, usually your website assets (fonts, icons, CSS files, etc ...) tend to be static files that don't change often so it's easier to deploy this type of content with an efficient HTTP server such as NGINX where you usually have a layer of cache, even a CDN if your website is global.
Recently I got into minimalism which is a way of living with only the things that you absolutely need. I tried to relate to minimalism in web development so I thought about trying to replace dynamic servers with something simpler: static servers.
It was quite interesting, technically you can make an e-commerce website, a todo app and of course a blogpost website statically!
The basic idea is to build all the results that our website could send to the clinet a head of time, when the client ask for the resource later, as the results are already built in advance they are sent immediately to the client.
Let's take as example: building a personal blog website. A classic way to build this website is by having a SQL database with an PHP server where you have 2 main views:
A way to have the same result but with only using a static server is to initialise a git in the website folder, have a project structure that looks like this:
blogs - 20181023.html - 20181106.html - 20181215.html js css - index.html - contact.html - about.html
Let's break this solution down:
First the admin page, when you write a new blog post, you can write it in HTML (or convert it to HTML if the blogger doesn't have a technical background). To publish the blog you push your changes to a git server such as Github or Gitlab and then use some amazing static serving platforms such as Netlify and Vercel where they handle the deployment automatically on each push to the git server, you can also have everything locally and upload the new version of the website manually if you want to.
The advantages of using this approach are:
There are some disadvantages thought:
I hope you can see how simple and yet power full this solution is!
Jamstack, an architecture that enables you to build complex problems with static servers.
I envite you to take a look at their website where they explain everything that you may need to develop, maintain and deploy you project with static servers.
The basic idea is to write your website using a programming language and perform a pre-rendering process where you generate all the pages during this process. Once this is done, your site is ready to be served as a bunch of static files that the browser can understand.
There are trendy site generators that have a huge community such as Hugo (Go language), Next.js (based on React.js), Gatsby (also based on React.js) ,Jekyll (Ruby language).
If we make our blog post with on of these site generators for example Next.js, it will look like this:
├─ components │ ├─ Post.jsx # Post component │ └─ Footer.jsx # Footer component │ └─ Header.jsx # Header component ├─ pages │ ├─ index.jsx # homepage | └─ posts # posts will be available on the route /posts/ | └─ [slug].jsx # dynamic page to build posts └─ blogs ├─ hello-world.md └─ 20181023.md
In this example, we will run the build process using the command:
If we want to update that button in the navbar (that we had to update in all the HTML pages), we only need to change it in the
That sounds too good to be true! why big tech companies like Amazon don't adopt such a way of serving content, to serve their products to the clients?
Professional websites like Amazon.com have massive databases with billions of entries (billions of products in case of Amazon), if you try to build a statics HTML file for each one of these entries you will need a lot of disk space to store all those HTML files in.