Nuxt.js Hybrid Rendering Example Project

🚀 A complete Nuxt.js hybrid rendering example project showcasing the practical applications and best practices of SSG, ISR, and SSR rendering modes.

✨ Project Features

🎯 Three Rendering Mode Demos: Complete examples of SSG, ISR, and SSR
🎨 Modern UI Design: Beautiful interface based on Nuxt's official green theme
📱 Responsive Design: Perfect adaptation for desktop and mobile
⚡ Performance Optimization: Performance optimization strategies for different rendering modes
🔧 TypeScript Support: Complete type-safe development experience
📊 Real-time Data Display: Dynamic data and real-time updates on SSR pages
🔄 Incremental Updates: Smart caching and on-demand updates for ISR pages

🏗️ Project Structure

├── app/
│   └── app.vue                 # Application entry point
├── assets/
│   └── css/
│       └── main.css           # Main stylesheet (Nuxt green theme)
├── layouts/
│   └── default.vue            # Default layout
├── pages/
│   ├── index.vue              # Home page (SSG)
│   ├── ssg.vue                # SSG example page
│   ├── isr.vue                # ISR example page
│   └── ssr.vue                # SSR example page
├── server/
│   └── api/
│       ├── ssr-data.ts        # SSR dynamic data API
│       └── isr-content.ts     # ISR content API
├── nuxt.config.ts             # Nuxt configuration (hybrid rendering rules)
└── package.json

🎯 Rendering Mode Comparison

Feature	SSG	ISR	SSR
First Load	⚡ Extremely Fast (<100ms)	🚀 Fast (~120ms)	📊 Medium (~300ms)
Content Freshness	🔄 Requires Rebuild	✅ Auto Update	✅ Real-time
Server Load	✅ None	📉 Low	📈 High
SEO Friendly	✅ Perfect	✅ Perfect	✅ Good
Use Cases	Docs, Corporate	Blog, E-commerce	Dashboard, Social

🚀 Quick Start

Requirements

Node.js 18+
npm / yarn / pnpm

Install Dependencies

# Using npm
npm install

# Using yarn
yarn install

# Using pnpm
pnpm install

Development Environment

Start the development server at http://localhost:3000:

# Using npm
npm run dev

# Using yarn
yarn dev

# Using pnpm
pnpm dev

Production Build

# Build application
npm run build

# Generate static site
npm run generate

# Preview production build
npm run preview

📖 Page Descriptions

🏠 Home Page (/)

Rendering Mode: SSG (Static Site Generation)
Features: Generated at build time, fastest loading speed
Content: Project introduction, tech stack showcase, quick start guide

⚡ SSG Example (/ssg)

Rendering Mode: SSG (Static Site Generation)
Features: Demonstrates SSG principles, performance advantages and configuration methods
Content: Technical principles, performance comparison, use cases, code examples

🔄 ISR Example (/isr)

Rendering Mode: ISR (Incremental Static Regeneration)
Features: Combines advantages of static generation and dynamic updates
Content: Real-time content display, working principles, configuration examples, advantage comparison

🚀 SSR Example (/ssr)

Rendering Mode: SSR (Server-Side Rendering)
Features: Real-time data, dynamic content, personalized experience
Content: Real-time dashboard, user activity, system status, API call demonstrations

⚙️ Configuration

Nuxt Configuration (nuxt.config.ts)

export default defineNuxtConfig({
  // CSS Configuration
  css: ['~/assets/css/main.css'],
  
  // Hybrid Rendering Route Rules
  routeRules: {
    '/': { prerender: true },        // SSG - Home
    '/ssg': { prerender: true },     // SSG - Static Generation
    '/isr': { isr: true },           // ISR - Incremental Static Regeneration
    '/ssr': { ssr: true }            // SSR - Server-Side Rendering
  },
  
  // TypeScript Configuration
  typescript: {
    strict: true,
    typeCheck: true
  }
})

API Routes

`/api/ssr-data` - SSR Dynamic Data

Provides real-time statistics
User activity information
System status monitoring
Regenerated on every request

`/api/isr-content` - ISR Content Data

Article lists
Product information
Statistics data
Periodically updated with smart caching

🎨 Style System

The project uses a complete design system based on Nuxt's official green theme:

Primary Color: #00DC82 (Nuxt Green)
CSS Variables: Unified color, spacing, and shadow system
Responsive Design: Mobile-first layout strategy
Component Styles: Cards, buttons, badges and other common components

📊 Performance Optimization

SSG Optimization

Pre-generate all pages at build time
Static asset CDN distribution
Image lazy loading and optimization
CSS/JS code splitting

ISR Optimization

Smart caching strategies
On-demand regeneration
Background update mechanisms
Cache invalidation control

SSR Optimization

Server-side data prefetching
Client-side hydration optimization
API response caching
Component-level caching

🚀 Deployment Guide

Static Deployment (SSG)

Suitable for Netlify, Vercel, GitHub Pages and other static hosting services:

npm run generate

Server Deployment (Hybrid Rendering)

Suitable for Node.js-supported server environments:

npm run build
npm run preview

🛠️ Tech Stack

Framework: Nuxt.js 4.1.3
Frontend: Vue.js 3.5.22
Language: TypeScript
Build Tool: Vite
Styling: Native CSS + CSS Variables

📚 Learning Resources

🤝 Contributing

Welcome to submit Issues and Pull Requests!

Fork this repository
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

This project is open source under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Nuxt.js - Excellent full-stack Vue framework
Vue.js - Progressive JavaScript framework
All developers who contribute to the open source community

Framework	Nuxt.js
Use Case	Starter

Framework	Nuxt.js
Use Case	Starter