On a traditional site, every click on a link makes the browser fetch a completely new page from the server. In an SPA the main page is loaded only once, and then JavaScript changes the content within that same page. Data comes in through an API and only the part that needs to be updated is refreshed.
Example#
Think of web-based email. When you click a message, the side list and the menu stay where they are and only the message text changes. The page does not flicker and it feels like working with a desktop program.
Advantages#
- A smoother and faster experience after the initial load
- Separate front end and back end, communicating through an API
- The ability to use one back end for both web and mobile
Disadvantages#
- The initial load can be heavy, because a large amount of JavaScript must be downloaded.
- If not implemented properly, search engines may not see the content and SEO can suffer.
- The browser's back button and page addresses need careful handling.
A common solution#
For sites where SEO matters, many teams use server-side rendering so that complete HTML is in the first response. Libraries such as React and Vue are commonly used to build SPAs.
A common mistake#
Not every site needs to be an SPA. A blog, a company site and simple stores usually work better and more simply with a traditional or lightly hybrid approach.