Why Traditional Approaches Hit a Wall

Standard single-page applications built with vanilla React, Vue, or Angular face inherent performance problems. The browser downloads a large JavaScript bundle, executes it, then fetches data, then renders content. Users stare at blank screens or loading spinners while this cascade happens — often 3-5 seconds on mobile connections.

Search engines struggle with this too. While Google can index JavaScript content, it does so on a delayed crawl queue. Pages that serve HTML directly get indexed faster and more reliably. When your competitors ship pre-rendered HTML and you ship a blank div that says "Loading...", guess who ranks first.

The Four Performance Approaches

Server-Side Rendering (SSR)

With SSR, the server builds the complete HTML for each page request and sends it to the browser. Users see content almost immediately — typically within 0.5-1.5 seconds — because the browser doesn't need to download and execute JavaScript before showing anything useful.

The trade-off is server cost. Every page request requires compute time, which means you need proper hosting infrastructure rather than cheap static file hosting. SSR shines for dynamic, personalised content — dashboards, e-commerce with real-time inventory, authenticated experiences.

Best at SSR: Next.js and Nuxt both handle SSR elegantly. Next.js uses React Server Components for granular control over what renders on the server. Nuxt offers a similarly smooth experience for Vue developers. Remix takes SSR further with nested routing and progressive enhancement.

Static Site Generation (SSG)

SSG builds all your pages into plain HTML files at build time. No server processing needed when visitors arrive — just serve files from a CDN. The result: sub-second load times, infinite scalability, and hosting costs measured in rands per month rather than hundreds.

It's like printing a newspaper versus writing articles on demand. The newspaper is fast to distribute because the work happened earlier. The limitation: content is only as fresh as your last build. For blogs, marketing sites, and documentation, this is rarely a problem. For real-time data, it won't cut it alone.

Best at SSG: Astro was purpose-built for content-driven static sites and does this exceptionally well. Next.js and Nuxt support SSG as an option alongside SSR. SvelteKit handles static generation through its adapter system.

Islands Architecture

Here's where things get interesting. Islands Architecture takes a static HTML page and only hydrates the interactive parts — the "islands" — with JavaScript. The rest stays as plain, fast HTML. A marketing page with one interactive pricing calculator ships maybe 15KB of JavaScript instead of 200KB.

This approach recognises a simple truth: most of your page doesn't need JavaScript. Your header, your text content, your images — they're static. Only the contact form, the animation, the dynamic filter actually needs client-side code. Why ship JavaScript for the parts that don't?

Best at Islands: Astro pioneered this approach and remains the strongest implementation. It lets you use React, Vue, Svelte, or Solid components within the same page while shipping zero JavaScript by default — only the interactive islands get hydrated.

Code Splitting and Lazy Loading

Instead of downloading your entire application upfront, code splitting breaks it into smaller chunks loaded on demand. Visit the homepage? You get homepage code. Navigate to the pricing page? That code loads then. Users never download JavaScript for pages they don't visit.

Best at code splitting: Next.js and Nuxt do this automatically per route. SvelteKit produces remarkably small bundles because Svelte compiles components to vanilla JavaScript rather than shipping a runtime. Remix takes a unique approach with nested routes that load data and code in parallel.

Framework Comparison: Honest Pros and Cons

Astro

Strengths: Zero JavaScript by default, Islands Architecture, uses any UI framework, outstanding performance for content sites, excellent developer experience.

Limitations: Not ideal for highly interactive applications (dashboards, complex SPAs). Newer ecosystem with fewer third-party integrations than Next.js.

Best for: Marketing sites, blogs, documentation, portfolios — anything where content is the main event.

Next.js

Strengths: Mature ecosystem, React Server Components, flexible rendering (SSR/SSG/ISR), massive community, strong Vercel deployment pipeline, excellent for complex applications.

Limitations: Ships more JavaScript than necessary for simple content sites. React hydration adds overhead. The framework has grown complex — lots of features means lots of decisions. Vercel-centric deployment assumptions.

Best for: Dynamic web applications, e-commerce, SaaS products, anything requiring rich interactivity alongside good SEO.

SvelteKit

Strengths: Smallest bundle sizes (no virtual DOM runtime), intuitive syntax, fast builds, excellent performance out of the box. Svelte 5's runes system brings fine-grained reactivity.

Limitations: Smaller ecosystem than React/Vue. Fewer UI component libraries available. Hiring Svelte developers is harder in some markets.

Best for: Interactive sites where bundle size matters, progressive web apps, teams who value simplicity and developer experience.

Nuxt

Strengths: Full-featured Vue framework, strong SSR/SSG support, excellent module ecosystem (Nuxt Image, Nuxt Content), great developer experience for Vue teams, auto-imports reduce boilerplate.

Limitations: Vue's community is smaller than React's in English-speaking markets. Some enterprise organisations default to React, making Nuxt a harder sell in those environments.

Best for: Teams already using Vue, content-heavy sites needing SSR, projects where Nuxt's module ecosystem covers your needs.

Remix

Strengths: Progressive enhancement philosophy (works without JavaScript), nested routing with parallel data loading, excellent form handling, web standards-first approach.

Limitations: Smaller community than Next.js. Recent Shopify acquisition creates some uncertainty about direction. Less ecosystem tooling.

Best for: Applications where progressive enhancement matters, complex forms and data mutations, teams who prefer web standards over framework magic.

Core Web Vitals: What the Numbers Actually Look Like

Google measures three Core Web Vitals that directly affect your search rankings:

• LCP (Largest Contentful Paint): How quickly the main content appears. Target: under 2.5 seconds. Static sites built with Astro or SSG-mode frameworks regularly hit 0.5-1.2 seconds. Traditional SPAs often land at 3-5 seconds without optimisation.
• INP (Interaction to Next Paint): How responsive the page feels when you click or tap. Target: under 200 milliseconds. Less JavaScript means fewer long tasks blocking the main thread. Astro and SvelteKit excel here by shipping minimal client-side code.
• CLS (Cumulative Layout Shift): How much the page jumps around while loading. Target: under 0.1. All modern frameworks handle this well when you set explicit image dimensions, use font-display swap, and avoid injecting content dynamically above the fold.

The Real Impact on Your Business

Performance improvements translate directly to business outcomes. Google's research shows that as page load time goes from 1 second to 3 seconds, the probability of bounce increases by 32%. At 5 seconds, it increases by 90%. For mobile users on spotty connections — which describes a significant chunk of South African web traffic — these numbers hit even harder.

Faster pages also get indexed more efficiently. Google allocates a crawl budget to your site, and pages that load quickly use less of it per page, meaning more of your content gets discovered. This compounds over time — a faster site builds SEO momentum that slower competitors can't match.

The conversion impact is equally real. A Portent study found that pages loading in 1 second convert at 3x the rate of pages loading in 5 seconds. You don't need a framework migration to see gains — but if your current stack is fundamentally slow, no amount of image compression will fix an architectural problem.

Picking the Right Framework for Your Project

Don't choose a framework because it's popular. Choose it because it solves your specific problem well. A blog built with Next.js ships unnecessary complexity. A SaaS dashboard built with Astro fights the framework at every turn.

Here's a quick decision guide: If your site is primarily content with minimal interactivity, start with Astro. If you need a dynamic application with authentication, real-time data, and complex state, Next.js or SvelteKit are strong choices. If your team already knows Vue, Nuxt is the natural fit. If progressive enhancement and web standards matter to you, explore Remix.

Whatever you pick, measure the results. Run Lighthouse audits, check your Core Web Vitals in Search Console, and track your actual conversion rates. Performance isn't a one-time project — it's a practice. The framework gives you a starting line, but what you build and how you maintain it determines where you finish.