Modern UI frameworks (React/Vue/...) enable a wide range of render modes:
We compare these render modes with each other and explain which render mode should be used when.
See Guides > Render Modes (SPA, SSR, SSG, HTML-only) for how to use render modes with your
vite-plugin-ssr
app.
Technically and precisely speaking, the difference between each render mode is the following.
SPA means that the page is loaded & rendered only in the browser.
In general, if our page:
then SPA is an option.
SPA advantages:
Most libraries nowadays support SSR (or have workarounds).
We can remove the need for a production Node.js server for SSR apps by using pre-rendering.
While for certain types of pages, such as an Admin Panel where there is a clear choice in favor of SPA, there often isn't a clear cut whether we should use SPA or SSR.
SSR means that our page is rendered to HTML as well as as rendered (hydrated) in the browser.
It is the most capable mode as it enables:
For example, social news websites need SSR. (They are interactive while needing both SEO and mobile performance.)
SSR improves mobile performance in the sense that the page's content is rendered to HTML and can already be shown to the user before the browser-side JavaScript even starts loading. (Loading & executing JavaScript is usually very slow on mobile.)
For pages that are not content centric (e.g. a to-do list app) and don't need SEO, we can consider SPA instead of SSR.
Pre-rendering means to render the page's HTML at build-time instead of request-time.
We should use pre-rendering whenever we can, as it allows us to deploy our app to a Static Host.
For example, https://vite-plugin-ssr.com
is pre-rendered and deployed to GitHub Pages.
HTML-only means that the page is only loaded & rendered on the server-side.
For content centric pages with no/little interactivity (the page has no/few stateful components), then using HTML-only is an option.
Examples:
https://vite-plugin-ssr.com
)The advantage of HTML-only is that the page has no/little browser-side JavaScript, which leads to considerably faster loading times (especially on mobile).
For the few bits of interactivity (such as an image carousel or a collapsible section),
the page can load a couple of vanilla browser-side JavaScript libraries to surgically implement these few bits of interactivity.
This is what https://vite-plugin-ssr.com
does: if we inspect the browser-side JavaScript of this page, we'll see only around 1-2KB of JavaScript.
Tools that pre-render pages are also known as "SSG" (Static-Site Generators).
In the context of vite-plugin-ssr
, we use the terms "SSG" and "pre-rendering" interchangeably.