In this section, we will learn about SPAs and why have they become de facto in the creation of applications using client-side libraries. An SPA is an app that's built on one page. For example, you will have one index.html file in the application, but this app will still have different routes/links to different pages. Let's understand how this works.

In your index.html file, you will create one HTML empty element, for example:

<div id="root"></div>

Then, you will load the whole application using JavaScript. All the HTML that gets rendered in that element will be rendered using JavaScript. We will also be changing the routes, but it will just be this HTML file that's going to be used. Suppose you have a home page (www.example.com) and an about page (www.example.com/about). When you land on any of these pages, you will load the same index.html file, and then the JavaScript will render the respective content based on the URL. The benefit that we get here is that we don't have to download any extra HTML, CSS, or JavaScript files when going to other pages after the initial page load. The only thing that might be required is to load the dynamic JSON data onto the other page if any dynamic data has to be displayed. 

However, while SPAs provide you with faster page transfers, it means that the initial load will load every page of the application, which could slow down the application considerably. Later in this chapter, we will lazy load some of the JavaScript when going to other pages so that we don't load all the JavaScript for all the pages at once.

Now that we understand what SPAs are compared to traditional websites, let's quickly look at an overview of the project we will be building in this chapter.