Vue.js: SSR/SSG و Nuxt

Traditional Vue SPA(CSR):
  1. Browser Request → Returns null HTML(<div id="app"></div>)
  2. Download JS(500KB)
  3. Execute JS(Vue Start)
  4. Rendered Content
  5. Users view the content
  
  Time to First View: 3-5s
  SEO:Google Can't find the content(spa The content is JS Rendered)

Nuxt 3 SSR:
  1. Browser Request → Server-Side Rendering Complete HTML
  2. Return with content HTML (Home Page 0.5s)
  3. Download JS(hydration Required)
  4. Client"Activate"(Take Over Interaction)
  
  Time to First View: 0.5s
  SEO:✅ Perfect(HTML Contents)

// server/api/products.js(Nuxt 3 Automatic Routing)
export default defineEventHandler(async (event) => {
  return await $fetch('https://api.example.com/products')
})

<!-- pages/products.vue(Automatic Routing) -->
<template>
  <div>
    <ProductCard v-for="product in products" :key="product.id" :product="product" />
  </div>
</template>

<script setup lang="ts">
// useFetch Prefetching Data on the Server Side
const { data: products } = await useFetch('/api/products')
</script>

npx nuxi@latest init my-nuxt-app
cd my-nuxt-app
npm install
npm run dev  # Default http://localhost:3000

my-nuxt-app/
├-- assets/              # Resources(Image,Font)
│   └-- css/
│       └-- main.css
├-- components/          # Public Components
│   ├-- AppHeader.vue
│   └-- AppFooter.vue
│   └-- product/
│       └-- ProductCard.vue  # Automatic Registration of Nested Directories
├-- composables/         # Composite Functions
│   └-- useAuth.ts
├-- layouts/             # Layout
│   ├-- default.vue      # Default Layout
│   └-- admin.vue        # Backend Layout
├-- middleware/          # Routing Middleware
│   └-- auth.ts
├-- pages/               # File Routing(Automatically Generated)
│   ├-- index.vue        # /
│   ├-- about.vue       # /about
│   ├-- products/
│   │   ├-- index.vue    # /products
│   │   └-- [id].vue     # /products/:id
│   └-- admin/
│       └-- index.vue    # /admin
├-- plugins/             # Nuxt Plugins
│   └-- pinia.ts
├-- public/              # Static Resources
├-- server/              # Server-side code
│   ├-- api/             # API Routing(Automatic Registration)
│   │   └-- products.ts  # /api/products
│   └-- middleware/      # Server-Side Middleware
├-- stores/              # Pinia stores
├-- app.vue              # Root Component
├-- nuxt.config.ts       # Nuxt Layout
└-- package.json

pages/index.vue           → /
pages/about.vue          → /about
pages/products/index.vue → /products
pages/products/[id].vue  → /products/:id
pages/admin/index.vue    → /admin

<script setup lang="ts">
// useFetch: SSR when server executes, CSR when cliente runs
const { data, pending, erro, refresh } = await useFetch('/api/products')

// 5 Large Return Values
// data: Response Data
// pending: Loading...
// erro: Error Message
// refresh: How to Retrieve It Again
// status: Status Code
</script>

<script setup lang="ts">
const { data } = await useAsyncData('products', () => 
  $fetch('/api/products')
)

// Options: Cache, Dependency, Convert
const { data: users } = await useAsyncData(
  'users',
  () => $fetch('/api/users'),
  {
    cache: 'force-cache',  // Force Caching
    default: () => []      // Default value
  }
)
</script>

<script setup lang="ts">
// useState Replace ref(SSR Friendly)
const cart = useState('cart', () => ({ items: [], total: 0 }))

// Edit
cart.value.items.push(product)
</script>

// 1. useFetch:Server-Side Data Prefetching
const { data } = await useFetch('/api/products')

// 2. useAsyncData:Generic Asynchronous
const { data } = await useAsyncData('key', fetcher)

// 3. useState:Global State(SSR Friendly)
const user = useState('user', () => null)

// 4. useRoute:Current Route
const route = useRoute()

// 5. useRuntimeConfig:Runtime Configuration
const config = useRuntimeConfig()

export default defineNuxtConfig({
  // 1. Module
  modules: [
    '@nuxtjs/tailwindcss',
    '@pinia/nuxt',
    '@vueuse/nuxt'
  ],
  
  // 2. CSS
  css: ['~/assets/css/main.css'],
  
  // 3. Runtime Configuration
  runtimeConfig: {
    apiSecret: 'xxx',  // Server-side
    public: {
      apiBase: 'https://api.example.com'  // Client
    }
  },
  
  // 4. Rendering Mode
  ssr: true,  // Enable SSR
  
  // 5. Application Configuration
  app: {
    head: {
      title: 'My App',
      meta: [
        { name: 'description', content: 'My app description' }
      ]
    }
  }
})

<script setup lang="ts">
// ✅ Nuxt Automatic Import:
// - Vue 3 API(ref, computed, watch)
// - Nuxt 3 composables(useFetch, useState)
// - Components(components/ Table of Contents)
// - utils/ Table of Contents

const count = ref(0)
const { data } = await useFetch('/api/products')
</script>

<script setup lang="ts">
useHead({
  title: 'iPhone 15 Pro - My Shop',
  meta: [
    { name: 'description', content: 'Buy iPhone 15 Pro at best price' },
    { property: 'og:title', content: 'iPhone 15 Pro' },
    { property: 'og:image', content: '/iphone.jpg' }
  ]
})
</script>

my-nuxt-app/
├-- pages/           # File Routing
├-- components/      # Automatic Registration
├-- composables/     # Automatic Import
├-- server/api/      # API Routing
├-- server/middleware/
├-- middleware/      # Client-side middleware
├-- plugins/         # Nuxt Plugins
├-- layouts/         # Layout
└-- nuxt.config.ts

modules: [
  '@nuxtjs/tailwindcss',  // Tailwind Integration
  '@pinia/nuxt',          // Pinia Status
  '@vueuse/nuxt',         // VueUse
  '@nuxt/image',          // Image Optimization
  'nuxt-icon'             // Icon
]