---
title: "Rendering Modes: Hybrid, SSR, SSG & Edge"
description: "Master Hybrid Rendering, ISR, and Edge Rendering for optimal Vue SEO in 2026."
canonical_url: "https://nuxtseo.com/learn-seo/vue/routes-and-rendering/rendering"
last_updated: "2026-01-29"
---

<key-takeaways>

- **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

</key-takeaways>

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

### 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)

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)

**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)

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)

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

In modern frameworks (especially Nuxt 4), you control this via **Route Rules**. Map your content volatility to the rendering mode:

<table>
<thead>
  <tr>
    <th>
      Content Type
    </th>
    
    <th>
      Volatility
    </th>
    
    <th>
      Recommended Mode
    </th>
    
    <th>
      Strategy
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Homepage
      </strong>
    </td>
    
    <td>
      Low
    </td>
    
    <td>
      <strong>
        SSG / Prerender
      </strong>
    </td>
    
    <td>
      Cache heavily, rebuild on deploy
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Blog Post
      </strong>
    </td>
    
    <td>
      Medium
    </td>
    
    <td>
      <strong>
        ISR / SWR
      </strong>
    </td>
    
    <td>
      Static first, revalidate every hour (<code>
        swr: 3600
      </code>
      
      )
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Pricing
      </strong>
    </td>
    
    <td>
      Low
    </td>
    
    <td>
      <strong>
        SSG
      </strong>
    </td>
    
    <td>
      Critical for speed/conversion
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        User Profile
      </strong>
    </td>
    
    <td>
      High
    </td>
    
    <td>
      <strong>
        SSR / Edge
      </strong>
    </td>
    
    <td>
      Dynamic, fetch fresh data on request
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Admin
      </strong>
    </td>
    
    <td>
      N/A
    </td>
    
    <td>
      <strong>
        SPA
      </strong>
    </td>
    
    <td>
      SEO irrelevant, focus on UX
    </td>
  </tr>
</tbody>
</table>

## 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

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

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?

Nuxt is the leader in Vue Hybrid Rendering. You configure this directly in `nuxt.config.ts` using `routeRules`.

[Learn more in Nuxt →](/learn-seo/nuxt/routes-and-rendering/rendering)