What is a single page app?
A single page app only consists of a single HTML document and can dynamically reload content. This form of web architecture relieves the server because the app is executed by the client. In practice, this allows even more features.
A classic web application consists of several HTML documents that are linked to one another, in contrast to this, a single page app only uses a single HTML page as the basis for its functionality. This means that the communication load between client and server is reduced.
In practical use, it is therefore not necessary to navigate between several websites. For the client this means a shorter waiting time and a site that reacts better, faster and more fluently thanks to the single page app.
Instead of waiting for a page to be reloaded and having your own browser re-render content, web content is immediately displayed in the desired framework or connected to one another through transitions. But this also means relief for the server, since less data has to be exchanged. Famous examples of single page apps include G-Mail, Google Maps, Netflix, Facebook and Twitter.
More speed with a single page app
Precisely because the single page app retains its interface and dynamically reloads content into the page, users never have the feeling that something is hooked or that they have to wait a long time. This is why single page apps are also popular when websites complain about a high drop-off rate.
The workflow remains so fluid and seamless, which is convenient when browsing the film selection of a streaming service, but essential for the execution of web-based word processing. In comparison, a multi-page app has to reload the entire content every time the client changes pages.
This works for pages with a lot of static content that are linked by many sub-pages. Above all, the size of the web apps is decisive here, for example Amazon or eBay use the approach of a multi-page app.
Because with the single page app the most important resources for the user such as the HTML or CSS code are loaded and remain loaded the first time, only new data has to be dynamically reloaded. Using the example of the Facebook feed, this would be, for example, updating with new posts.
Because this content only needs to be reloaded bit by bit, the server load is reduced. This not only helps large websites such as Google or Facebook, SMEs and smaller online shops can also reduce the number of servers they need.
Advantages in development and further development
In development, too, the resources required for programming a single page app are comparatively small. There are a number of available JavaScript frameworks that can be used as the basis for a single page app. The best-known examples include React, Angular and Vue.
The same backend as in the single page app can also be used to develop a mobile app. This implementation is much simpler than would be the case with a multi-page app. The design of the SPA’s front end can also be adjusted comparatively easily.
On the client side, however, it is not only the shorter loading times that are positive, but also functions such as offline use. Data can be requested once in the single page app and then saved locally, which allows continued use even if the connection is lost. If the connection is re-established, the local and server-side data are simply compared and new content is loaded.
And because all of the code is on just one page, the debugging process is also made much easier. Debugging works very easily in Chrome, for example.
Limits of a single page app
However, all of this does not mean that single page apps do not have their weaknesses either. For example, crawlers find it more difficult to index them because they first see the empty framework without any content. However, solutions such as Isomorphic JavaScript can close this gap.
Even for form-based websites with simple input masks, switching to a single page app is usually no longer relevant. Validation methods such as frameworks rendering on the server lead to faster implementation. Of course, existing websites would have to be migrated first, which requires additional resources.
The advantages of a single page app are often not enough to justify this additional effort. Scalability also often poses problems for single page apps, since too many new features are at the expense of the initial loading time and clarity. This often leads to a complete redesign.
