Learn more about what a single-page application is and how it differs from a multi-page application.
A single-page application (known as SPA) is a web app implementation that loads only a single page, and then updates the content of that single document dynamically using JavaScript.
Unlike a traditional website MPA (Multi-page application) where the page is constructed on the server side and sent to the browser, it doesn’t reload the whole page every time in order to get a new page. Instead, it fetches only pure data from the server and renders the content in the browser.
What is the difference between SPA and MPA?
The traditional (Multi-page application) whole page is generated on the server side and sent to the user. A typical scenario is when a user submits the form, then a new page gets loaded in the browser’s window. This result in at least some waiting time for the page to load because the request is being sent to the server to get prepared results.
In contrast, single-page application loads once and only sends a request to the server for specific data. Once data are fetched then the layout is updated. That makes the whole application more performant because the app operates on a small amount of data as well as on a smaller portion of the layout. For example, updating table content.
There is also 3rd version – hybrid mode. The page is loaded in the traditional way, but some actions are done without reloading the page. For example, adding products to the cart.
Let’s then summary all pros and cons:
| Feature | Single-Page Application | Multi-Page Application |
|---|---|---|
| Crawling | It might be difficult for some crawlers to crawl the app content created by JavaScript. The reason is that the initial page is usually “blank” and the whole content is being loaded using JavaScript. Quote Google:While Google Search runs JavaScript with an evergreen version of Chromium, there are a few things that you can optimize. However, based on our experience seems crawling single-page applications gets better now in comparison to previous years. |
In most cases the page should be crawled without issues because the whole page content is generated on the server side. So, the browser actually gets the full page. At least the whole HTML structure can be processed by crawlers. |
| Performance | The overall performance of the single-page application is in majority much better because the app doesn’t require reloading the whole page on every action. The whole UI is not being transmitted all the time while communicating with the server. Only data is transmitted back and forth. Note that performance depends on many conditions. Choosing a framework (Angular, React, VueJS, and the like) doesn’t magically resolve all challenges that single-page applications have. Other conditions impact performance as well. For example: architecture, services, etc. |
Traditional website performance depends on what’s being served. If it’s a simple website then highly likely there will not be much different and should perform fast. However, reloading the whole page all the time might impact the performance as the app needs to send a request and the server needs to prepare the content. That takes time. See How HTTP Works – Anatomy of an HTTP Transaction. |
| Mobile web app | Same code can be used to build web applications and native mobile applications. That also has the benefit of having consistent UI and features across different environments. See: Apps That Work Natively on the Web and Mobile. | Multi-page application can’t be “converted” to the standalone mobile app because rendering app is done on the server-side in the majority of cases. |
| Offline mode | Data can be stored in any local storage. An application sends only one request, and stores all data, then it can use this data and works even offline. Read also about Web app manifests. | There is no way to work fully offline with the multi-page application because the app reloads in most cases to render a new page on the server side. |
SEO and crawling challenges
There are three primary ways to make sure that the site content may be rendered, crawled, and indexed by the search engine with regard to single-page applications in particular:
- Separately pre-rendering the content that serves as a snapshot for the crawler to give a chance to crawl and index.
- Determine which crawler wants to crawl the page and serve either a single-page application or a static HTML.
- Server-side rendering – page is rendered by the web server as part of the server request/response cycle.
Is Gmail, YouTube, Facebook, Twitter a single-page application?
Gmail, YouTube, Facebook, Twitter – they’re all examples of single-page applications.