Static vs. Dynamic Web Applications
There are almost 2 billion web applications on the internet, and all of them fall into one of two categories: static or dynamic. The difference between them is the way those applications deal with their content.
In this post I provide a brief overview of the difference between static and dynamic web applications, share some examples, and explain why GatsbyJS is the best React-based framework. I also talk about hosting GatsbyJS on Netlify and how that setup can provide significant value to your business.
What is a static web application?
With a static web application everything the user sees and interacts with is served in HTML, CSS and JS. The idea is that the interactivity does not need to deal with server-side operations.
In contrast, dynamic web applications require server-side operations to render content. There are many cases where this is useful, however in this post we will focus primarily on static web applications.
Benefits of avoiding server-side operations.
The primary benefit of avoiding server-side operations is performance. The nature of server-side operations requires many aspects of the application to call on the server to render content. The number of functions necessary to render content will undoubtedly slow the amount of time it takes for an application to load.
Page speed has a significant impact on SEO which can increase your organization’s impact on the web. Better SEO means greater potential volume in site visitors, which gives you more opportunity to convert users.
User experience is greatly improved when an application loads quickly. UX involves many different aspects, firstly that a user does not bounce before interacting with the content.
It is an inherent security risk to open server ports. The widely used DDoS attacks specifically target exposed ports. A successful DDoS attack can give access of a server to a hacker in a matter of minutes.
Bounce Rates
How Page Load Times Impact Bounce Rate
Source: Google/SOASTA Research, 2017
- 1-3 seconds, bounce rate probability increases 32%
- 1-5 seconds, bounce rate probability increases 90%
- 1-6 seconds, bounce rate probability increases 106%
- 1-10 seconds, bounce rate probability increases 123%
What situations call for static web applications?
Static web applications are perfect for building campaign pages, showcase websites, local business pages, brand sites, design system sites and many other digital destinations that don’t require a lot of consistent content updates.
A Few Examples Of Static Web Applications
- https://alphaalias.com/
- https://reactjs.org/
- https://airbnb.io/
- https://ca.braun.com/en-ca
- https://2017.stateofeuropeantech.com/
What is GatsbyJS?
GatsbyJS is a static site generator built with React, webpack and GraphQL. React handles the templating, webpack the configuration, and GraphQL handles the data. GatsbyJS will generate static HTML pages, compile CSS styles and javascript, and can optimize assets.
GatsbyJS is a very compelling framework offering developers simple integrations, plugins, architecture and security. It also adds the router and service worker allowing for the pages to interact in a pseudo-dynamic way.
You can learn more about GatsbyJS on their website here: .https://www.gatsbyjs.org
What is Netlify?
Netlify is a static web application hosting service, but this short definition is an understatement, Netlify can support web applications with more than just hosting the files. They offer a fast, reliable service including global CDN, integration with Github, Bitbucket and GitLab repositories for version control, live previous and continuous development, and one-click SSL.
I can’t stretch how important one-click SSL is. To start, the web application will not get indexed at all on Google if it doesn’t have SSL in place. Visitors using the Google Chrome browser will also find the url either has a warning, or it’s automatically blocked. Also, the web application can’t secure data transmissions, and an unsecure web application in 2019 is worse than an unpublished one because you get punished.
You can learn more about Netlify on their website here: https://www.netlify.com/
The importance of a built-in global CDN.
CDNs are important. Web applications delivered through a geographically distributed content delivery network experience faster page load times and faster transactions. From the security point of view, a CDN can be configured to help us deal with DDoS attacks, preventing degradation or interruption of the service. It’s important to note that hosting companies do not optimize their environments for content delivery, but for hosting. This means that if you want the content to load quickly, you must have a CDN.
The importance of having a built-in CDN is that almost no configuration is needed, lowering costs related to infrastructure, personnel and time. Netlify, for example, doesn’t require any configuration at all, meaning there is no cost associated with setting up their CDN.
The importance of integrating with repositories for version control.
The main reason to have version control is that you need a backup for all the files related to a project. When you have many people working and contributing to a project you need to be able to test and merge quality code and be able to revert in cases where issues come up. There is no need to run a build on a local machine and then upload that build to a server because Netlify will do that for you.
With Netlify it is also possible to deploy from branches for previous/live testing in a staging environment without affecting the application in the live environment.
How GatsbyJS and Netlify Can Bring Value To Your Business
Now that you have some understanding of GatsbyJS and Netlify it’s possible to see how this setup can bring value to your company through a simple technical solution. The costs for implementation, the human resource to operate and the limitations of some systems are all moot points when working with static web applications. The benefits are overwhelming in terms of performance and security, and the ease of controlling quality is one of the best in the industry.
The team at Alpha Alias will dive into these topics and more in later posts.
If you have more questions or if you would like to know if a static web application is right for your organization, contact Alpha Alias.
