Hi folks. In this article, I will evaluate one of the trendy concepts of the web, which is Single Page Application (SPA). Single Page Applications are becoming increasingly popular amongst the developer community. The growing number of classic websites and web applications are passing to this new web concept. But is it really worth investing in this new concept? Or is it a big hype? Let's try to understand its technological concept, the difference with classic multi-page web applications, and in which situation it is logical to use it?

Single-page web applications have invaded the web development world in the last 10 years, with the spread of frontend Javascript libraries such as Angular, React, and Vue. In order to understand single-page web applications, it is necessary to know a little bit about classic multi-page websites/web applications. In classical website logic, the client requests the page it wants to reach from the server, and the server responds to the client with the requested page. This process is performed repeatedly for each page. For example, as you enter a site URL to browser, first the homepage is requested from the server, then if the user moves to another page, let's say the contact page, the client requests this page from the server again. This is how classic websites work. Single-page web applications, on the other hand, seem to have been born as a reaction to the model that works in this way, that is, the continuous back and forth operation. Because the page exchange process performed in this way does not seem to be a very efficient working model. If we have understood this simple working principle, let's look at the working model of single page web applications. In single-page applications, the client makes a request to the server only once when the application is first started, and then the user receives all the site content. This is the default behavior, by the way. Of course, there are performance-oriented page components or data transfer processes that contradict this default behavior. Let me tell you one of them before my programmer friends step in. For example, there is one data loading concept we call lazy loading that could be deemed as an example. But, in general, in single-page web applications, a javascript package is sent to the client's browser as a closed cargo box without being processed on the server. The rendering of this package to the HTML is performed in the client's browser. This is how we can summarize the most basic technical difference between a single-page web application and a multi-page web application/site.

Now that we understand the difference between the two application types, let's look for an answer to a more fundamental question. Why are there two different application designs in this way and what are their advantages and disadvantages against each other? In single-page web applications, the first opening time is slightly longer than in multi-page applications or sites, since the entire page/application is downloaded at once. However, once the application is downloaded, we now have a good user experience, since the application works without any lag. Single-page web applications generally only communicate with the server for data exchange after the first page load. If an efficient caching strategy is also set, the user very rarely encounters the problem of lagging the application. On the other hand, in multi-page applications, since there is a continuous client-server data exchange operation for each page, the user spends overall more time waiting while navigating between the pages, even though the first load time of the multi-page application is less. We can write this feature as a plus for single-page web applications under the heading of a smoother user experience. But let's get to the most troublesome issue which is Search Engine Optimization. In fact, Search Engine Optimization is a very serious issue that causes us to shelve the single-page web application concept completely. Unfortunately, single-page web applications are pretty bad when it comes to SEO. Rendering Javascript code is a very costly operation for Google and other search engines. Although Google claims that it renders these types of Javascript-based websites, it is quite evident that it couldn't perform this as it can render classical HTML sites. The portion of the web application that is rendered is minimal and even that much of part is being rendered in a long time because Google applies a different and more complex rendering process to Javascript. I did a months-long analysis study using React and Angular, two big players of Javascript frameworks. The result is a total disappointment. I also tried various methods to recover the SEO of the applications, but still did not get the desired result.

If the situation is so bad in terms of SEO, why was this single-page web application concept developed? The single-page web application concept is developed to provide users a mobile application or desktop application experience in browsers. The most common use cases of these applications are management dashboards and advanced utılity applications, where the user opens an account and manages certain operations. E-mail applications, cloud applications where you store data, SaaS applications like drawing programs, inventory applications, customer relationship management applications, scheduling, project management, task tracking, demand management, and many similar applications can be given as examples. You can perform the transactions behind an authentication with peace of mind with high-performance single-page web applications since there is already nothing in terms of SEO. Everything is behind credentials. So far we explain the working mechanism of single page application which is technically called as client-side rendering. The opposite is called "server-side rendering".

Let's talk about one more issue. We would not be wrong to say that client-side rendering Javascript frameworks are technologies that maximize software development satisfaction. This is why the Angular, React and Vue trio is very popular among programmers. Over time, a classical multi-page web design mechanism was seriously demanded from these frameworks by the software developers for especially SEO performance reasons. The gap at this point was filled in time by notable companies of web platforms such as Vercel. So, new frameworks were also popped up on these Javascript frameworks. For example, React has an ultra-luxurious Javascript framework which is Next.js. It is such a framework that covers all the shortcomings of React. The SEO issue has already been taken care of, apart from that, the issues that are problematic when developing React such as in-app routing, image optimization, data pre-rendering, code splitting, lazy loading, and dozens of headaches, big and small, have been eliminated. Angular, which Google backs up, is not inferior to React in this regard. Those who are curious can examine Angular Universal. The same is true for Vue. There is also a javascript framework called Nuxt.js, which is the sister of Next.js. In short, if you are going to develop a classic website with the help of such advanced technologies, yes, you can do it easily. How is their performance? Absolutely a nuke bomb. If you follow their conventions, you can reach lighthouse scores (ie Google performance scores) over 90 points immediately. Now, you are the owner of a fast and user-experienced application or a website. It is very easy to convert such applications into mobile applications as well. So, in a Turkish term, it is a bird massacre.

To sum up, the single-page web application paradigm works tremendously if it is shaped in the hands of a knowledgeable software team. After reading this article, you will no longer have to step on the wet board while purchasing a web application equipped with the latest technologies from your software company. Please do not underestimate it, friends, I've seen companies who step on the wet board. And the owners are the guys who know web technologies. One of my prospective clients has a public website that is indeed a state-of-the-art design. It was written in Angular, but there is literally no SEO in their advanced application. The site is barely seen in Google searches, let alone the others. We prepared a report to these friends on how they can streamline their site. If you have such a need, you can contact us and get support. There's no bad code that can't be recovered (let's say it's rare), but indeed if you have a lifesaver programmer. Take care until the next post.