We Don’t Need A Page Refresh: Single Page Apps

The landscape of the World Wide Web has changed drastically since its explosion in the mid 90’s. Browsers started off without the capability of displaying images, server-side dynamic web pages grew in popularity, javascript was introduced allowing for client-side dynamic interactions, mobile specific websites came and went giving way to responsive websites, and design continuously improved as the technology behind it grew. Take a look at Microsoft’s site in 1994 (fig. 1) to their current site.

One thing that’s been consistent throughout is: when you click on a page, the browser refreshes and loads the page content. This changed with the emergence of Single Page Apps (SPA). Single Page Apps are Web apps/websites that load a single HTML page. That page then gets dynamically updated based on user interaction without a page refresh. While they’ve been around for several years now, they’ve been

The traditional interaction of a website is that the client (user/browser) makes an initial request to the server. The server processes that request and sends back HTML (the content you see). Any subsequent requests follow the same procedure, with a page refresh at the end of each new request (fig. 2). Single Page Apps have the same initial request. However, each subsequent request it sends AJAX to the server and receives JSON. This results in updated HTML/view without the page refresh (fig. 3).

In a society that is very much entrenching itself in instant gratification, Single Page Apps seem to make a lot of sense.

• Speed – Only one page is loaded, so once that load happens, further interactions are lightning fast.
• Processing is done client side, so it reduces the load on your server.
• Even though this technology has been around for a while, they still have a “wow” factor as most sites are still using the traditional format.

However, here are a few words of caution:

• Creating a website as an SPA isn’t rocket surgery, but it’s not far off. There are frameworks that help with the process, but the general development is more intricate which increases the time spent in development.
• Because SPAs focus on client side processing, some people may experience performance issues if using older equipment/browsers. However, as technology improves, this is becoming less and less of an issue. Speed is generally a benefit to SPAs, but it’s worth mentioning to be cautious.
• SEO – Search Engine Optimization is tricky when it comes to SPAs. Because page content is generated dynamically on the client side, when search engines crawl the site it doesn’t crawl all the content properly. Again, there are ways to mitigate this, but it leans into the first point regarding increased development time/complexity.

Now. Do I need it? Or do I just want it? These are important questions as SPAs are not right for every person or company. Analyze the pros and cons, do additional research, look at example sites to see how they perform, then make your decision. Or contact us to get expert help and advice!

Fig. 1

Fig. 2

Fig. 3