What Are Single Page Applications?
We know how to use Vue to work with just part of our applications, covering this in the previous project. We can take an existing site or app, create a new Vue instance, and then mount it to any of the HTML elements to want to use it on.
As mentioned earlier, we can use Vue to control our full front-end application by creating a Single Page Application.
In modern web development, we often hear the term Single Page Application or SPA. But what exactly is an SPA, and how it is different from traditional websites?
What is a single page application?
A Single Page Application is a web app that loads a single HTML page. It then updates the content as the user interacts with it, without requiring full page reloads. Page navigation between different views happens within this single page. You can think of it as an app which works in the browser and is controlled using JavaScript.
How single page applications work
This is different from the traditional (multi-page) way of building/rendering websites. This involves a new page request from the server when the user navigates our site, such as cliking a link to a new page. If all is well, the server then responds with the page contents to display in the browser.
Single Page Applications work differently to this. Instead of requesting pages and assets (images/css etc) as we need them, Vue will build our app into one or more JavaScript bundles.
Single page applications handle the process differently:
- First user visit: The full application is requested/downloaded (HTML, CSS, JavaScript) on the first request.
- JavaScript takes control: JavaScript then takes over and handles future page navigation.
- API calls: API calls can still be used to fetch additional data.
- Dynamic updating: The application then uses JavaScript to dynamically update the DOM with any new content or updates.
- Client-side routing: Page navigation is handled by the JavaScript router without full page reloads.
Although we are focusing on Vue.js for this course, the concept is the same for other frameworks or libraries.
Navigation comparison
Multi-page applications and SPAs have a different approach to navigation:
| SPA | Multi-page app |
|---|---|
| JavaScript intercepts the navigation | The browser requests a page from the server |
| Optional API requests for data | The server processes the request |
| API data (often JSON) is processed | The server returns the HTML page |
| JavaScript updates required parts of the page | App reloaded with new page |
| The URL changes (using the History API) without a page reload |
Single page application advantages/disadvantages
The SPA approach has some advantages and disadvantages over traditional websites.
A big advantage is speed as switching pages via JavaScript is much faster than requesting from the server. This provides a great user experience since there is no loading, and navigating our app is almost instant. Since the initial bundle is stored in the browser, it can work offline too. The reduced server requests can take the load off your server, requiring a more simplified backend and potentially reducing costs.
There are also some drawbacks too. Such as downloading a big bundle can be slower initially when the user first visits your site. This can be optimised with code splitting, and we will look at this later in the course.
Also, it is historically not considered as SEO friendly as traditional server generated pages, since the HTML is minimal and then the rest is generated in the browser, resulting in content which is harder to crawl by search engines. Although search engines claim to have greatly improved this recently. These dynamic updates in the browser can also create challenges for screen readers and other assistive technologies.
The role of Vue.js
Vue.js is well-suited for building SPAs. It provides a comprehensive set of tools for SPA development:
- Virtual DOM: Allows updates to only the section of the page/UI which needs it (full page load not required).
- Vue Router: Client-side routing in the browser to switch between pages.
- Vuex/Pinia: State management for managing data throughout your app.
- Lazy Loading: Enables code-splitting to load components only when needed, the inital bundle size can also be reduced this way.
- Transitions: Smooth transitions between views or components.
Conclusion
Single Page Applications represent a modern approach to building web apps. If done correctly they can provide a great user experiences. Vue.js provides an excellent tool and ecosystem for building SPAs that perform well and are developer-friendly.
In the next section, we'll set up our development environment with Vite and create our first Vue SPA project.