What is a Single Page Application?
A Single Page Application (SPA) is a web application delivered to the browser that doesn’t reload the page during use.
Some real-world examples include Gmail, Trello, and GitHub. If you use Gmail, you've noticed that you can move between mailboxes, open emails, or write emails without leaving the page at all. The content of the page is simply updated to reflect the current state of the application.
What are the advantages?
Single Page Applications offer a faster, more fluid user experience (UX) similar to a native desktop application. Since the page never reloads, this reduces the number of round trips to the server.
User experience is a key factor to consider when building a product that competes with other companies. Even if the application is for internal use, saving time for your users means better productivity.
In traditional web applications, the client initiates the communication with the server by requesting a page. The server then processes the request and sends the HTML of the page to the client. Each subsequent interactions results in a new request being sent to the server. The server processes these requests and responds with a new page. This can lead to a slow, clunky, and frustrating user experience.
The SPA model eliminates page reloads by leveraging asynchronous requests to the server for updating content.
Sounds great, so what are the disadvantages?
Search Engine Optimization (SEO)
When they access your pages, they're most likely going to get a bunch of empty div's. There are a couple solutions out there that allow your site to pre-render HTML for use by the crawler (BromBone, Prerender)
SPA breaks the browser's design for page history navigation using the Forward/Back buttons. This presents a usability impediment when a user presses the back button, expecting the previous screen state within the SPA, but instead the application's single page unloads and the previous page in the browser's history is presented.
To further address this issue, the HTML5 spec has introduced pushState and replaceState providing programmatic access to the actual URL and browser history.
What if I need more than a single page?
The single page is the starting point. It’s the first part of the app that gets the ball rolling. When a SPA starts, the first visible thing we notice is the initial server rendering of the shell. That shell is our single page. You can think of other pages as views. Some examples may be a search view, order view, etc.
Single-page applications lend themselves to applications that are highly-interactive based around a consistent view. If a site serves mostly static content or has substantially different interfaces per user, then a single-page application would not be suitable.