Rendering Modes: Hybrid, SSR, SSG & Edge · Nuxt SEO - - - - [1.4K](https://github.com/harlan-zw/nuxt-seo) [Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo) Learn SEO Master search optimization Nuxt Vue - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1. 2. 3. 4. 5. # Rendering Modes: Hybrid, SSR, SSG & Edge Master Hybrid Rendering, ISR, and Edge Rendering for optimal Vue SEO in 2026. [![Harlan Wilton](https://avatars.githubusercontent.com/u/5326365?v=4)Harlan Wilton](https://x.com/harlan-zw) Published Oct 25, 2024 Updated Jan 29, 2026 What you'll learn - **Hybrid Rendering** is the 2026 standard: mix SSR, SSG, and SPA per route - **Edge Rendering** moves execution closer to users, improving TTFB and Core Web Vitals - Use **ISR** (Incremental Static Regeneration) to keep static content fresh without full rebuilds In 2026, the question is no longer "SSR vs. SSG." Modern Vue frameworks like Nuxt have moved to **Hybrid Rendering** by default. This allows you to choose the perfect rendering strategy for every individual route in your application. Google can render JavaScript, but relying on Client-Side Rendering (SPA) alone puts you at a disadvantage for Core Web Vitals and crawl budget. ## [The Modern Rendering Spectrum](#the-modern-rendering-spectrum) ### [1. Hybrid Rendering (The Standard)](#_1-hybrid-rendering-the-standard) Hybrid rendering allows a single application to use different rendering modes for different paths. You don't have to compromise your entire architecture for a few dynamic pages. **Concept:** - **Home/Landing**: Static (SSG) for instant load. - **Blog Posts**: ISR (Incremental Static Regeneration) for freshness + performance. - **Dashboard**: SPA (Client-Side) for interactivity. - **User Feed**: SSR (Server-Side) for personalization. ### [2. Universal Rendering (SSR + Hydration)](#_2-universal-rendering-ssr-hydration) The baseline for most SEO-focused Vue apps. The server generates full HTML (good for bots), and the client "hydrates" it to become interactive. ✅ **Best for:** - Highly dynamic content - Personalized public pages - Real-time data feeds ### [3. ISR & Static (SSG)](#_3-isr-static-ssg) **SSG (Static Site Generation)** builds HTML once. **ISR (Incremental Static Regeneration)** allows the framework to update that static HTML in the background without a full site rebuild. ✅ **Best for:** - Marketing pages (SSG) - Documentation (SSG) - Blogs and News (ISR) ### [4. Edge Rendering (ESR)](#_4-edge-rendering-esr) Executes your SSR logic on CDN edge nodes (like Cloudflare Workers or Vercel Edge) rather than a centralized server. This drastically reduces Time to First Byte (TTFB). ✅ **Best for:** - Global audiences - Latency-sensitive content - Dynamic content that needs to load fast ### [5. Client-Side Rendering (SPA)](#_5-client-side-rendering-spa) The browser does all the work. The server sends an empty shell. ✅ **Best for:** - Admin dashboards - Authenticated content behind a login - Complex, app-like interactions not indexed by Google ## [Route Rules Strategy](#route-rules-strategy) In modern frameworks (especially Nuxt 4), you control this via **Route Rules**. Map your content volatility to the rendering mode: | Content Type | Volatility | Recommended Mode | Strategy | | --- | --- | --- | --- | | **Homepage** | Low | **SSG / Prerender** | Cache heavily, rebuild on deploy | | **Blog Post** | Medium | **ISR / SWR** | Static first, revalidate every hour (`swr: 3600`) | | **Pricing** | Low | **SSG** | Critical for speed/conversion | | **User Profile** | High | **SSR / Edge** | Dynamic, fetch fresh data on request | | **Admin** | N/A | **SPA** | SEO irrelevant, focus on UX | ## [Partial Hydration & Islands](#partial-hydration-islands) To further optimize Core Web Vitals (specifically INP - Interaction to Next Paint), modern architectures use **Partial Hydration** or "Islands". Instead of hydrating the _entire_ page, you only hydrate specific interactive components (the "islands"). The rest of the page remains static HTML. - **Nuxt Islands / Server Components**: Render components solely on the server. The server sends no JS payload to the client. - **Benefits**: Drastically reduces bundle size and main thread execution time. ## [Verifying What Google Sees](#verifying-what-google-sees) Even with modern tools, verification is mandatory. **1. URL Inspection (Search Console)** The gold standard. "Test Live URL" to see the rendered HTML and screenshot. Ensure your key content is visible in the HTML tab. **2. Disable JavaScript** Use a browser extension to disable JS. - **SSR/SSG/ISR**: Content remains visible. - **SPA**: Page goes blank (Google _can_ index it, but it's slower). **3. Check Core Web Vitals** Lighthouse or PageSpeed Insights. SSR/Edge Rendering typically scores higher on FCP (First Contentful Paint) and LCP (Largest Contentful Paint) than pure SPAs. ## [Default Recommendation](#default-recommendation) Adopt a **Hybrid First** mindset: 1. Default to **SSG/Prerendering** for all public, non-personalized pages. 2. Use **ISR (SWR)** if content updates frequently but not per-request. 3. Use **SSR (Edge preferred)** only when personalization or real-time data is a strict requirement. 4. Keep **SPA** logic confined to non-SEO routes (auth areas). ## [Using Nuxt?](#using-nuxt) Nuxt is the leader in Vue Hybrid Rendering. You configure this directly in `nuxt.config.ts` using `routeRules`. --- On this page - [The Modern Rendering Spectrum](#the-modern-rendering-spectrum) - [Route Rules Strategy](#route-rules-strategy) - [Partial Hydration & Islands](#partial-hydration-islands) - [Verifying What Google Sees](#verifying-what-google-sees) - [Default Recommendation](#default-recommendation) - [Using Nuxt?](#using-nuxt) [GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP) ### - - Modules - - - - - - - - - ### - - - ### Nuxt - - - - - Vue - - - - - - - - ### - - - - - - - - - - Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)