Single page application (SPA) website development vs multi-page websites
When people come to me with the need for a website, e-shop, etc. I ask if they want SPA and then usually I hear a question: “Why do I need an app? We need a website!”
SPA is not an app that runs independently in your computer or phone but it’s a web app that runs in the browser like a website.
“Web page” or “web app” — the difference is that in a “web page” you will have some content and there will be (hyper)links to subpages (“services”, “news”, “contact”, whatever). When you click on any link then there will be a new HTTP request and new page loads. Depending on your connection speed, website’s server and its connection and some other factors it will take a certain amount of time to load the new page. You’ll see in the browser tab title (left side — where usually is the website’s icon) half-circle turning around. That’s indicating that the new “web page” is loading.
In the “web app” there will be only the initial load when you arrive the very first time. Now whatever link/button/element you click (blog, products, contact etc.) new page won’t load. You will remain on the same page and some JavaScript framework (most popular ones these days: VueJs, React & Angular) will do the server-side rendering and display the new content for you without loading a new page.
The history simply explained — in the 90s, there were just static HTML (hypertext markup language) pages that contained “hyperlinks” to other HTML pages. The visitor clicked on the link and loaded another static HTML page. Then came into the game the server-side programming languages (PHP, ASP, etc) and websites became dynamic. JavaScript was just used for tiny front-end animation effects. When the visitor clicked then instead of loading the new static page, some server-side script decided what content newly loaded page will contain. Now today, the latest tech is, that even new page doesn’t load — JavaScript will ask in that single page the backend software what happens as the visitor did this and this and then instantly displays what’s needed without loading a new page.
Why? Because loading a new page will take some time even if you have a fibre-optic connection and the website is super optimised and in a fast and expensive server. In SPA the loading of new pages will be either lightning-fast and instant or to make things especially cool and modern maybe with some effect (let it be fade in/out, slide, etc.). Click on this website’s top menu items to see how new “view” loads with a fade.
So speed is one of the most important aspects. Internet is full of stats how many % big e-commerce players and websites have gained longer browsing visitors after switching to SPA as visitors (without thinking about speed) click on more links and browse around more if new views/pages load super fast.
And the second major advantage is modern and cool. In the 90s all websites looked the same. Then came Flash, web video, JavaScript effects, etc. and everybody tried to look different, modern and cool. Now, in very recent history all the website again look the same. People are so used to it that there’s even the same font, click on menu item then it just scrolls down to the right place, same menu, same footer, etc. It’s hard to come up with something different and also modern. So, the SPA is here one solution. OK, there are some others too (micro-interactions, video content, glitch art, etc.) but here we talk about SPA:)
Downsides of the SPA? Not really any more except little more hours of work on web development. They used to be in very recent history, not so SEO (search engine optimisation) friendly but that’s over now. VueJs has Nuxt.js and React has Next.js web application framework and with these, each SPA view will look like a web page for search engines. It will have its web address (URL), title, description and all the META tags that are good for SEO so SPA is more SEO friendly as Google loves super fast and modern web apps!
Another minus that used to be, is the slightly longer initial loading time because of the heavy frameworks. Usually, some kind of loader is displayed during that time but be creative and different — display during the loading time already some interesting/educative/funny/whatever content while all the cool stuff loads in the background! Also, we can do with the initial load just the landing page and while the visitor has already that one fully loaded we can load in the background the rest to make whatever further visitor’s interaction instant.
Want to hear more about the SPA web app development? Book a free up to 30min web development consultation with me>> And read also about PWA (progressive web apps)>>
