Nuxt 3: SSR và sinh trang tĩnh, hướng dẫn đầy đủ

// Cấu hình các chế độ render khác nhau
export default defineNuxtConfig({
  // SSR bật mặc định (khuyến nghị cho SEO)
  ssr: true,

  // Sinh trang tĩnh: render trước tất cả các trang
  // Sử dụng 'npm run generate' để build
  // target: 'static', // Cú pháp Nuxt 2

  // Chế độ lai: cấu hình theo từng route
  routeRules: {
    // Trang chủ: render trước và đưa vào cache
    '/': { prerender: true },
    // Blog: sinh trang tĩnh
    '/blog/**': { prerender: true },
    // Dashboard: chỉ render phía client
    '/dashboard/**': { ssr: false },
    // API: không pre-render
    '/api/**': { prerender: false }
  }
})

<script setup lang="ts">
// pages/blog/[slug].vue
// Trang chi tiết bài viết với useFetch

// Lấy tham số route
const route = useRoute()

// useFetch: lấy dữ liệu tự động
// Dữ liệu được lấy ở phía máy chủ rồi hydrat hóa ở phía client
const { data: article, pending, error } = await useFetch(
  `/api/articles/${route.params.slug}`,
  {
    // Khóa duy nhất cho cache và khử trùng lặp
    key: `article-${route.params.slug}`,
    // Biến đổi dữ liệu nếu cần
    transform: (response) => response.data,
    // Tùy chọn cache
    getCachedData: (key) => {
      // Kiểm tra dữ liệu có trong cache không
      const nuxtApp = useNuxtApp()
      return nuxtApp.payload.data[key]
    }
  }
)

// Xử lý lỗi với điều hướng
if (error.value) {
  throw createError({
    statusCode: 404,
    message: 'Không tìm thấy bài viết'
  })
}
</script>

<template>
  <div>
    <div v-if="pending" class="loading">
      Đang tải bài viết...
    </div>
    <article v-else-if="article">
      <h1>{{ article.title }}</h1>
      <div v-html="article.content" />
    </article>
  </div>
</template>

<script setup lang="ts">
// pages/products/index.vue
// Danh sách sản phẩm với useAsyncData và bộ lọc

const route = useRoute()

// useAsyncData: kiểm soát hoàn toàn logic fetching
const { data: products, refresh } = await useAsyncData(
  'products-list',
  async () => {
    // Lấy từ nhiều nguồn nếu cần
    const [productsResponse, categoriesResponse] = await Promise.all([
      $fetch('/api/products', {
        query: {
          category: route.query.category,
          sort: route.query.sort || 'date'
        }
      }),
      $fetch('/api/categories')
    ])

    // Kết hợp và biến đổi dữ liệu
    return {
      products: productsResponse.data,
      categories: categoriesResponse.data,
      total: productsResponse.meta.total
    }
  },
  {
    // Làm mới khi query params thay đổi
    watch: [() => route.query]
  }
)

// Hàm làm mới thủ công
const updateFilters = async (newCategory: string) => {
  await navigateTo({
    query: { ...route.query, category: newCategory }
  })
}
</script>

// Plugin máy chủ để tùy chỉnh quá trình render SSR

export default defineNitroPlugin((nitroApp) => {
  // Hook được thực thi trước khi render mỗi trang
  nitroApp.hooks.hook('render:html', (html, { event }) => {
    // Chèn script hoặc metadata
    html.head.push(`
      <script>
        // Phân tích hoặc cấu hình toàn cục
        window.__APP_CONFIG__ = {
          environment: '${process.env.NODE_ENV}',
          apiUrl: '${process.env.API_URL}'
        }
      </script>
    `)
  })

  // Hook quản lý cache render
  nitroApp.hooks.hook('render:response', (response, { event }) => {
    // Thêm header cache tùy chỉnh
    const path = event.path

    if (path.startsWith('/blog/')) {
      // Cache dài cho bài viết blog
      response.headers['Cache-Control'] = 'public, max-age=3600, s-maxage=86400'
    } else if (path.startsWith('/api/')) {
      // Không cache cho API
      response.headers['Cache-Control'] = 'no-store'
    }
  })
})

// Cấu hình đầy đủ cho sinh trang tĩnh

export default defineNuxtConfig({
  // Bật sinh trang tĩnh
  nitro: {
    prerender: {
      // Bật quét link tự động
      crawlLinks: true,
      // Các route luôn cần đưa vào
      routes: ['/', '/about', '/contact'],
      // Bỏ qua một số route
      ignore: ['/admin', '/api']
    }
  },

  hooks: {
    // Hook để sinh các route động
    async 'prerender:routes'(ctx) {
      // Lấy bài viết từ API hoặc DB
      const articles = await fetch('https://api.example.com/articles')
        .then(res => res.json())

      // Thêm các route bài viết
      for (const article of articles) {
        ctx.routes.add(`/blog/${article.slug}`)
      }

      // Lấy danh mục
      const categories = await fetch('https://api.example.com/categories')
        .then(res => res.json())

      for (const category of categories) {
        ctx.routes.add(`/category/${category.slug}`)
      }
    }
  }
})

// Tiện ích sinh danh sách route động

import { prisma } from './prisma'

export async function getAllStaticRoutes(): Promise<string[]> {
  const routes: string[] = []

  // Bài viết blog
  const articles = await prisma.article.findMany({
    where: { published: true },
    select: { slug: true, category: { select: { slug: true } } }
  })

  for (const article of articles) {
    routes.push(`/blog/${article.category.slug}/${article.slug}`)
  }

  // Trang sản phẩm
  const products = await prisma.product.findMany({
    where: { active: true },
    select: { slug: true }
  })

  for (const product of products) {
    routes.push(`/products/${product.slug}`)
  }

  // Trang tag
  const tags = await prisma.tag.findMany({
    select: { slug: true }
  })

  for (const tag of tags) {
    routes.push(`/tags/${tag.slug}`)
  }

  return routes
}

// Cấu hình nâng cao cho render lai

export default defineNuxtConfig({
  routeRules: {
    // Trang marketing: render trước và cache lâu dài
    '/': { prerender: true },
    '/pricing': { prerender: true },
    '/features/**': { prerender: true },

    // Blog: ISR (Incremental Static Regeneration)
    // Tái xác thực mỗi giờ
    '/blog/**': {
      isr: 3600,
      prerender: true
    },

    // Tài liệu: cache CDN với tái xác thực
    '/docs/**': {
      swr: 86400, // Stale-while-revalidate
      prerender: true
    },

    // E-commerce: SSR với cache ngắn
    '/products/**': {
      ssr: true,
      cache: {
        maxAge: 60,
        staleMaxAge: 300
      }
    },

    // Giỏ hàng và thanh toán: chỉ phía client
    '/cart': { ssr: false },
    '/checkout/**': { ssr: false },

    // Dashboard: chế độ SPA
    '/dashboard/**': {
      ssr: false,
      // Tắt pre-render
      prerender: false
    },

    // Route API: không cache mặc định
    '/api/**': {
      cors: true,
      headers: {
        'Access-Control-Allow-Methods': 'GET,POST,PUT,DELETE'
      }
    }
  }
})

// Endpoint API có cache dữ liệu

import { getArticleBySlug } from '~/server/utils/articles'

export default defineCachedEventHandler(
  async (event) => {
    const slug = getRouterParam(event, 'slug')

    if (!slug) {
      throw createError({
        statusCode: 400,
        message: 'Thiếu slug'
      })
    }

    const article = await getArticleBySlug(slug)

    if (!article) {
      throw createError({
        statusCode: 404,
        message: 'Không tìm thấy bài viết'
      })
    }

    return article
  },
  {
    // Khóa cache dựa trên slug
    getKey: (event) => `article-${getRouterParam(event, 'slug')}`,
    // Thời gian cache: 1 giờ
    maxAge: 3600,
    // Stale-while-revalidate: phục vụ cache cũ trong khi cập nhật
    staleMaxAge: 7200,
    // Vô hiệu hóa cache theo tag
    tags: ['articles']
  }
)

// Cập nhật bài viết kèm vô hiệu hóa cache

import { updateArticle } from '~/server/utils/articles'

export default defineEventHandler(async (event) => {
  const slug = getRouterParam(event, 'slug')
  const body = await readBody(event)

  // Cập nhật bài viết
  const article = await updateArticle(slug, body)

  // Vô hiệu hóa cache cho bài viết này
  await useStorage('cache').removeItem(`nitro:handlers:article-${slug}`)

  // Hoặc vô hiệu hóa theo tag (toàn bộ bài viết)
  // await useStorage('cache').clear('articles')

  return article
})

<script setup lang="ts">
// pages/blog/[slug].vue
// Trang blog với SEO được tối ưu

const route = useRoute()

const { data: article } = await useFetch(`/api/articles/${route.params.slug}`)

// Cấu hình SEO động dựa trên bài viết
useSeoMeta({
  title: article.value?.title,
  description: article.value?.excerpt,
  ogTitle: article.value?.title,
  ogDescription: article.value?.excerpt,
  ogImage: article.value?.coverImage,
  ogType: 'article',
  twitterCard: 'summary_large_image',
  twitterTitle: article.value?.title,
  twitterDescription: article.value?.excerpt,
  twitterImage: article.value?.coverImage
})

// Dữ liệu có cấu trúc cho Google
useHead({
  script: [
    {
      type: 'application/ld+json',
      innerHTML: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'Article',
        headline: article.value?.title,
        description: article.value?.excerpt,
        image: article.value?.coverImage,
        datePublished: article.value?.publishedAt,
        dateModified: article.value?.updatedAt,
        author: {
          '@type': 'Organization',
          name: 'SharpSkill'
        }
      })
    }
  ]
})
</script>

<script setup lang="ts">
// pages/about.vue
// Trang tĩnh với SEO

definePageMeta({
  title: 'Giới thiệu'
})

useSeoMeta({
  title: 'Giới thiệu SharpSkill | Chuẩn bị phỏng vấn kỹ thuật',
  description: 'Khám phá SharpSkill, nền tảng chuẩn bị phỏng vấn kỹ thuật. Sứ mệnh: giúp các nhà phát triển thành công trong các buổi phỏng vấn kỹ thuật.',
  ogTitle: 'Giới thiệu SharpSkill',
  ogDescription: 'Nền tảng chuẩn bị phỏng vấn kỹ thuật',
  ogImage: '/images/og-about.webp'
})
</script>

// Cấu hình cho các môi trường triển khai khác nhau

export default defineNuxtConfig({
  nitro: {
    // Preset theo nền tảng đích
    // preset: 'vercel', // Vercel
    // preset: 'netlify', // Netlify
    // preset: 'cloudflare-pages', // Cloudflare
    // preset: 'node-server', // Node.js cổ điển

    // Cấu hình cho Node.js trong môi trường sản xuất
    preset: 'node-server',

    // Nén phản hồi
    compressPublicAssets: true,

    // Cấu hình kho lưu trữ cache
    storage: {
      cache: {
        driver: 'redis',
        url: process.env.REDIS_URL
      }
    }
  },

  // Biến môi trường runtime
  runtimeConfig: {
    // Bí mật (không được lộ ra phía client)
    apiSecret: process.env.API_SECRET,
    // Cấu hình công khai
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
    }
  }
})

# Sinh trang tĩnh
npm run generate

# Nội dung của .output/public có thể được triển khai trên:
# - Vercel (tự động phát hiện)
# - Netlify (tự động cấu hình)
# - GitHub Pages
# - S3 + CloudFront
# - Bất kỳ CDN hoặc máy chủ file tĩnh nào