Let there be a static web application.
Let the following be a priority:
- First loading time (ignore cache etc)
- User experience
- Search Engine Optimization (meta tags & bot friendliness)
When writing a web application, there are two broad approaches:
- Single Page Application (AngularJS, Vue.JS, React, ...)
- Load once, highly responsive UX
- Less bandwidth usage
- Long initial load (may be render blocking)
- Multi Page Application (Traditional)
- Friendly to bots
- Lightweight (load only what you need for each page)
- Loading when switching pages (hits UX)
A single page application can be made friendly to robots using server side pre-rendering, but that would mean the application is no longer static and would incur an operations (hosting) cost.
Given the priorities and possible options, which approach would be optimal?