Yêu cầu kiến thức nền tảng:

Khái niệm SSR và SPA

• SSR (Server Side Rendering): Xử lý render giao diện tại server trước khi gửi về client
• SPA (Single Page Application): Ứng dụng chạy hoàn toàn tại client

SSR giải quyết hai vấn đề chính của SPA:

• Tối ưu công cụ tìm kiếm (SEO) nhờ nội dung được render đầy đủ ngay lần đầu
• Giảm thời gian hiển thị nội dung (Time-to-Content) trên thiết bị yếu hoặc mạng chậm

Điểm hạn chế của SSR:

• Phải xử lý phức tạp hơn với lifecycle hooks
• Tăng tải cho server và yêu cầu build phức tạp hơn

Giới thiệu Nuxt.js

Nuxt.js là framework Vue.js tích hợp SSR sẵn sàng sử dụng, tự động hóa cấu trúc dự án với:

• Webpack cho build frontend
• Node.js cho server side

Hướng dẫn cài đặt

1. Cài đặt Vue CLI (nếu chưa có)
2. Tạo dự án bằng lệnh:

   vue init nuxt/starter duan-nuxt

3. Cài đặt dependencies:

   cd duan-nuxt && npm install

4. Khởi động server:

   npm run dev

Cấu trúc dự án tiêu chuẩn

• assets/: Tài nguyên cần xử lý qua Webpack như SCSS, hình ảnh, font chữ
• components/: Component có thể tái sử dụng
• layouts/: Giao diện chung chứa tag <nuxt/>
• pages/: Tự động sinh route dựa trên cấu trúc thư mục
• store/: Quản lý trạng thái với Vuex tích hợp sẵn

Cấu hình nâng cao qua nuxt.config.js

Các nhóm cấu hình chính:

export default {
  build: { /* Cấu hình Webpack */ },
  router: { /* Tùy biến vue-router */ },
  head: { /* Quản lý meta tags */ },
  loading: { /* Thanh tiến trình */ }
}

Thay đổi host và port trong package.json:

{
  "config": {
    "nuxt": {
      "host": "0.0.0.0",
      "port": "3000"
    }
  }
}

Quản lý route

Cấu trúc thư mục pages/ tự động sinh route:

-- pages/
  -- tin-tuc/
    -- index.vue
    -- _maTin.vue
  -- lien-he.vue

Tạo route động bằng file bắt đầu với _:

// Trong _maTin.vue
export default {
  validate({ params }) {
    // Chỉ cho phép tham số số
    return /^\d+$/.test(params.maTin)
  }
}

Thiết kế giao diện chung

Tệp layouts/default.vue quy định giao diện tổng thể. Lưu ý:

• Không đặt meta tag trong layout
• Chỉ chứa phần nội dung lặp lại giữa các trang