Multipage Applications vs Single Page Applications
I always get this question of which is better, building an application with Nodejs (using express framework) to build a web app or if I should use NextJs ( a ReactJs framework , might be any frontend framework in your case). You may ask what difference does it make to the user, I mean its just another web application. Generally NextJs is a single page solution, while building with Nodejs ( Laravel , Django , rails depending on your choice of language ) is more of a multi page solution. But this does not explain better what these are, i mean what are multi page applications and what are single page applications, what are their use cases, when should one use it , i hope to explain these in this article.
Multi page applications
Traditional web applications required that developers make .htm or .html pages of each routes in there application, which are usually static and not fully dynamic , which is then hosted in some server somewhere. on visit of these pages, the sever responds with the desire page i.e. the page (including stylesheets and other associated files) is downloaded on the server and then served on the viewers screen, hence the term multi page applications.
This led to the web app been easily optimized in terms of search result, that is crawlers easily picking up the web content. examples of multi page applications are Amazon, the New York times etc.
But as time went on and with the advent of the mobile phone and various app stores and web contents becoming more dynamic (Leading to More data fetching), web apps needed to have that feel of mobile native application, like faster load time and swift navigation or routing. This led to the making of single page solutions or apps.
pros
- better SEO since what the user sees is what the web crawler also sees, instead of waiting of AJAX or JavaScript calls to hydrate the DOM.
cons
With a multi page application, the browser is making request to the servers, if the servers are slow, this will overall lead to bad user experience and poor performance.
more time for development due to the fact that there is no separation between the frontend and the backend, they are usually encapsulated.
Single Page applications
A single page application is one that changes the affected parts of the DOM due to user activities, instead of the traditional way of fetching the entire web file from the server. In a single page applications, tab refresh do not occur, instead instead, all necessary HTML, JavaScript, and CSS code is either retrieved by the browser with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions. examples of website that use this solutions are Netflix, Facebook, tesla etc. Web browser frameworks like Angular, React, vue, svelte use the single page application principles
pros
Single page applications provide that native application feeling, because of the less server request.
faster development time due to the frontend been separate from the backend most times, so there maybe frontend developers and backend developers (making APIs)
cons
due to the heavy usage of Javascript, single page applications need to be regularly optimized for low end devices, due to the heavy lift or rendering that is left to the hardware of the user.
Generally they have been proven bad for SEO, but this really is an issue an more, NextJs offers a very good solution to this. explained in detail here
Overall which is the best to use. This generally depends on what you are building, example a blog would need very good SEO for audience reachability so it would be better to use a multi page style for this , but as mentioned earlier you could also use NextJs or any SPA framework that does similar to NextJs.
Thanks for reading so far, interact here through comments and sharing of this post or via twitter.