Server-side rendering với Nuxt bổ sung những gì?

Question

Accepted Answer

**Nuxt** là meta-framework cho Vue (tương đương Next.js cho React). Nó bổ sung **server-side rendering (SSR)**, routing dựa trên file, và khả năng full-stack lên trên Vue — biến Vue từ một thư viện phía client thành một framework ứng dụng hoàn chỉnh. ## Vấn đề cốt lõi SSR giải quyết ```text SPA Vue thuần: server gửi một

rỗng + JS bundle → trình duyệt tải JS, chạy Vue, RỒI mới render nội dung → first paint chậm, và crawler có thể thấy trang trắng (SEO kém) Nuxt SSR: server render đầy đủ HTML và gửi nó sẵn sàng để xem → first paint nhanh, nội dung hiển thị ngay, SEO tốt → Vue sau đó "hydrate" nó để làm cho nó tương tác được ``` SSR nghĩa là server tạo ra HTML hoàn chỉnh cho mỗi request, nên người dùng và công cụ tìm kiếm nhận được nội dung thật ngay lập tức, sau đó Vue tiếp quản (hydration) để có tính tương tác. ## Những gì Nuxt cung cấp ```text ✓ Chế độ render theo từng route: SSR, SSG (tĩnh), ISR, hoặc SPA — bạn chọn ✓ Routing dựa trên file — thư mục pages/ = các route (không cần cấu hình router thủ công) ✓ Auto-import — component/composable được import tự động ✓ Server route / API — server/api/ cho các endpoint backend (full-stack) ✓ Fetch dữ liệu — useFetch / useAsyncData hoạt động trên server VÀ client ✓ Trợ giúp SEO — useHead/useSeoMeta cho các thẻ meta ``` ## Ví dụ routing dựa trên file ```text pages/index.vue → / pages/about.vue → /about pages/users/[id].vue → /users/:id (động) ``` ## Fetch dữ liệu đa nền (universal) ```vue ``` `useFetch`/`useAsyncData` fetch trên server trong lúc SSR (để dữ liệu có trong HTML ban đầu) và tránh fetch hai lần khi hydration — một tiện ích then chốt của Nuxt. ## Sự linh hoạt về chế độ render ```text SSR → HTML mới cho mỗi request (động, cá nhân hóa, SEO) SSG → render trước lúc build (nhanh nhất, cho nội dung chủ yếu tĩnh) Hybrid → chọn theo từng route qua routeRules ``` ## Tại sao điều này quan trọng Nuxt mang đến cho Vue những gì Next.js mang đến cho React: SSR/SSG cho **SEO và first paint nhanh**, routing dựa trên file, một lớp server cho app full-stack, và các quy ước hợp lý (auto-import, fetch dữ liệu đa nền). Với các trang nội dung, thương mại điện tử, hoặc bất cứ thứ gì cần SEO và tải nhanh, một SPA Vue thuần là chưa đủ — server rendering của Nuxt là câu trả lời, trong khi vẫn cho phép bạn chọn chế độ render tối ưu cho từng route.