SPA vs SSR vs Hybrid Rendering

Professional Track: Complete this lesson with a working implementation, architecture notes, and a documented trade-off decision.

Overview

Rendering strategy is a business decision with technical consequences. Choose based on SEO requirements, latency profile, infrastructure budget, and team operations maturity.

Rendering Models

SPA model

  • Fast iteration and simple deployment.
  • Higher first-paint cost on slow networks/devices.
  • SEO and crawler behavior can require additional work.

SSR model

  • Better initial content delivery and crawler compatibility.
  • Higher infrastructure and caching complexity.
  • Requires careful hydration consistency checks.

Hybrid model

Render route-by-route using the most appropriate mode: marketing pages with SSR/SSG, authenticated dashboards as SPA.

Route-Level Strategy

Segmentation matrix

/pricing      - SSR or SSG
/docs         - SSG
/dashboard    - SPA (auth heavy)
/account      - SPA or SSR depending on latency/privacy constraints

Caching and invalidation plan

Define cache keys, TTL, and invalidation triggers per route group before going live.

Migration Plan

Incremental migration from SPA

  1. Identify high-impact public routes for SSR/SSG.
  2. Extract shared UI modules and isolate browser-only dependencies.
  3. Introduce observability for render latency and hydration errors.

Learning Objectives

  • Evaluate SSR, SSG, and hybrid architectures.
  • Map route-level rendering decisions to business needs.
  • Plan migration path from pure SPA to hybrid setup.

Common Mistakes

  • Choosing SSR for all routes without cost-benefit analysis.
  • Ignoring hydration mismatch risks during component design.
  • Missing cache invalidation strategy for dynamic content paths.

Engineering Notes

For every route group, document rendering mode, performance target, cache policy, and rollback fallback mode.

Practice Scope

Deliver one production-style mini-feature, include implementation notes, and record one performance, reliability, or maintainability trade-off in your commit summary.

Back to roadmap: Vue Roadmap