Why Creating SPA-Based Websites?

Basically, separating code from content is as beneficial as separating content from design. The previous separation has become pretty common recently. Separating code from content isn't that new either. Most online applications such as content management systems provide HTML documents that refer to Javascript files to be separately fetched by browser, too. However this sort of separation isn't as real as it could be nowadays.

Today most websites deliver separate HTML documents for every page to be viewed. Every such HTML document has to list the same asset files over and over again, thus asking browser to fetch one or more CSS files declaring the document's styling and to fetch one or more Javascript files implementing additional functionality of either page. It is only due to the browser's caching that this doesn't result in retrieval of the same files over and over again. Eventually either HTML document has the potential of injecting additional code files without notice. They can even contain inline code by good or bad purpose. And any inline code gets transferred on every request for sure. HTML is a container for content, design and functionality. And as such it takes additional markup a.k.a. valuable size to indicate what part is content, what is design and what is code.

In opposition to that a single page application (SPA) is a set of pure Javascript files probably accompanied with a set of pure CSS files and some images or fonts as required for the styling defined in those CSS files. Any request for showing some page of your website requires to retrieval of those files with the Javascript files then starting to request the content to be presented separately. This approach relies on a single HTML document to be delivered, hence the name single page application. This HTML file is a pretty small file instructing the browser to fetch the Javascript, CSS, image files etc. before kickstarting the Javascript code. From the browser's point of you this HTML document is kept current one as long as the user is visiting your website.

Benefits

1. Separate Code Development From Hosting Your Website: All your website's functionality can be developed using your favourite integrated development environment such as Visual Studio Code or Webstorm.

2. Strong Ecosystem: Developing web frontends usually relies on a certain framework such as ReactJS, Angular or VueJS. Either of these come with a huge amount of third-party components and extensions to be integrated into your website project. With a powerful ecosystem of npm, the package manager of NodeJS, it takes very few steps to add components to your project and have them integrated into the generated code.

3. Version Your Code: Versioning your code might be hard when you actually would have to version the files of your content management system as well. This is a whole different story regarding your code and your code, only.

4. Leaner Setups: Developing code requires setups that can be highly automated. Setting up frontend development is a matter of running two or three tasks. And since your content management system won't have to compile documents from content to include certain design themes etc. setting up the content management system will become a lot easier as well. Just focus on basic functionality, user management and content control. Don't care that much about themes.

   Leaner setups simplify scaling up your set of servers for staged release of website as well as the members of your development team.

   Such lean setups on behalf of a content management system will cause less headache next time there is a major upgrade to be installed for you don't have to customize the content management system as much as you would have done before.

5. More Features: Switching from page to page won't imply switching from HTML document to HTML document anymore. This enables your frontend to have custom animations and other kinds of visual effects while transitioning from one page to the next one.

6. Faster Page Switching: Due to requesting content for next page, only, the time to load next page will be reduced most significantly. It might be possible to fetch all content of a small website at once and stop fetching any further content while user is navigating around resulting in a near-zero-delay for switching from page to page.

7. Faster Loading Time: Even though an SPA has to load the code and design prior to fetching the content to be presented, it is possible to cluster any such application so code and design isn't fetched unless required for presenting some requested content. This will strongly improve the initial loading time of your website while keeping times for switching from page to page as low as possible, too. Using modern tools such as WebPack splitting your application into clusters of code has become a convenient and simple task.

8. Security: Attacking your website would require to attack the code files. Neither these code files nor the initially delivered HTML document rely on certain content anymore. They are static. Delivering them require very simple web servers, only. And due to their static content it's possible to automatically detect attacks by comparing checksums over actually delivered files with checksums from an internal database. Fixing code is as easy as re-deploying them from your local version control system.

   By separating code and content - or frontend and backend - it's possible to use different servers to provide these parts of your website. Thus hacking the content management system won't instantly put your code files in jeopardy. And any attacker needs very different strategies to attack a web content management system on one side and a most simple file server on the other side. Just compare recent vulnerabilities detected in WordPress as the most popular content management system as of today and nginx fully suitable for serving static files. As of today, there is no registered vulnerability for nginx in 2018 and 23 in total since 2009, but 10 on behalf of WordPress in 2018 and 189 in total since 2009. What software would you like to serve your website's backbone with regards to its security?

9. Green IT: Well, that might be a bit off, but serving static files is a very simple task. You don't need tons of RAM and superfast CPUs to handle tens of thousands of request per second for downloading code files this way. So you can stick with smaller and older hardware, or concentrate code files of several websites on a single small server. In addition the content management system won't have to compile documents for each and every user resulting in a lot less operations required to deliver requested content. In fact, using proxies for caching content in static files will have a significant effect on performance as well while preventing unneccessary load from your valuable hardware for hosting backend software.