SSR, SPA, and New SSR — A Comparison

Restored from a 2020-04 archive. Today's Next.js / Nuxt standardize "New SSR" patterns at the framework level.

SSR (Server-Side Rendering)

Traditionally used in web applications. In contrast to SPAs, it's now called MPA (Multi-Page Application).

Each page request triggers fresh HTML generation on the server. The client downloads the full page every time:

1. Client requests xxx.com/main
2. Server runs the route handler, locates the HTML template
3. Fetches data from the database
4. Renders the final HTML
5. Sends HTML back to the client
6. User sees the rendered view

Pros

• Fully rendered HTML means excellent SEO
• Only loads resources needed for the current page, so initial load is optimized

Cons

• Every navigation re-requests resources, increasing overall traffic
• Full-page refresh on every navigation slows perceived performance

SPA (Single-Page Application)

The current mainstream JS framework paradigm. The server delivers one page (index.html), and subsequent rendering happens via JavaScript:

1. Client requests xxx.com/main
2. Server unconditionally returns index.html
3. Server also delivers a JS bundle (e.g. bundle.js)
4. The bundle runs and requests data from api.xxx.com/main
5. Server returns JSON data
6. Client renders the view with the data
7. User sees the view

One HTML file serves every URL, hence "Single Page".

Pros

• After initial load, navigation only fetches data — faster subsequent interactions, less total traffic
• No full-page reloads, smoother UX

Cons

• Initial load downloads all static resources, slowing first paint
• Poor SEO for crawlers without JS support

SSR vs SPA

Both have loading-speed tradeoffs.

SSR starts fast on the first page. SPA is slow on the first load but fast afterward since all bundles are cached. However, SSR reloads resources on every page, so later navigations can feel slower than SPA.

The bigger SPA weakness is SEO. Crawlers typically don't execute JavaScript (Google does, most others don't), so a JS-only SPA shows up as an empty shell to them.

New SSR (Hybrid)

Modern frameworks blend both:

1. The first request is handled by SSR
2. Subsequent navigation uses client-side rendering (SPA-style)

Pros

• First page SSR solves SEO and initial-paint problems
• Client-side navigation keeps the smooth SPA feel
• React, Vue, and Angular all support this officially, so components render the same way on server and client

Cons

• Complex code — without a clear mental model of bootstrap order, bugs multiply
• Higher CPU usage on the server
• Frontend developers unfamiliar with server concerns can introduce subtle bugs (e.g. code that works in-browser but breaks on the server)