July 17, 2018
The difference between a Wordpress website and a Static site is well described in one of David Walsh blog posts.
Try to imagine for a second that the only way for people to know what’s happening in the world is to go to the nearby news kiosk and ask to read the latest news. The attendant has no way to know what the latest news is, so he passes the request on to a back room full of telephone operators. When an operator becomes available, they will take the request and phone a long list of news agencies, ask for the latest news and then write the results as bullet points on a piece of paper. The operator will then pass his rough notes on to a scribbler who will write the final copy to a nice sheet of paper, arrange them in a certain layout and add a few bits and pieces such as the kiosk branding and contact information. Finally, the attendant takes the finished paper and serves it to the happy customer. The entire process will then be repeated for every person that arrives at the kiosk. That is essentially how dynamic websites work. When a visitor gets to a website (the kiosk) expecting the latest content (the news), a server-side script (the operators) will query one or multiple databases (news agencies) to get the content, pass the results to a templating engine (the scribble) who will format and arrange everything properly and generate an HTML file (the finished newspaper) for the user to consume.
The proposition of a static site is to shift the heavy load from the moment visitors request the content to the moment content actually changes. Going back to our kiosk metaphor, think of a scenario where it’s the news agencies who call the kiosk whenever something newsworthy happens. The kiosk operators and scribbles will then compile, format and style the stories and produce a finished newspaper right away, even though nobody ordered one yet. They will print out a huge number of copies (infinite, actually) and pile them up by the store front. When customers arrive, there’s no need to wait for an operator to become available, place the phone call, pass the results to the scribble and wait for the final product. The newspaper is already there, waiting in a pile, so the customer can be served instantly. And that is how static site generators work. They take the content, typically stored in flat files rather than databases, apply it against layouts or templates and generate a structure of purely static HTML files that are ready to be delivered to the users. With an ever-growing ecosystem surrounding static site development, many of the main issues surrounding building static sites are finding answers through new tools. Content management and administrative tasks can be challenging for end users who don’t have a technical background. Good news is there’s an impressive number of CMSs out there ready to complete your Static site. The difference between those CMSs and traditional CMSs, like Wordpress, being that you’ll use the former only for “content management” tasks, not templating and frontend content generation, making it easier for content manager and editors to contribute to the content of the website or the web application. Building websites using Static Site generators is often referred to the term JAMstack, stands for JavaScript, APIs, and Markup, and it describes a way of building static, database-free websites. This concept is deceptively simple– the word ‘static’ implies simplicity, or a lack of interactivity, but this could not be further from the truth. When we talk about static websites, we’re referring to the technology used to build, power, and serve them.
For bloggers who would typically use a pre-built theme for their site, there are now hundreds of options. It’s worth mentioning that some technical know-how is still required to get up-and-running with one of these static generators. They’re certainly a long-way off becoming thriving theme marketplaces in their own right, but in a way that’s a good thing: bloated themes stuffed with unnecessary plugins and page builder tools are not a problem here!
A common question that arises when a frontend tool, workflow or library becomes popular is, how long will it last? It’s tough to say how reliable these predictions are, but based on the track record of the web—static sites were around in the early days of the web and are still heavily used—static sites are likely a mainstay for the foreseeable future. A feature that we’ll likely see moving forward is interface improvement for non-technical users. Currently, static site generators are heavily geared towards developers; “for developers by developers”. Many of them utilize the command line and rely on markdown as input for content; without a user friendly GUI interface to manage content. Thankfully, we’ve already seen the Headless CMS movement emerge to address this with content creating and editing experiences that prioritize non-developers. Solutions like Contentful, Prismic and Forestry provide proprietary solutions while Netlify CMS, WebriQ CMS and Strapi are fully open soure. With these solutions, a content creator doesn’t need to be privy to the intricacies of the build and can focus on creating content. Another feature that will likely grow over the next few years is the integration of serverless functions in static site generators. You can easily enrich your JAMstack site with dynamic functionality by including third party services and APIs. By default, a static site—being static—doesn’t allow for this functionality. Relying on third party services to handle this functionality may add unnecessary load that will slow down the performance of your site and expose you to potential security exploits. A good alternative that has been slowly gaining momentum are serverless functions. Serverless architectures encourage business-logic driven development, without making premature optimizations. As an architecture that scales well and is still easy to maintain, serverless functions fit in with the paradigm of lightweight aesthetic of static sites. Though serverless functions are still in their infancy, you can start using serverless functions in your static sites today using Netlify Functions, which lets you deploy Lambda functions without an AWS account, and with function management handled directly within Netlify.
In this rapid changing web development environment, it is hard to keep up with all the changes, especially when you do not have an internal team that can support your web and digital marketing efforts. It is important to have access to a pool of competencies and people that can design and develop your website or web application and give it the right look and feel that potential customers will be attracted by it. You need access to people that can help you create the needed visibility for your website and can produce the necessary content to enable viewers and customers to easily find you on the Internet. You need a team of forward thinking developers and designers that can make an impact on how your viewers and customers experience your website or web application.
At WebriQ, we have been developing and deploying JAM Stack websites for over two years now. With a dedicated APP, we have been able to build, develop, update and manage hunderds of sites. In this model we are using a Static Site Generator to develop the site, a GIT based CMS system to update the content and a Github repository to store all HTML, CSS and Javascript files. GIT files are pushed to a CDN network. Whereas this model does fit well for most smaller projects, it has it’s shortfalls when it comes to larger projects or projects with a need for frequent content updates and updates made by a variety of users, content writers and third party contributions. Since the JAM Stack is more a concept then a real technology stack, we have been contemplating for a while how we could combine the best of the traditional LAMP Stack ideas and the serious advantages and benefits of the JAM Stack. It’s what I would call the GLUE of the JAM Stack.