What are SPA, SSR, PWA and what are the advantages or disadvantages?
Introduction
The aim of this article is to outline the terms SPA, SSR, PWA, their advantages, disadvantages and differences. First, we will look at the history of the web, discuss how the internet came to be and how it has evolved to understand why technology is moving in this direction. We'll take a bite of modern frameworks and use examples to introduce the aforementioned acronyms. This article is intended for anyone interested in modern web technologies, and is intended to introduce the topic and motivate the reader to continue further study of this exciting subject.
First websites
To get to the explanation of the terms in the title of this article, we must first get to the roots of the origins of the Internet itself (WorldWideWeb). It began when British scientist Sir Tim Berners-Lee solved the problem of how to share information in a structured form between scientists at CERN. In 1989, he came up with a proposal which he called "Information Management: A Proposal" This idea did not meet with much success, Tim's boss (Mike Sendall) called the proposal vague and the project was never an official CERN project.
In 1990 Tim wrote the basic three building blocks of the web, which still survive in some form today:
HTML- Hypertext Markup Language, the markup language of web pages.URI- Uniform Resource Identifier, now known asURL, the link you see in your browser's address barHTTP- Hypertext Transfer Protocol, the basic protocol for communicating with a server and transferring data In 1993, Tim gave this technology completely free to use and since then the popularity of the web has grown enormously. The first everHTMLpage has even survived and can be found here: TheProject.html
Dynamic websites
The first websites were called static - their content did not change as the author put it on the web, so they remained in that form. Which was great for sharing information, but very soon it started to lack any automation, independent of humans. For example, showing data from the system without having to manually update it on the web. So we get to dynamic sites - these are sites where content is more or less generated on the server using some rule and data. For example, if you want to display the results of a football match or your latest blog post on the site, you'll probably need to get the data and then dynamically render it into the site.
Dynamic content started to emerge back in 1993 with CGI (Common Gateway Interface), but by 1994, for example, PHP version 2 and Ruby had already emerged. This was followed in the next years by ASP (1996), Python 1.4 (1996) and also for example Java Servrlet (1997). So content began to be created on servers and sent to browsers where it was rendered. The html structure was very simple and the web carried primary informational value.
Javascript
Finally, we come to JavaScript, the programming language for the frontend (nowadays also the backend). Javascript was invented by a man named Brendan Eich in 1995. It was developed at Netscape for the company's then flagship browser, Netscape Navigator. The language was originally to be called LiveScript, but was renamed JavaScript so that it could be promoted alongside Java, a product of their partner Sun Micro Systems.
JavaScript has almost nothing to do with Java.
In 1997, the ECMAScript 1 standard was released, and this increased the popularity of developers using this language. Technology companies come up with their own implementation of JavaScript - JScript (Microsoft), ActionScript (Adobe). There is a flurry of development, with each of the browsers of the time (NetScape, InternetExplorer, Opera, Mozilla) interpreting Javascript a little differently. To the rescue comes jQuery in 2005, which is a library that creates an intermediate layer and unifies browser compatibilities.
We find ourselves in a state where the backend generates dynamic HTML and we enhance it with Javascript - Animate, Interact with the user.
JS frameworks
As the javascript language and needs grow, it becomes confusing to use it in its basic form. This creates a lot of libraries with predefined functions so we don't have to invent them, and more importantly, frameworks are created to build on top of Javascript itself.
I'm thinking of the famous trio of React, Angular, Vue.js, which twisted the world of frontend development and brought a new way of looking at web application development into play.
They create an abstract layer that allows us to program where to display what data or entire components, but no longer deal with the complex logic behind when and how to update them. They allow us to encapsulate pieces of code into components, classes and objects. It brings code organization, best-practices and much more...
SPA
Single page application is a term that refers to a web application that is loaded into a browser and only redraws the parts of the HTML that dynamically change. The server provides the javascript code to the browser, but the page is generated in the browser. For example - if you click on a link in the menu on this page you are currently on, the content will be redrawn, but the header and footer will remain unchanged, you won't even see a page reload, the dynamic redraw will take place instantly and without waiting for a server response - because there is no need for one.
So SPA has only one page, the web application javascript page. This has the following implications:
- SPA will be faster than "client-server" web crawling with a request for each page handled
- SPA itself suffers from bad SEO, due to the fact that HTML is rendered only by running JS and web crawlers usually can't do that (even google doesn't do well with indexing SPA)
SSR
In response to poor search engine optimization (SEO) comes a technology called Server Site Rendering (SSR). This solves the SEO problem by rendering the HTML on the server, sending the HTML to the browser, which runs javascript, which in turn hydrates and builds a virtual DOM page. It's defacto similar to SPA, except that we have full-fledged HTML generated on the server with all the text, html elements and so on... This enhancement is useful where we want to have a web application ready to be indexed by web search engines like Google bot.
Also note here that compared to pure SPA, where the page was generated by the browser, with SSR we put the burden of generating the page back on the server, as it has been since the beginning of web development.
PWA
Progressive Web Apps aim to be more than a web app. By being able to work in a web application (SPA) and hardly needing a server (or not needing one at all), the idea of being able to run the application outside of a web browser with the ability to go offline, just like a native application, is what PWAs are all about, getting more like native applications.
This type of applications allow to use so called Service Workers, which are used just to get closer to the native application, thanks to this we get for example the following possibilities:
- Work with the application offline
- Update the application in the background
- Sending notifications and push notifications
- The ability to access hardware features of the device (e.g. camera, geolocation)
- Loading and caching data
- Create a security layer
What does it look like in practice?
I'm sure you've seen this on some web applications, in the browser you can click on the icon next to the address bar which creates a new window from the web page that is slightly different from the search engine window and creates a desktop icon that you can use to launch the PWA. You can try it right away, this page enables PWA and just install the app, see image below (Chrome browser).
Other examples you may be familiar with are Figma, Facebook or Freelo.
Conclusion
If you've read this far in the article you should have a basic understanding of what SPA, SSR, PWA are and why these technologies have come into existence. Below the article I will add some resources that I think are worth studying if you are interested in this topic. If you come across any questions or inconsistencies while reading, feel free to email me :)