Frontend Web
Table of contents
SPA vs SSR vs Static Site
Here is an attempt to understand the exact differences between the three.
Single-Page Application (SPA)
An SPA uses CSR (client-side rendering). Just by that I can already see the glaring difference to SSR (server-side rendering).
In CSR, as the name suggests the client (browser) dynamically renders the web app. All the HTML, CSS, and Javascript are loaded in the beginning of the app’s lifecycle. Script makes AJAX calls to the API when it needs new data and dynamically integrates it.
So technically, there really is only one page that is being presented to the user, it’s just that the contents within the page change to meet your needs.
One advantage of SPA is that it provides better UX, because there is little to no lag time during navigation within the app. This comes from the fact that SPA does not require duplicate resources again and again after each click unlike MPA (Multiple-Page Application)/SSR. Things that always stay static on a website, like the general frame or style can stay as is and only new data are fetched from server.
One disadvantage is that it is generally considered to have poor SEO (Search-Engine Optimization) compared to server-side apps. This is because without JS rendering, the HTML of an SPA is pretty much empty. If you check the source code of an SPA (not from the console), you will see that it does not contain much other than all the scripts that are sitting and waiting to execute upon interaction. In addition, SPAs might not have unique URLs for each content delivered. In many cases the URL stays the same throughout the entire site. Therefore crawling and indexing becomes slow and difficult.
Server-Side Rendering
With all that being said about SPA, SSR is easier to understand.
When navigation happens (e.g via click), the server builds the page and hands it over to the browser. Within a browser, you will only see the resources that consist the current page that you are on.
You can already see why this could be slow, since it’s like asking the chef to dip your nachos every single bite when you could’ve just had the chips and cheese in front of you and dip it yourself. Due to this nature of SSR, you will see the page flicker upon navigation unlike the smooth UX of SPA.
However, the benefit of SSR compared to SPA is that it is more secure, less heavy on the browser (and no memory leaks), and better SEO.
Static Site
Static sites do not have dynamic content and consist of only the static files (HTML, CSS, JS). You could think of this as if the SSR had already rendered every single page that the client might request and had it prepared for you. There is no backend component to static sites and no rendering is involved.