React và Next.js thường bị so sánh như thể là hai lựa chọn ngang hàng, nhưng bản chất chúng khác lớp: React là thư viện UI (view layer) — chỉ lo việc dựng và cập nhật giao diện dựa trên state, không quan tâm routing, data fetching, hay build pipeline. Next.js là framework đầy đủ xây trên React, cung cấp sẵn router, rendering strategy, tối ưu build, và quy ước tổ chức thư mục. Nói "React vs Next.js" thực chất là so sánh "tự ráp mọi thứ quanh React" với "dùng bộ khung đã ráp sẵn".
1. Rendering model — khác biệt gốc rễ
React thuần (tạo bằng Vite, CRA cũ...) mặc định là Client-Side Rendering (CSR): server trả về 1 file HTML gần như rỗng, browser tải JS bundle, React mới chạy và render toàn bộ UI. Trang trắng một khoảng ngắn trước khi nội dung xuất hiện là đặc trưng của CSR.
Next.js hỗ trợ nhiều chiến lược render trong cùng một app, chọn theo từng route: Server-Side Rendering (SSR — render HTML trên server mỗi request), Static Site Generation (SSG — render sẵn lúc build), Incremental Static Regeneration (ISR — SSG nhưng tự làm mới theo chu kỳ), và React Server Components (RSC, từ App Router) — component chạy hẳn trên server, không gửi JS xuống client trừ khi đánh dấu "use client".
// App Router — Server Component (mặc định, không cần khai báo gì thêm)
async function ProductPage({ params }: { params: { id: string } }) {
const product = await db.product.findUnique({ where: { id: params.id } });
return <ProductDetail product={product} />;
}
// Chỉ khi cần state/event/browser API mới cần "use client"
"use client";
function AddToCartButton() {
const [loading, setLoading] = useState(false);
return <button onClick={() => setLoading(true)}>Thêm vào giỏ</button>;
}Với React thuần, để có SSR bạn phải tự ráp: renderToString phía server, hydrate phía client, tự viết logic tách bundle, tự xử lý data fetching trước khi render — đây chính là công việc mà các framework như Next.js đã làm sẵn.
2. Routing
React không có router built-in. Dự án React thường phải cài thêm react-router (hoặc TanStack Router), tự định nghĩa route trong code, tự quản lý nested route, loader, lazy loading.
// react-router — khai báo route thủ công
const router = createBrowserRouter([
{ path: "/", element: <Home /> },
{
path: "/products/:id",
element: <ProductPage />,
loader: async ({ params }) => fetchProduct(params.id),
},
]);Next.js dùng file-based routing: cấu trúc thư mục trong app/ (hoặc pages/ ở Pages Router cũ) tự động ánh xạ thành route, không cần file cấu hình route riêng. Route động dùng ngoặc vuông ([slug]), route group dùng ngoặc đơn ((marketing)), parallel/intercepting route cho các use case phức tạp hơn (modal, dashboard nhiều panel).
app/
page.tsx → /
about/page.tsx → /about
blog/[slug]/page.tsx → /blog/:slug
(marketing)/pricing/page.tsx → /pricing (group, không xuất hiện trong URL)3. Data fetching
Trong React thuần, cách phổ biến là fetch trong useEffect (gây flash nội dung rỗng rồi mới load) hoặc dùng thư viện như TanStack Query để quản lý cache, refetch, loading/error state — TanStack Query gần như là tiêu chuẩn thực tế cho React CSR vì tự viết lại toàn bộ logic cache là không thực tế.
// React CSR + TanStack Query
function ProductPage({ id }: { id: string }) {
const { data, isLoading } = useQuery({
queryKey: ["product", id],
queryFn: () => fetchProduct(id),
});
if (isLoading) return <Spinner />;
return <ProductDetail product={data} />;
}Next.js App Router cho phép await trực tiếp trong Server Component — không cần useEffect, không cần loading state thủ công cho lần render đầu (dùng file loading.tsx cho Suspense boundary tự động). Dữ liệu fetch trên server nên không lộ API key nhạy cảm ra client, và có thể cache/revalidate ở tầng fetch bằng option next: { revalidate }.
4. SEO và hiệu năng tải trang đầu
| Tiêu chí | React CSR | Next.js (SSR/SSG/RSC) |
|---|---|---|
| HTML ban đầu | Gần như rỗng, bot/crawler thấy ít nội dung nếu không render JS | Đầy đủ nội dung ngay trong HTML trả về |
| First Contentful Paint | Phụ thuộc thời gian tải + chạy JS bundle | Nhanh hơn vì HTML đã có sẵn, JS chỉ để hydrate/tương tác |
| Kích thước JS gửi xuống client | Toàn bộ component logic | Chỉ phần có "use client", phần Server Component không gửi JS |
| Cấu hình SEO (meta tag động) | Cần thư viện ngoài (react-helmet) và vẫn phụ thuộc crawler chạy JS | generateMetadata chạy trên server, output thẳng vào HTML |
5. Build & tối ưu
React thuần đi cùng Vite (hoặc Webpack) — nhanh, linh hoạt, nhưng mọi tối ưu (code splitting theo route, image optimization, font optimization, prefetch) đều phải tự cấu hình hoặc cài thêm plugin.
Next.js tích hợp sẵn: next/image tự resize/tối ưu định dạng ảnh theo thiết bị, next/font tự tải và inline font để tránh layout shift, code splitting tự động theo route, prefetch route khi Link xuất hiện trong viewport. Đây là những thứ một team tự dùng React thuần thường phải dành nhiều thời gian tự dựng.
6. Deploy
React CSR build ra thư mục static (HTML/CSS/JS) — deploy được ở bất kỳ nơi nào phục vụ file tĩnh: S3+CloudFront, Netlify, GitHub Pages, Nginx tự host. Không cần server chạy Node.js.
Next.js có nhiều chế độ deploy: output: "export" để build static y hệt React CSR (nhưng mất SSR/ISR/Server Component thật sự, vì lúc đó mọi thứ đều phải render tĩnh lúc build — đây chính là cách blog này đang deploy lên S3+CloudFront). Ngược lại, nếu deploy dạng server (Vercel, hoặc self-host Node server), Next.js phát huy đầy đủ SSR/ISR/Server Actions nhưng bắt buộc phải có runtime Node.js chạy liên tục, không còn là "chỉ file tĩnh" nữa.
7. Vậy khi nào chọn cái nào
- Chọn React thuần (+ Vite) khi: xây dashboard/app nội bộ sau login (không cần SEO), app Electron/mobile-webview, thư viện component để nhúng vào hệ thống khác, hoặc team đã có sẵn kiến trúc riêng (module federation, custom SSR) không muốn bị ràng buộc theo quy ước của Next.js.
- Chọn Next.js khi: cần SEO tốt (landing page, blog, e-commerce), muốn giảm thời gian tự dựng hạ tầng (routing, image/font optimization, data fetching pattern), hoặc cần trộn nhiều chiến lược render trong cùng 1 app (trang chủ SSG, trang giỏ hàng CSR, trang sản phẩm ISR).
- Cân nhắc thêm: Next.js đi kèm độ phức tạp khái niệm cao hơn (Server vs Client Component, khi nào cache, khi nào revalidate) — với dự án nhỏ, đôi khi React + Vite + React Router đơn giản và dễ debug hơn nhiều.
Kết luận ngắn gọn: không có cái nào "tốt hơn" tuyệt đối — React là nền tảng, Next.js là một cách đóng gói nền tảng đó kèm theo rất nhiều quyết định kiến trúc đã được đưa ra sẵn. Vấn đề thực sự cần trả lời không phải "React hay Next.js" mà là "dự án của mình có cần SSR/SEO/tối ưu tải trang đầu đến mức đáng đánh đổi độ phức tạp thêm vào không".