SSR Concepts: SPA vs SSR vs SSG vs ISR

The NOVA LAB Command Center must deliver information as quickly as possible. Different rendering strategies are like different communication systems on the station - each has its advantages depending on the situation.

SPA - Single Page Application

A traditional Vue application is an SPA (Single Page Application):

1. The browser downloads an empty HTML file
2. It loads the JavaScript (Vue bundle)
3. JavaScript renders the entire page in the browser
4. Navigation happens without page reloads

1Server → [empty HTML + JS bundle] → Browser → [rendering]

SPA Advantages:

• Smooth navigation without reloads
• Rich interactivity
• Simple hosting (static files)

SPA Disadvantages:

• Slow initial load (large JS bundle)
• Empty page until JS loads
• Poor SEO - bots see empty HTML

SSR - Server-Side Rendering

SSR renders the page on the server and sends ready HTML:

1. The server receives a request
2. Vue renders the component on the server to HTML
3. It sends the ready HTML to the browser
4. The browser displays the page immediately
5. JavaScript is loaded and "hydrates" the page (adds interactivity)

1Request → Server [renders HTML] → Browser [displays + hydration]

SSR Advantages:

• Faster First Contentful Paint (FCP)
• Excellent SEO - bots see full HTML
• Better performance on slow devices

SSR Disadvantages:

• Higher server load
• Longer Time to Interactive (TTI)
• More complex infrastructure

SSG - Static Site Generation

SSG generates HTML at build time:

1. During

   npm run build

   - each page is prerendered to HTML
2. HTML files are ready to be served
3. No server needed - plain static hosting
4. JavaScript hydrates the page on the client

1Build time → [generates HTML] → Deploy → CDN → Browser

SSG Advantages:

• Fastest possible response (files from CDN)
• No server - cheapest option
• Excellent SEO

SSG Disadvantages:

• Content doesn't change between builds
• Every change requires a rebuild
• Not suitable for dynamic data

ISR - Incremental Static Regeneration

ISR combines SSG and SSR - pages are generated statically but can refresh:

1. First visit - page served from static cache
2. After a set time - the page is regenerated in the background
3. Next visit gets the updated version

1Request → [cache/CDN] → if stale → regenerate in background → new version

ISR Advantages:

• SSG speed + SSR freshness
• Automatic refreshing

ISR Disadvantages:

• More complex configuration
• Data may be momentarily outdated (stale-while-revalidate)

Hydration - the Key to Interactivity

Hydration is the process where Vue "takes over" the static HTML generated by the server and adds interactivity to it:

1Server: <button>Click</button>  ← static HTML
2   ↓ hydration
3Client: <button @click="handler">Click</button>  ← interactive

Vue compares the virtual DOM with the existing HTML and attaches event handlers, refs, and reactivity - without re-rendering the entire DOM.

When to Use Which Strategy?

| Strategy | Use when... | |----------|-------------| | SPA | The app requires rich interactivity (dashboard, editor) | | SSR | SEO matters + dynamic data (store, blog with comments) | | SSG | Content changes rarely (documentation, landing page) | | ISR | Content changes, but not in real time (blog, catalog) |