Single Page Application VS Multi Page Applications

There are a lot of ways to render a webpage and they each have their own advantages and disadvantages. You might have heard of React, a popular framework for designing front-end web applications. But what you may not know, is why it is adopted by many developers.

Before React, Multi-Page applications (MPAs) were commonly built using traditional server-side technologies and frameworks like PHP, ASP.NET, Java Servlets, and Ruby on Rails. These technologies allowed developers to create web applications where each page request resulted in a full reload of the entire page from the server. A prime example of such a website is Amazon where you get a page refresh on every link you click.

MPAs consist of multiple unique HTML pages, where each interaction triggers a request to the server for a full page reload. While MPAs can offer a satisfactory user experience, they typically involve more page reloads and are more suitable for content-focused websites that don't require complex real-time interactions.

 

The Rise of SPAs

With the introduction of Single-Page Applications (SPAs), a shift occurred in web development towards more dynamic and interactive user experiences. SPAs are web applications that load a single HTML page and dynamically update that page as the user interacts with it, without the need for full page reloads.

Our Buddy React is a very good way to implement this. Before React, AJAX and GraphQL were very close to implementing SPAs.

 

Why SPA?

With SPA tech, we don’t have to reload the page every single time a change needs to happen. We initially take in the HTML and a huge chunk of JS data and store it on the client side. This way, the server isn’t disturbed on every request. This is helpful because HTML is static and doesn’t change. Any part of the HTML that we want to change, can be targeted instead of re-rendering the entire HTML body.

This approach saves a lot of server workload and generally has a quicker apparent response to the user. Numerous SPAs have a frontend that is independent of their backend. SPAs use HTML and JavaScsript components for their front ends, and a different framework acts as their functional back ends. Therefore, there isn’t much of a performance problem if one fails.

 

But...

It isn’t all sunshine and rainbows with SPA tech. With rendering all your content on the client side, It may lead to abnormal load times on the Initial connection where you might see that the website takes longer than usual to load.

You may also experience loading pages where some components are rendered before others, leading to an unusual UI experience.

You also miss out on SEO Optimization because the content is displayed on your client rather than on the server so Google or any search engine wont be able to process it.

 

SSR hydration

Addressing the issues above, Server-Side Rendering (SSR) adopts a mixed approach where your content is pre-rendered on the server for the initial connection and JavaScript then takes over after the initial page load.

This solves the issue that SPAs had where they took too long for the initial page load as now, the client is not involved in rendering the page but the server is. In the context of SPAs, SSR involves executing JavaScript code in NodeJS to generate the initial HTML on the server, which is then hydrated in the browser.

Hydration is the term that refers to making fully server side apps interactive for the client. An example would be that suppose you’re loading a page and initially you get a very fast response where your profile picture and some initial skeleton content is loaded. This content is then “hydrated” with additional JS handling. This provides a smooth experience for the user where they don’t need to take long for the server to load.

 

So SSR is the best option, right?

That depends on what type of website you want to deploy.

  • SPAs are generally good for static sites where there isn’t any dynamic data that needs to be displayed or updated from time to time.
  • MPAs could be useful if you want excellent SEO and you are dealing with real-time data and there is no care for server load times.
  • SSR is a more mixed approach but also wouldn’t be appropriate for a simpler website, like a portfolio where all your content isn’t changing.

     There are many more technologies and ways to render pages where hydration may be partial so that lazy loading is avoided. Lazy Loading happens when a part of the HTML is loaded but the client is still busy requesting the JS so functions like buttons and forms don’t work for a brief period of time.

Ultimately, there is no absolute best way of rendering your website and it all depends on what you want to sacrifice.

Comments

Post a Comment

Popular posts from this blog

Packet Switching

Image
We often don’t wonder how the data that we send to the internet is transferred from one location to the other without any errors. Suppose you’re transferring a 100MB file and during the process, you lose your connection. Now the file that you’re sending, would it have to be sent all over again? What happens if one byte of data gets corrupted during file transfer? All these scenarios are dealt with by a process called packet switching . As previously discussed,   Packets are bundles of divided data from a file that can be simultaneously sent through different routes on the internet . Different routes can transmit data at different rates, with the transmission rate of a link measured in bits/second. Packet switching is the fundamental way of transferring data on the internet. Most packet switches use store-and-forward transmission at the inputs to the links. Store-and-forward transmission means that the packet switch must receive the entire packet before it can begin to transmit...
Read more

How does the Internet work?

Image
In today's world, it's almost impossible to imagine life without the internet's constant presence. Whether it’s for work, education, or personal use, the internet has become the go-to tool for everyone everywhere. But have we ever stopped and wondered, how the internet actually works? When I send a msg to my friend asking him when he’s going to pay me back for the lunch we had yesterday, he instantly receives the message if we’re connected to the internet (although he may choose to ignore it). The internet is a vast web of networks that allows signals or data to travel. Let’s use an analogy; think of a railway network and the trains are the messages/data that we send and each destination is a user. In the same way, all of us are connected to each other through the internet and all of us can communicate with each other via the “train track”. AND there are multiple ways to reach a destination and figuring out which way is efficient is the fundamentals of Computer Networks...
Read more