What is a Single Page Application?
SPA can be deployed as-is, meaning just like the way we’ve described above. Alternatively, SPA can also be deployed as a Static SPA or as a SPA that utilizes Server-Side Rendering aka SSR. Those alternative deployment mechanisms are used to address specific purposes such as to achieve fast loading times, eliminate some of the drawbacks such as SEO issues, etc.
- A server-rendered app requires an environment where a Node.js server can run. Rendering a full app in Node.js is going to be a lot more CPU-intensive task and can become problematic if you are not prepared to handle the corresponding server load in case you expect to have a high number of concurrent users.
Lastly, we’ve got Static SPAs.
What is a Static Web Page?
When it comes to SPAs, you can pre-render your SPA at build time to generate static HTML pages which can then be served using any static web hosting service without requiring to have some form of dynamic content generation capabilities. Static HTML pages usually offer the optimal loading speed in comparison to any dynamically generated web page due to its simple nature of not having to go through any pre-processing before being served.
To finish things off, the take-out from this article is that the difference between a classic SPA, an SSR based SPA, and a Static SPA lies in a single criterion of where and when does the actual rendering of a page happens.
- On a Classic SPA – Full rendering of the app happens on the client
- On an SSR based SPA – Initial rendering happens on the server. After the initial page loading is completed, the client takes over the rendering process by performing the technique called Hydration
- On a Static SPA – The rendering happens at build time resulting in static HTML files ready to be served over a static web host.
Resources & Further Reading
Below are some of the fantastic references I’ve found and assembled for you to gain more insights into SPAs.
Below are few more references that focus on SSR with Nuxt
Happy coding guys. Thanks for reading!!!