In this tutorial, we will understand the difference between a single-page application (client-side rendered or CSR) and a multi-page application (server-side rendered or SSR).

Even though the capabilities of JavaScript have increased and it can now be used to create mobile apps and desktop apps, but its prominent usage is still more for the web applications.

Web applications have become more performant and they can be rendered as it is inside the mobile view and desktop app given the feeling of using native applications while still they can be coded as web applications.

All this has been possible because of the advancement in the rendering patterns of web applications.

While there are many, we are going to discuss two specifics ones, which are the most popular, Single page application (CSR) and Multi-page application (SSR).

Understanding both is extremely crucial as none of it is better than the other, it is all about the use case you are dealing with, and knowing both will help you to create a performance-efficient web application.

Multi page application (Server Side rendered or SSR)

The term Multi-page refers that every time you navigate on the web application, a new HTML page is generated on the server and is returned to the browser, where the browser parses the HTML and displays the content.

These are the traditional rendering patterns that have been followed since the inception of web applications.

When a request to the server is made, the server generates the HTML page with all the content pre-filled and it returns it to the browser, where the browser applies all the styles or CSS, loads the assets, and shows the page.

While introduction of Ajax has reduced the number of round-trips to the server as the data can be fetched asynchronously and the UI can be updated on the run-time. But it can be only used for minor operations.

Advantages of Multi-page application (SSR)

• Better SEO, As the HTML is generated on the server side, all the meta tags, title, description, and other things that affect SEO are generated beforehand making it easier for the search engine crawlers to crawl the page which results in a better ranking.
• Scalable, As the pages are generated on the server, you can create as many extended pages as possible without really making any code changes.
• More Secure, Better for security as the forms that handle user's data can be prevented from the Cross-site scripting attacks.
• Faster Initial load, As the HTML page is generated on the server with the data already populated, it is faster to load it.

Disadvantages of Multi-page application (SSR)

• Slow, as every time the user navigates, the request goes back to the server and it returns the new HTML (that also increases the response payload size) which has to be parsed, rendered, and shown in the browser.