We’ve been in web development long enough to recognize that patterns and cycles repeat as technology changes over time. The technology powering websites evolves within a discernible, cyclical pattern similar to that of, let’s say, modern fashion. Two decades ago, high-waisted jeans were the trend and this style has now made a strong, cyclical comeback. The same goes for web technologies. Two types that experience this kind of change are static and dynamic site generation.
The Static Age
In the early-1990s, when they first gained popularity, websites were constructed from a collection of static files. These sites were delivered from a webserver to the web browser where the request for the website was being made. Websites were simple, with most of the files in plain HTML, along with a few images. Like a printed brochure, these websites didn’t change unless someone updated the static files. As websites became more robust, opening and editing thousands of files to make small changes became impractical.
Developers began to solve this problem by introducing technologies to make websites more dynamic. This means content was generated at the moment the end user requested it. Untethered from static files, databases became the primary source of variable content, sometimes with the entire website being served from a single static file.
The Present Day is Dynamic
Fast forward to the present day, where most websites are served out of a content management system (CMS) powered by a database backend. Variable content is entered into the website by non-developers using a browser-based interface. Usually, after this process is completed, a trace of code is not to be found.
It is expected that a website will customize each visit to create an “experience” for the end-user. Customizing to create this “experience” involves anything from adjusting the language of the site to expanding site accessibility to completely personalizing the user experience—think Facebook. Almost every website we encounter is dynamically generated to some degree. Yet, all of this dynamism has come at a cost: speed.
The Dilemma of Static and Dynamic Site Generation
Consider the amount of work that goes into generating a WordPress page before the page is handed over to the web browser. The initial user request is answered by the webserver before being handed off to the PHP hosting provider servers. The PHP (Hypertext Preprocessor) connects to the backend database and queries out the variable content, generating the site source code along the way. The PHP then selects and or generates the correct supporting imagery before merging all of this into a template-based theme. The final step is handing this data all over to the end users’ web browser and closing out the PHP connection. All of this needs to be done while the browser patiently awaits a response from the webserver, which may slow down the end users’ experience.
Speed is a premium commodity in the 5G world we live in. With it comes the challenge of moving from a dynamic web with the speed of a static web. One answer to this has been moving back toward static site generation. The majority of website work being done to assemble a dynamic site can be done before visitors arrive at the server. A static site generator (SSG) takes advantage of this reality to pre-generate static files that present HTML to the end users’ web browser. The initial user request is answered by the webserver where a file is opened and served back to the web browser before the webserver closes the connection. It’s simple, clean and fast. It’s also a return to the decades-old model in the ping-pong between static and dynamic technologies.
Cycling Back to Static Site Generation
From SSG to headless CMSs to a combination of both, the web is swinging back toward a static delivery model. To achieve the normative requirements associated with a dynamic website, client-side scripting has become increasingly popular. Another way to create a static website with dynamic elements is by utilizing frameworks such as React and Vue. These pull the variable content through APIs using JavaScript after the initial connection to the web browser has been fulfilled. This model provides a personalized experience without the overhead associated with a full-page reload or dynamic generation on the server-side.
For many web developers, the swing back toward static website generation can feel like a regression. We suggest comforting yourself by remembering: we’ll be swinging back toward fully dynamic sites soon enough.