React Server Components trong production: mẫu thiết kế và cạm bẫy

import { ProductDetails } from './ProductDetails'
import { AddToCartButton } from './AddToCartButton'

export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const product = await getProduct(id)

  return (
    <div>
      {/* Server Component: truy cập DB trực tiếp */}
      <ProductDetails product={product} />
      {/* Client Component: tương tác cô lập */}
      <AddToCartButton productId={product.id} price={product.price} />
    </div>
  )
}

'use client'

import { useState } from 'react'

export function AddToCartButton({ productId, price }: { productId: string; price: number }) {
  const [adding, setAdding] = useState(false)

  async function handleAdd() {
    setAdding(true)
    await fetch('/api/cart', {
      method: 'POST',
      body: JSON.stringify({ productId, quantity: 1 }),
    })
    setAdding(false)
  }

  return (
    <button onClick={handleAdd} disabled={adding}>
      {adding ? 'Đang thêm...' : `Thêm vào giỏ hàng — $${price}`}
    </button>
  )
}

'use client'

import { useState } from 'react'

// Toàn bộ nội dung con bị đẩy về phía client
export function PageWrapper({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState('light')
  return (
    <div className={theme}>
      <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
        Đổi giao diện
      </button>
      {children}
    </div>
  )
}

import { PageWrapper } from './PageWrapper'
import { HeavyServerContent } from './HeavyServerContent'

export default function Layout() {
  return (
    <PageWrapper>
      {/* Vẫn là Server Component dù có wrapper client */}
      <HeavyServerContent />
    </PageWrapper>
  )
}

import { cache } from 'react'

// Loại bỏ trùng lặp các lời gọi giống nhau trong cùng một lượt render
const getUser = cache(async (userId: string) => {
  const res = await fetch(`https://api.example.com/users/${userId}`, {
    next: { revalidate: 3600 }, // Cache trong 1 giờ
  })
  if (!res.ok) throw new Error('User not found')
  return res.json()
})

export default async function UserProfile({ userId }: { userId: string }) {
  const user = await getUser(userId)

  return (
    <section>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
      <p>Thành viên từ {new Date(user.createdAt).toLocaleDateString('vi-VN')}</p>
    </section>
  )
}

// CẠM BẪY: truyền các kiểu không serialize được
// Hàm — không hoạt động
<ClientComp onSubmit={async (data) => { /* server action */ }} />
// Thay vào đó dùng Server Action được import
import { submitForm } from '@/lib/actions/form'
<ClientComp onSubmit={submitForm} />

// Đối tượng Date — không hoạt động
<ClientComp createdAt={new Date()} />
// Chuỗi ISO — hoạt động
<ClientComp createdAt={new Date().toISOString()} />

// Map, Set, RegExp — không hoạt động
<ClientComp data={new Map([['key', 'value']])} />
// Đối tượng thuần hoặc mảng — hoạt động
<ClientComp data={{ key: 'value' }} />

import { Suspense } from 'react'
import { RevenueChart } from './RevenueChart'
import { RecentOrders } from './RecentOrders'
import { UserStats } from './UserStats'

export default function DashboardPage() {
  return (
    <div className="grid grid-cols-2 gap-6">
      <Suspense fallback={<ChartSkeleton />}>
        <RevenueChart />
      </Suspense>

      <Suspense fallback={<StatsSkeleton />}>
        <UserStats />
      </Suspense>

      <Suspense fallback={<TableSkeleton />}>
        <RecentOrders />
      </Suspense>
    </div>
  )
}

'use client'

import { useEffect, useState } from 'react'

export function HydrationDebug() {
  const [isClient, setIsClient] = useState(false)

  useEffect(() => {
    setIsClient(true)
  }, [])

  if (process.env.NODE_ENV !== 'development') return null

  return (
    <div style={{ position: 'fixed', bottom: 0, right: 0, padding: '4px 8px', fontSize: 12 }}>
      {isClient ? 'Client' : 'Server'}
    </div>
  )
}

const nextConfig = {
  logging: {
    fetches: {
      fullUrl: true, // Hiển thị URL fetch đầy đủ
    },
  },
}

export default nextConfig

import { getTodos } from '@/lib/services/todo'
import { TodoForm } from './TodoForm'
import { deleteTodo } from '@/lib/actions/todo'

export default async function TodoList() {
  const todos = await getTodos()

  return (
    <div>
      <TodoForm />
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.title}
            <form action={deleteTodo}>
              <input type="hidden" name="id" value={todo.id} />
              <button type="submit">Xóa</button>
            </form>
          </li>
        ))}
      </ul>
    </div>
  )
}

'use server'

import { revalidatePath } from 'next/cache'
import { TodoService } from '@/lib/services/todo'

export async function deleteTodo(formData: FormData) {
  const id = formData.get('id') as string
  await TodoService.delete(id)
  revalidatePath('/todos')
}