React 19 và Next.js 15: Server Components thay đổi cách phát triển web 2026

// Server Component trong React 19 - chạy 100% trên server
async function SanPhamNoiBat() {
  // Truy vấn database trực tiếp, không cần API route
  const products = await db.query(`
    SELECT * FROM products 
    WHERE featured = true 
    ORDER BY sold DESC 
    LIMIT 6
  `);

  return (
    <div className="grid grid-cols-3 gap-4">
      {products.map(p => (
        <CardSanPham key={p.id} data={p} />
      ))}
    </div>
  );
}

// Client Component cho phần tương tác
'use client';
function CardSanPham({ data }) {
  const [liked, setLiked] = useState(false);
  
  return (
    <div className="card">
      <img src={data.image} alt={data.name} />
      <h3>{data.name}</h3>
      <button onClick={() => setLiked(!liked)}>
        {liked ? '❤️' : '🤍'}
      </button>
    </div>
  );
}

// app/san-pham/[id]/page.js
import { Suspense } from 'react';

export default function PageChiTiet({ params }) {
  return (
    <div>
      {/* Phần static - prerender sẵn */}
      <Header />
      <ThongTinSanPham id={params.id} />
      
      {/* Phần dynamic - stream sau */}
      <Suspense fallback={<SkeletonBinhLuan />}>
        <DanhSachBinhLuan id={params.id} />
      </Suspense>
      
      <Suspense fallback={<SkeletonGoiY />}>
        <SanPhamGoiY userId={getCurrentUser()} />
      </Suspense>
    </div>
  );
}

// Server Component - fetch real-time
async function DanhSachBinhLuan({ id }) {
  const comments = await db.binhLuan.findMany({
    where: { sanPhamId: id },
    orderBy: { createdAt: 'desc' }
  });
  
  return comments.map(c => <ItemBinhLuan key={c.id} data={c} />);
}

// app/actions.js
'use server';

export async function themVaoGio(formData) {
  const productId = formData.get('productId');
  const userId = await auth.getUserId();
  
  // Truy vấn database trực tiếp
  await db.cart.create({
    data: { userId, productId, quantity: 1 }
  });
  
  revalidatePath('/gio-hang');
  return { success: true };
}

// Component Client
'use client';
import { themVaoGio } from './actions';

function NutMuaHang({ productId }) {
  return (
    <form action={themVaoGio}>
      <input type="hidden" name="productId" value={productId} />
      <button type="submit">Thêm vào giỏ</button>
    </form>
  );
}

// Cache 1 giờ
fetch('https://api.example.com/data', { 
  next: { revalidate: 3600 } 
});

// Không cache, luôn fetch mới
fetch('https://api.example.com/data', { 
  cache: 'no-store' 
});

// Revalidate theo tag
fetch('https://api.example.com/data', { 
  next: { tags: ['products'] } 
});

// Trong Server Action, revalidate khi cần
revalidateTag('products');

# Kiểm tra packages nào chưa tương thích
npx react-19-compat-check

# Cập nhật dependencies
npm install react@19 react-dom@19 next@15

// TRƯỚC: pages/san-pham/[id].js (React 18)
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

export default function ChiTietSanPham() {
  const router = useRouter();
  const { id } = router.query;
  const [product, setProduct] = useState(null);
  
  useEffect(() => {
    fetch(`/api/products/${id}`)
      .then(res => res.json())
      .then(setProduct);
  }, [id]);
  
  if (!product) return <Loading />;
  return <div>{product.name}</div>;
}

// SAU: app/san-pham/[id]/page.js (React 19)
async function ChiTietSanPham({ params }) {
  // Fetch trực tiếp trong component
  const product = await db.product.findUnique({
    where: { id: params.id }
  });
  
  return <div>{product.name}</div>;
}

export default ChiTietSanPham;

import { use } from 'react';

function ThongTinNguoiDung({ userPromise }) {
  // use() unwrap Promise ngay trong render
  const user = use(userPromise);
  
  return <div>Xin chào {user.name}</div>;
}

// Component cha
function Dashboard() {
  const userPromise = fetchUser();
  
  return (
    <Suspense fallback={<Loading />}>
      <ThongTinNguoiDung userPromise={userPromise} />
    </Suspense>
  );
}

'use client';
import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();
  
  return (
    <button disabled={pending}>
      {pending ? 'Đang gửi...' : 'Gửi đơn hàng'}
    </button>
  );
}

function FormDatHang() {
  return (
    <form action={xuLyDonHang}>
      <input name="product" />
      <SubmitButton />
    </form>
  );
}

'use client';
import { useOptimistic } from 'react';

function DanhSachComment({ comments }) {
  const [optimisticComments, addOptimistic] = useOptimistic(
    comments,
    (state, newComment) => [...state, newComment]
  );
  
  async function themComment(formData) {
    const text = formData.get('comment');
    
    // Hiển thị ngay, chưa đợi server
    addOptimistic({ id: 'temp', text, pending: true });
    
    // Gửi lên server sau
    await fetch('/api/comments', {
      method: 'POST',
      body: JSON.stringify({ text })
    });
  }
  
  return (
    <div>
      {optimisticComments.map(c => (
        <div key={c.id} className={c.pending ? 'opacity-50' : ''}>
          {c.text}
        </div>
      ))}
      <form action={themComment}>
        <input name="comment" />
        <button>Gửi</button>
      </form>
    </div>
  );
}

// Cũ (không hoạt động)
function Button(props) {
  return <button>{props.label}</button>;
}
Button.defaultProps = { label: 'Click me' };

// Mới
function Button({ label = 'Click me' }) {
  return <button>{label}</button>;
}

// Cũ
import { createContext } from 'react';
const ThemeContext = createContext();

<ThemeContext.Provider value={theme}>
  <App />
</ThemeContext.Provider>

// Mới - đơn giản hơn
import { createContext } from 'react';
const ThemeContext = createContext();

<ThemeContext value={theme}>
  <App />
</ThemeContext>

function VideoPlayer() {
  return (
    <video 
      ref={(node) => {
        if (node) {
          node.play();
          // Cleanup khi unmount
          return () => node.pause();
        }
      }}
    />
  );
}

// app/san-pham/[slug]/page.js
import { Suspense } from 'react';
import { notFound } from 'next/navigation';

// Server Component - fetch data
async function getProduct(slug) {
  const product = await db.product.findUnique({
    where: { slug },
    include: { category: true, images: true }
  });
  if (!product) notFound();
  return product;
}

export default async function ProductPage({ params }) {
  const product = await getProduct(params.slug);
  
  return (
    <div className="container">
      {/* Phần tĩnh - render ngay */}
      <ProductImages images={product.images} />
      <ProductInfo product={product} />
      
      {/* Phần tương tác - Client Component */}
      <AddToCartButton productId={product.id} />
      
      {/* Phần dynamic - stream sau */}
      <Suspense fallback={<ReviewsSkeleton />}>
        <ProductReviews productId={product.id} />
      </Suspense>
      
      <Suspense fallback={<RecommendationsSkeleton />}>
        <RelatedProducts categoryId={product.categoryId} />
      </Suspense>
    </div>
  );
}

// Server Component - fetch reviews real-time
async function ProductReviews({ productId }) {
  const reviews = await db.review.findMany({
    where: { productId },
    orderBy: { createdAt: 'desc' },
    take: 10,
    include: { user: { select: { name: true, avatar: true } } }
  });
  
  return (
    <div className="reviews">
      {reviews.map(review => (
        <ReviewCard key={review.id} data={review} />
      ))}
    </div>
  );
}

// Client Component - chỉ phần cần tương tác
'use client';
import { useState } from 'react';
import { themVaoGio } from './actions';

function AddToCartButton({ productId }) {
  const [adding, setAdding] = useState(false);
  
  async function handleClick() {
    setAdding(true);
    await themVaoGio(productId);
    setAdding(false);
  }
  
  return (
    <button 
      onClick={handleClick}
      disabled={adding}
      className="btn-primary"
    >
      {adding ? 'Đang thêm...' : 'Thêm vào giỏ'}
    </button>
  );
}

// ❌ SAI: Toàn bộ là Client Component
'use client';
import { useState } from 'react';

function ProductPage({ product }) {
  const [quantity, setQuantity] = useState(1);
  
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <ProductImages images={product.images} />
      <input 
        value={quantity} 
        onChange={e => setQuantity(e.target.value)} 
      />
      <button>Mua {quantity} sản phẩm</button>
    </div>
  );
}

// ✅ ĐÚNG: Tách Client Component ra riêng
// Server Component (file chính)
function ProductPage({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <ProductImages images={product.images} />
      <QuantitySelector productId={product.id} />
    </div>
  );
}

// Client Component (file riêng)
'use client';
function QuantitySelector({ productId }) {
  const [quantity, setQuantity] = useState(1);
  
  return (
    <div>
      <input 
        value={quantity} 
        onChange={e => setQuantity(e.target.value)} 
      />
      <button>Mua {quantity} sản phẩm</button>
    </div>
  );
}

// ❌ SAI: Suspense quá lớn, cả trang đợi tất cả
<Suspense fallback={<LoadingPage />}>
  <Header />
  <ProductList />
  <Reviews />
  <Recommendations />
</Suspense>

// ❌ SAI: Suspense quá nhỏ, quá nhiều loading states
<Suspense fallback={<LoadingHeader />}>
  <Header />
</Suspense>
<Suspense fallback={<LoadingProduct />}>
  <ProductList />
</Suspense>
<Suspense fallback={<LoadingReview />}>
  <Reviews />
</Suspense>

// ✅ ĐÚNG: Nhóm theo mức độ quan trọng
<div>
  <Header /> {/* Render ngay, không cần Suspense */}
  
  <Suspense fallback={<ProductSkeleton />}>
    <ProductList /> {/* Critical content */}
  </Suspense>
  
  <Suspense fallback={<ReviewSkeleton />}>
    <Reviews /> {/* Secondary content */}
    <Recommendations />
  </Suspense>
</div>

// ❌ SAI: Fetch tuần tự, chậm
async function Dashboard() {
  const user = await fetchUser();
  const orders = await fetchOrders(user.id);
  const stats = await fetchStats(user.id);
  
  return <div>...</div>;
}

// ✅ ĐÚNG: Fetch song song
async function Dashboard() {
  const [user, orders, stats] = await Promise.all([
    fetchUser(),
    fetchOrders(),
    fetchStats()
  ]);
  
  return <div>...</div>;
}

// ✅ TỐT HƠN: Streaming với Suspense
function Dashboard() {
  return (
    <div>
      <Suspense fallback={<UserSkeleton />}>
        <UserInfo />
      </Suspense>
      
      <Suspense fallback={<OrdersSkeleton />}>
        <RecentOrders />
      </Suspense>
      
      <Suspense fallback={<StatsSkeleton />}>
        <Statistics />
      </Suspense>
    </div>
  );
}

// Static data - cache vĩnh viễn
async function getCategories() {
  const res = await fetch('https://api.example.com/categories', {
    cache: 'force-cache' // default
  });
  return res.json();
}

// Dynamic data - revalidate định kỳ
async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 60 } // cache 60s
  });
  return res.json();
}

// Real-time data - không cache
async function getLiveStock(id) {
  const res = await fetch(`https://api.example.com/stock/${id}`, {
    cache: 'no-store'
  });
  return res.json();
}

// Database query với Prisma - dùng unstable_cache
import { unstable_cache } from 'next/cache';

const getCachedProducts = unstable_cache(
  async () => db.product.findMany(),
  ['products-list'],
  { revalidate: 3600, tags: ['products'] }
);

import dynamic from 'next/dynamic';

// Component nặng, chỉ load khi cần
const ChartComponent = dynamic(() => import('./Chart'), {
  loading: () => <ChartSkeleton />,
  ssr: false // Không render server-side
});

// Modal chỉ load khi người dùng click
function ProductPage() {
  const [showModal, setShowModal] = useState(false);
  
  const Modal = dynamic(() => import('./Modal'));
  
  return (
    <div>
      <button onClick={() => setShowModal(true)}>Xem chi tiết</button>
      {showModal && <Modal />}
    </div>
  );
}

// next.config.js
module.exports = {
  experimental: {
    // Bật logging để debug
    logging: {
      level: 'verbose',
      fullUrl: true
    }
  },
  
  // Production monitoring
  ...(process.env.NODE_ENV === 'production' && {
    analyticsId: process.env.VERCEL_ANALYTICS_ID
  })
};

import { unstable_noStore } from 'next/cache';

async function ProductList() {
  // Đánh dấu component này không cache để debug
  unstable_noStore();
  
  const start = Date.now();
  const products = await fetchProducts();
  const duration = Date.now() - start;
  
  console.log(`Fetched ${products.length} products in ${duration}ms`);
  
  return <div>...</div>;
}