<p>To understand the reason why single page application are used, we first need to understand how browsers load a website.</p>
<p>Knowing this information will give us insights into why Single Page Applications (SPAs) are so prominent and popular today.</p>
<p>Let’s do a quick overview of how a website is loaded.</p>
<h2 id="website-page-load"><a href="#website-page-load" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Website Page Load</h2>
<p>When you first load a website, there are a few things that happens in between on the browser before the page appears on the screen.</p>
<p>From the <strong>“Start Request”</strong> to the <strong>“Page is ready”</strong>, the browser will prepare the assets like HTML, CSS, and JS - That means loading them in, parsing it and executing it.</p>
<p>All of this is required for a website to be loaded, and guess what ? <strong>It takes time!</strong></p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/spa-initial-page-request.png" alt="Single Page Application: Initial Request" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Single Page Application: Initial Request</blockquote>
  </div>
</div>
<p>So, if each page load goes through this process wouldn’t it just take too long ?</p>
<p><strong>Yes, it would!</strong></p>
<p>And you can probably fill in the blanks of where this is going with a Single Page Application (SPA).</p>
<p>SPAs will still require the initial request but for subsequent request, it will be much quicker.</p>
<p>Let’s dig into the details of how it does that.</p>
<h3 id="loading-in-single-page-applications-spas"><a href="#loading-in-single-page-applications-spas" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Loading in Single Page Applications (SPAs)</h3>
<p>The loading of a SPA has two phases:</p>
<ol>
<li>
<p><strong>Initial Request</strong> - The the initial website, which is what we described above</p>
</li>
<li>
<p><strong>Subsequent request</strong> - This is where the new data is loaded and the new page is rendered (on the client)</p>
</li>
</ol>
<p>Let’s say the website is already loaded at <code class="language-">/cats
</code> and we want to go to <code class="language-">/dogs
</code> now.</p>
<p>In the case of a SPA, assuming we’ve already loaded the <code class="language-">/cats
</code> page, we don’t need to do a full reload of the whole website.</p>
<p>Instead what we can do is we can re-render just the page we need instead.</p>
<div style="margin: 2em auto;">
  <div style="display:flex;justify-content:center;">
    <img src="/images/spa-subsequent-request.png " alt="Single Page Application: Subsequent Request" style="width:80%" />
  </div>
  <div style="display:flex;justify-content:center;">
    <blockquote>Single Page Application: Subsequent Request</blockquote>
  </div>
</div>
<p>So, that means we can fetch the data for <code class="language-">/dogs
</code> page, and just render it on the client-side.</p>
<p>The biggest benefit of a SPA is removing the need for a full page reload, ultimately skipping the process illustrated above in the <strong>Initial Request</strong>.</p>
<p>Beyond performance, there is also a UX improvement when a SPA is used.</p>
<h3 id="user-experience-ux"><a href="#user-experience-ux" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>User Experience (UX)</h3>
<p>Another benefit of Single Page Applications (SPAs) is the UX benefits from the “smooth transitions” between the pages.</p>
<p>Since the subsequent requests happen on the client-side, and it take less time, it allows us to have this snappy transition between pages.</p>
<p>Whereas if you reload the whole page again, you may have this quick flash on the screen when you visit a new page - which can be quite janky.</p>
<p>This sort of experience worsens if you are on slower connection (ie 4G, 3G) or on a lower-end mobile device where it has less Memory or CPU.</p>
<h3 id="client-side-routing"><a href="#client-side-routing" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Client-side routing</h3>
<p>Now you know about how SPAs work and how it relies heavily on client-side rendering and transitioning between pages.</p>
<p>You can probably see why client-side routers are so popular these days.</p>
<p>This is why browsers and open source libraries have things like:</p>
<ul>
<li><code class="language-">history
</code> (Browser API)</li>
<li><code class="language-">react-router
</code></li>
<li><code class="language-">vue-router
</code></li>
<li>and many other opensource routing libraries</li>
</ul>
<p>These APIs and libraries all enable this capability to transition between pages for single page applications, and it is a big part of the Single Page Applications (SPAs) ecosystem.</p>
<p>And if you use something like Next.js, they have their own client-side routing implementation for the single page applications (it works in a very similar way).</p>
<p>Remember Single Page Applications (SPA) are not really special, it just allows you to by-pass the initial website load, and on subsequent requests, you can re-render pages on the client-side.</p>
<p>And... That’s really all there is!</p>
<p>If you found this helpful, please like &#x26; share this article!</p>


Jerry Chang

BYTE-Sized

Digestable Content That Will Take You To The Next Level

Why Single Page Applications (SPA) ?