8 Single-Page Applications
This chapter covers
- Working with multiple modules
- Optimizing Performance with Html.Lazy
- Routing
- Parsing URLs
Our manager adores the two pages we’ve built for Photo Groove, and has a visionary idea for where to go next. “Now that we have all these pages, we need a header across the top with links so users can get between them quickly. Oh! And make sure it doesn’t do that unsightly flash of blank page when switching between them. That drives me bananas.”
Indeed, two pages is a lot more than one; a header to switch between them sounds like just what the doctor ordered!
In this chapter we’ll build a navigation header that is shared between the two pages we’ve built in the previous chapters. We’ll build the combined page using a Single-Page Application (SPA) architecture, so users can transition between the two pages without the browser performing a fresh page load.
The “single page” in “single-page application” refers to a single page load—the browser only loads the page once, but from the user’s perspective, all the usual features of multiple pages still appear to work as normal: the URL in the address bar changes when clicking links, the browser’s Back button still returns to the previous URL, and so on.
Let’s build ourselves a Single-Page Application!