SSR & SSG

Routify's Starter template comes with both SSR and SSG enabled by default. SSR is handled by tossr and SSG is handled by spank . For easy configuration, both use configent.

To understand what it's all about, let's look at how requests are handled by the server:

• SPA (Single Page Application) - the server sends a HTML template and a Javascript bundle. The SPA is then built in the client's browser.

• SSR (Server Side Rendering)* - the server prerenders the corresponding HTML and sends it to the client.

• SSG (Static Site Generation)* - the server sends the corresponding pregenerated HTML file to the client.

* Along with the static HTML, your SPA is bundled and sent to the client. Once the SPA is received, it handles all subsequent navigation. From this point, the server only serves assets.

• SSR handles dynamic content as HTML is rendered in realtime.
• SSG is faster as all HTML is prerendered.

• The first visit shows a rendered page without having to wait for javascript to load.
• Better SEO - search engines can crawl your page.
• External references to your site become rich objects when using Open Graph.

• Serverless.
• Optional and enabled by default.
• SSR and SPA use the same code. No complicated boilerplate required.
• The code isn't limited to a Node environment.
• No tight coupling with arbitrary framework paradigms.
• Painless async handling with $ready.
• Easy build & deployments.

• Requires a host with functions support (Now, Netlify, etc.) or a server.
• Browser environment is headless, occasional consideration may be required.

While SPA, PWA, SSR, SSG, Dynamic imports etc. all happily coexist, there can be times where you want to disable one or more features.

• SSG - can be disabled by removing build:static from package.json

• SSR (Vercel) - can be disabled by setting routes.dest to "/__app.html" in vercel.json

• SSR (Netlify) - can be disabled by setting redirect.to to "/__app.html" in netlify.toml