Introduction to Nuxt 3 and the Concept of SSR

Charlie is selecting a tech stack for his e-commerce platform, MegaShop—with millions of product pages, he needs top-notch SEO, and the page must load quickly on the first screen. Traditional CSR solutions prevent search engines from crawling product data, resulting in dismal traffic. Nuxt 3's SSR capabilities are exactly what he needs.

1. What You'll Learn

• The Relationship and Positioning of Nuxt 3 and Vue 3
• Comparison of the Five Rendering Modes: SSR, CSR, SSG, ISR, and ESR
• Components of the Nuxt 3 Core Architecture
• Why Must MegaShop Choose SSR for Its Million-Level Product Pages?
• An Overview of the Nuxt 3 Ecosystem and Module Marketplace

2. A True Story of an Architect

(1) Pain Point: CSR Makes Millions of Product Pages "Invisible"

Charlie's MegaShop has over 1 million product pages, but after switching to pure CSR (client-side rendering), Google's crawler could only retrieve an empty <div id="app"></div>—with product titles, prices, and descriptions all missing. SEO rankings plummeted to page 5; Alice (the consumer) couldn't find the products at all, and Bob (the administrator) was worried about the near-zero organic traffic.

(2) Solutions for Nuxt 3 SSR

Nuxt 3 server-sidesrenders HTML, so crawlers receive the complete product page—complete with the title, price, and structured data. Charlie just needs to create a project, and SSR is ready to go right out of the box:

# Create Nuxt 3 project with SSR enabled by default
npx nuxi@latest init megashop

(3) Benefits: A Surge in SEO Traffic

After switching to Nuxt 3 SSR, MegaShop's Google index pages surged from 2,000 to 800,000, organic traffic grew by 340%, and above-the-fold load time dropped from 4.2 seconds to 1.1 seconds.

3. The Relationship Between Nuxt 3 and Vue 3

Nuxt 3 is a full-stack framework based on Vue 3, led by Sébastien Chopin, a member of the Vue core team.

(1) Positioning Comparison

(2) The Core Value of Nuxt 3

• Zero-Configuration SSR: Server-side rendering that's ready to use right out of the box
• File Conventions: Directories are routes; components are imports
• Full-Stack Capabilities: Integrated front-end, API, and storage
• Mixed Rendering: Each route can be configured with its own rendering strategy
• Type Safety: End-to-end TypeScript type inference

4. Comparison of Five Rendering Modes

(1) Panoramic View of Rendering Modes

flowchart TB
    A[User Request] --> B{Rendering Mode}
    B -->|SSR| C[Server renders HTML<br/>on every request]
    B -->|CSR| D[Browser renders HTML<br/>after JS download]
    B -->|SSG| E[HTML pre-built<br/>at build time]
    B -->|ISR| F[HTML cached +<br/>revalidate on interval]
    B -->|ESR| G[Edge CDN renders<br/>closest to user]
    C --> H[Full HTML response]
    D --> I[Empty shell + JS bundle]
    E --> H
    F --> H
    G --> H

flowchart TB
    A[User Request] --> B{Rendering Mode}
    B -->|SSR| C[Server renders HTML<br/>on every request]
    B -->|CSR| D[Browser renders HTML<br/>after JS download]
    B -->|SSG| E[HTML pre-built<br/>at build time]
    B -->|ISR| F[HTML cached +<br/>revalidate on interval]
    B -->|ESR| G[Edge CDN renders<br/>closest to user]
    C --> H[Full HTML response]
    D --> I[Empty shell + JS bundle]
    E --> H
    F --> H
    G --> H

(2) Key Comparisons of the Five Models

(3) A Detailed Explanation of the SSR Workflow

SSR (Server-Side Rendering) is the default rendering mode in Nuxt 3. The core process is as follows:

1. User Request URL
2. Rendering Vue Components on the Nuxt Server-Side
3. Generate a complete HTML string
4. Send HTML to the browser
5. Browser display page (visible on the first screen)
6. Download the JS file, "hydrate" it, and bind events

(1) ▶ Example: Comparison of SSR and CSR Responses

<!-- SSR response: full HTML with content -->
<div id="app">
  <h1>MegaShop - Premium Headphones</h1>
  <p>Price: $299.99 USD</p>
  <p>1.2 thousand reviews</p>
</div>

<!-- CSR response: empty shell -->
<div id="app"></div>
<script src="/bundle.js"></script>

Output:

// Execution Successful

(2) ▶ Example: Nuxt 3 SSR Page

<!-- pages/index.vue -->
<template>
  <div>
    <h1>{{ product.name }}</h1>
    <p>Price: ${{ product.price }} USD</p>
  </div>
</template>

<script setup lang="ts">
// Data fetched on server, included in HTML response
const { data: product } = await useFetch('/api/products/featured')
</script>

Output:

// Execution Successful

(3) ▶ Example: CSR Mode Page

<!-- pages/dashboard.vue - client-only page -->
<template>
  <div>
    <h1>Admin Dashboard</h1>
    <p>Welcome, Bob</p>
  </div>
</template>

<script setup lang="ts">
// Force client-side rendering
definePageMeta({
  ssr: false
})

const { data: stats } = await useFetch('/api/admin/stats')
</script>

Output:

// Execution Successful

5. Nuxt 3 Core Architecture

(1) Architecture Components

graph TB
    A[Nuxt 3] --> B[Vite - Build Tool]
    A --> C[Vue 3 - UI Framework]
    A --> D[Nitro - Server Engine]
    A --> E[Auto-imports System]
    D --> F[H3 - HTTP Framework]
    D --> G[Storage Layer]
    D --> H[Cache API]
    E --> I[Components]
    E --> J[Composables]
    E --> K[Utilities]

graph TB
    A[Nuxt 3] --> B[Vite - Build Tool]
    A --> C[Vue 3 - UI Framework]
    A --> D[Nitro - Server Engine]
    A --> E[Auto-imports System]
    D --> F[H3 - HTTP Framework]
    D --> G[Storage Layer]
    D --> H[Cache API]
    E --> I[Components]
    E --> J[Composables]
    E --> K[Utilities]

(2) Core Module Responsibilities

(1) ▶ Example: How Auto-imports Work

<!-- No manual imports needed -->
<template>
  <div>
    <ProductCard :product="item" />
    <!-- ProductCard auto-imported from components/ -->
  </div>
</template>

<script setup lang="ts">
// useFetch, useState, useRouter - all auto-imported
const { data: item } = await useFetch('/api/products/1')
const router = useRouter()
const cart = useState('cart', () => [])
</script>

Output:

// Execution Successful

(2) ▶ Example: Nitro API Route

// server/api/products/index.ts
export default defineEventHandler(async (event) => {
  const query = getQuery(event)
  const page = Number(query.page) || 1
  const limit = Number(query.limit) || 20

  // Fetch products with pagination
  const products = await fetchProducts(page, limit)

  return {
    items: products,
    total: 1000000, // 1 million products
    page,
    limit
  }
})

Output:

// Execution Successful

6. MegaShop Scenario Analysis

(1) Why Must Product Pages with Millions of Items Use SSR?

(1) ▶ Example: MegaShop Product Page SSR Output

<!-- Server-rendered HTML for /products/headphones-123 -->
<!DOCTYPE html>
<html>
<head>
  <title>Premium Headphones - MegaShop</title>
  <meta name="description" content="Premium wireless headphones, $299.99 USD">
  <script type="application/ld+json">
  {
    "@type": "Product",
    "name": "Premium Headphones",
    "price": "299.99",
    "priceCurrency": "USD",
    "aggregateRating": { "ratingValue": "4.8", "reviewCount": "1200" }
  }
  </script>
</head>
<body>
  <div id="app">
    <h1>Premium Headphones</h1>
    <p>$299.99 USD</p>
    <p>1.2 thousand reviews · 4.8 stars</p>
  </div>
</body>
</html>

Output:

// Execution Successful

7. An Overview of the Nuxt 3 Ecosystem

(1) Official Module Ecosystem

(2) Community Size

• GitHub Stars: 50,000+
• Weekly downloads on npm: 500,000+
• Official modules: 20+
• Community modules: 300+
• Discord members: 15,000+

(1) ▶ Example: Installing an Official Module

# Install Tailwind CSS module
npm install @nuxtjs/tailwindcss

# Install Pinia state management
npm install @pinia/nuxt

# Install i18n module
npm install @nuxtjs/i18n

Output:

# Command executed successfully

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss',
    '@pinia/nuxt',
    '@nuxtjs/i18n'
  ]
})

8. Comprehensive Example: MegaShop SSR Product Page

<!-- pages/products/[id].vue -->
<template>
  <div class="product-page">
    <h1>{{ product?.name }}</h1>
    <p class="price">${{ product?.price }} USD</p>
    <p>{{ product?.reviewCount }} reviews</p>
    <button @click="addToCart(product)">
      Add to Cart
    </button>
  </div>
</template>

<script setup lang="ts">
interface Product {
  id: number
  name: string
  price: number
  reviewCount: number
}

// SSR: data fetched on server, included in initial HTML
const route = useRoute()
const { data: product } = await useFetch<Product>(`/api/products/${route.params.id}`)

// SEO metadata
useHead({
  title: `${product.value?.name} - MegaShop`,
  meta: [
    { name: 'description', content: `Buy ${product.value?.name} for $${product.value?.price} USD` }
  ]
})

const cart = useState<Product[]>('cart', () => [])
function addToCart(item: Product | null) {
  if (item) cart.value.push(item)
}
</script>

❓ FAQ

📖 Summary

• Nuxt 3 is a full-stack meta-framework based on Vue 3 and Vite that supports hybrid rendering with SSR, CSR, SSG, ISR, and ESR.
• SSR renders HTML on the server side, is SEO-friendly, loads the first screen quickly, and is suitable for pages such as product pages that need to be indexed by search engines
• CSR renders on the client side, making it suitable for pages such as the admin panel that do not require SEO
• Nuxt 3 Core Architecture: Vite + Vue 3 + Nitro + Auto-imports
• For MegaShop product pages with millions of items, SSR must be used to ensure Google indexing rates and above-the-fold loading speed
• Nuxt 3 has a rich ecosystem, with official modules covering key needs such as Tailwind, i18n, Sitemap, and Pinia.

📝 Exercises

1. Basic Exercise (Difficulty: ⭐): Use npx nuxi@latest init to create a Nuxt 3 project and check whether SSR is enabled in the default configuration.
2. Advanced Exercise (Difficulty: ⭐⭐): Use useFetch on the project homepage to retrieve data from a public API, then check whether the data is included in the browser's "View Source" (to verify SSR).
3. Challenge (Difficulty: ⭐⭐⭐): Create a page using the CSR mode (definePageMeta({ ssr: false })) and compare the differences between it and an SSR page when viewing the source code.

---|

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us