Single Page Applications(SPA) Vs Multi Page Applications(MPA)

Most web developers, I think have struggled to grasp the differences between single-page applications (SPA) and multi-page applications (MPA), likewise with client-side rendering (CSR) and server-side rendering (SSR), the performance benefits of each, and their use cases. In current web development, both deliver benefits as well as drawbacks. To address these issues, developers are becoming more aware with advanced techniques such as static site generation (SSG) and react server components (RCS). Chill guys, in this lesson I’ll just try to discover CSR(SPA) VS SSR(MPA). Let’s dive into the core concepts.

Let’s start with simple logic. I guess all of you know what happens when we enter an URL (Uniform Resource Locator) in the browser. Actually, our local browser acts as a client, and when we hit an URL, it requests the web page from the server specified by that URL. Then, the server sends the requested web page to that client. In short, the server sends HTML, CSS, and JS of that requested page to the client browser.

Now let’s see what CSR and SSR do with the provided response from Server.

Single Page Application (SPA) / Client Side Rendering (CSR)

Initial Rendering

In Client-Side Rendering (CSR), the browser fetches all parts of the website – HTML, CSS, and JavaScript – but it takes longer to download large JavaScript files. Meanwhile, it quickly retrieves lightweight HTML and CSS. Initially, the browser constructs a basic layout using the HTML and CSS, represented by a Root DIV element covering the page. However, it delays painting the page until it finishes downloading and processing the javascripts, which adds interactivity. In Pic - 1, you can see HTML and CSS has been downloaded already but the javascripts files aren’t downloaded yet. In Pic - 2, you can see javascript file has been downloaded by the browser and the browser painted the whole web page and adds interactivity.

After Initial Rendering

But after the initial rendering of a Single Page Application (SPA), subsequent interactions with the webpage dynamically change its content without downloading all the resources again. Instead, it only updates components that have changed using state management techniques. For instance, when navigating between pages, only components with altered states, like A, B, and C, are re-rendered, while the global header and footer remain unchanged after the initial load.

Pros

• Performance Latency is much better than Server Side Rendering (SSR) after 1st rendering.
• More friendly to make scalable applications since the server overhead is much less than SSR.

Cons

• Initial/1st Rendering of the application is much slower than Server Side Rendering (SSR).
• SPA Applications are not Search Engine Optimization(SEO) friendly.

Multi Page Application (MPA) / Server Side Rendering (SSR)

Initial Rendering

In server-side rendering (SSR), the web browser fetches the HTML and CSS of the multi-page application (MPA). Then the web browser paints the web page while downloading javascript files asynchronously. But remember, at this stage, the browser just paints a static web page until the javascript files associated with that page are fully downloaded. And many of us miss another important thing: the static web page painted by the browser at this stage is already rendered one more time at the server-side runtime before the server sends the response to the browser. However, after finishing the download of the javascript files associated with that page, javascript added interactivity to that page. In Pic - 1, you can see that the browser has painted a static website without any interactivity. And after downloading JS, it makes the web page interactive depicted in Pic - 2.

After Initial Rendering

But when we request another web page of that application or change some states of the initially loaded page, the browser loads the full web page from the sever and repeats the process of initial rendering. And that’s how performance latency is worst than CSR after initial rendering.

Pros

• 1st / Initial Rendering is faster compared to CSR.
• SEO friendly.

Cons

• Re-rendering is slower than CSR and performance overhead is much higher while re-rendering.

I thinks enough for today. In my next article, I might come with the concepts of React Server Components, Static Site Generation and Performance Improvement technique of Next JS which makes it more familiar. And Don’t forget to drop your valuable thoughts regarding this topic. Pardon my mistakes . Till then happy coding!!😊 😊