As a web developer, whether you are focusing frontend or backend, these are the basic and core concepts you should have. So, tomorrow, you will be able to suggest/decide what kind of web application/portal will be the best option for a particular requirement.
In this article, we will try to understand in simpler format with technical details use cases.
Concept of Web page – Web page is nothing but the HTML file, it holds the reference of static/dynamic resources like JavaScript, Image, CSS etc. If you run any web page in browser or enter any webpage URL in address bar – in network panel, you will see the first network call as Document which is nothing but the webpage itself. Then all other resources (CSS, JS, Images/media) are loading.
Multi Page Application (MPA): This is the traditional old styled application. Where you will find multiple web pages are created. For every single anchor link click a different HTML page (Document) will be loaded in network panel. Here, the complete browser tab will be reloaded on every link change.
Now, Multi Page Application can be developed in two ways –
1) Static Webpage based MPA – The above video example is one such example. Where no Server-side rendering/Data logic is implemented. The Web Server serves the HTML webpages, and your Browser just renders it for you. Every URL is having a dedicated HTML Webpage for it. To host this kind of website you need very cheaper cost web servers like – Apache/Nginx/Lite HTTPD, where don’t need any server side language support.
2) Dynamic Webpage based MPA – The only difference from Static MPA is – Using Server-side Language you can generate webpages based on URL, params, Users and many other factors. PHP, Java, JSP, NodeJS Templating, Python, PERL – most of the Server-side languages support this type of pages.
Client-Side Rendering (CSR): The JavaScript in client side serves the Page content, change design elements, without taking any server-side HTML document in this concept. Most of the modern JS Frameworks like ReactJs, VueJs, Angular are based on CSR.
Server-Side Rendering (SSR): SSR is a term basically used in JavaScript frameworks. And conceptually little different from MPA. MPA generates the HTML page from template and fill with Data/Layout, and CSS, JS all are as usual attached on header without any server-side touch. But when it is coming SSR, the Data is getting combined with HTML, as well as the required JavaScript (only the required part/chunk) or CSS (only the required part/chunk) getting attached to the Webpage. The SSR framework renders in Server and measures how much HTML, CSS, JS should be sent to the browser to render the page. To run SSR based websites you need powerful servers, else performance will be slow (page load time – server to browser, as execution on server takes time). Today, Webpack, Vite, NextJS, VueJs – almost everyone provides the SSR capability.
Static Site Generator (SSG): The concept of SSG is little different and the name itself explains the same. For MPA or SSR the page HTML gets generated on runtime. But in case of SSG, during build time, all type of possible webpages gets generated with or without Dynamic data. So, the server holds readymade Static HTML files and on user request serves the right file.
SSG is quite popular now a days, as it gives the best performance with SEO compatible webpages. NextJS, Gatsby, Nuxt, Hugo etc are some of the examples of SSG framework.
Single Page Application (SPA): In today’s web industries, this is the most common web application technology getting used. The SPA loads a single HTML document and routing (address bar URL change) happens in browser only, not via server. To identify Single Page Application, open network panel and refresh the Application URL, then try to browse the application – you will find only for the first time HTML document is getting loaded. For other navigations, no new HTML document coming from server, but the complete UI getting changed. Remember, to serve SPA, your HTTP server needs HTML5 route enabled, so it should tell the browser to check the UI route first, then if not handled checks on server.
In the above video example – the Same HTML document is serving Content to the browser and server-Side URL requests. For Home, Dashboard, About links the URL is getting changed, but the content is getting served by the JavaScript loaded in the browser. On the last Link click, the /other route is getting requested to the server, but surprisingly it is serving the same content, which is getting served by localhost. So, all the route request is getting served by index.html (root document).
Progressive Web App (PWA): Progressive web App is a Web Application which can behave like platform specific App, can be installed, offline first/supports offline capability (can work when internet is not present), updates are installed in progressive manner (partial, background), caches APIs responses, required static resources. You can find more details in MDN. Some of the examples of PWA – onedrive.live.com, facebook.com, instagram.com, X(twitter) etc.
How to identify if the WebApp is progressive or not? check on Address bar – right side corner, you will get install option/ App available.
Technologies enables PWA – SPA, Service Worker, Cache Storage, Application manifest file.
Trusted Web Activities (TWA): In simple term TWA is a PWA running in a custom Chrome browser instance, installable via Playstore. So, when it is coming to Playstore part, basic android application setup is required to publish on Playstore and the application should be tied with a single domain. TWA is not available on Apple AppStore.
The Common question is “how it is different from WebView?” The answer is – WebView is controlled browser outlet inside the native app. By default, most of the required features are not enabled on WebView, you must provide via coding on your native application language. But for TWA it is not like the same, only permission config will be enough. As WebView is not a Complete browser, so performance and features are limited.
Some of the TWA apps are – OYO Lite, Reliance Digital etc.
When to use What?
If you are building any website with many dynamic pages – like blog, ecommerce products, and you need SEO support – go with MPA with SSR.
If you want a website, where rarely you are changing something, like company portfolio website, countable articles, you can think of SSG. It will reduce your Web Server cost drastically compared to SSR.
If you are looking for Mobile Web/ Admin Portal / Single codebase for Web and Mobile – then go for SPA with PWA/TWA. Here you are not focusing on SEO, Web Server cost is exceptionally low, development and update will be faster. Remember, more than 90% internet users are browsing via mobile. So, SPA is a very crucial technology for Mobile WebApp development.
Leave a Reply