React 19 và Next.js 15: Khi nào dùng Server Components, khi nào dùng Client Components

// app/blog/page.tsx - Server Component (mặc định)
// Không cần 'use server' - đây là default
import { db } from '@/lib/db'

export default async function BlogPage() {
  // Gọi thẳng DB, không cần API route
  const posts = await db.post.findMany({
    orderBy: { createdAt: 'desc' },
    take: 10,
  })

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

// components/LikeButton.tsx - Client Component
'use client'

import { useState } from 'react'

export function LikeButton({ initialCount }: { initialCount: number }) {
  const [count, setCount] = useState(initialCount)

  return (
    <button onClick={() => setCount(c => c + 1)}>
      ❤️ {count}
    </button>
  )
}

// app/blog/[slug]/page.tsx - Server Component
import { db } from '@/lib/db'
import { LikeButton } from '@/components/LikeButton' // Client Component
import { CommentSection } from '@/components/CommentSection' // Client Component

export default async function BlogPost({ params }: { params: { slug: string } }) {
  // Fetch thẳng từ DB - không cần useEffect, không cần loading state
  const post = await db.post.findUnique({
    where: { slug: params.slug },
    include: { author: true }
  })

  if (!post) notFound()

  return (
    <article>
      <h1>{post.title}</h1>
      <p>Tác giả: {post.author.name}</p>
      
      {/* Nội dung tĩnh - render trên server */}
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
      
      {/* Nhúng Client Components khi cần tương tác */}
      <LikeButton initialCount={post.likeCount} postId={post.id} />
      <CommentSection postId={post.id} />
    </article>
  )
}

// Cache trong 1 giờ
const data = await fetch('/api/data', { next: { revalidate: 3600 } })

// Không cache (luôn fetch mới)
const data = await fetch('/api/data', { cache: 'no-store' })

// Cache tĩnh - chỉ build lại khi deploy
const data = await fetch('/api/data', { cache: 'force-cache' })

// components/StatsCard.tsx
'use client'

import { useState, useEffect } from 'react'

interface Props {
  metric: string
  endpoint: string
}

export function RealtimeStatsCard({ metric, endpoint }: Props) {
  const [value, setValue] = useState<number | null>(null)
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    // Polling mỗi 30s cho realtime feel
    const fetchData = async () => {
      const res = await fetch(endpoint)
      const data = await res.json()
      setValue(data.value)
      setIsLoading(false)
    }

    fetchData()
    const interval = setInterval(fetchData, 30_000)
    return () => clearInterval(interval)
  }, [endpoint])

  if (isLoading) return <div className="skeleton" />

  return (
    <div className="stats-card">
      <span className="metric-name">{metric}</span>
      <span className="metric-value">{value?.toLocaleString()}</span>
    </div>
  )
}

// app/actions.ts
'use server'

import { db } from '@/lib/db'
import { revalidatePath } from 'next/cache'

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string
  const content = formData.get('content') as string

  // Validate
  if (!title || title.length < 3) {
    return { error: 'Tiêu đề quá ngắn' }
  }

  // Lưu DB trực tiếp trong Server Action
  await db.post.create({
    data: { title, content }
  })

  // Invalidate cache để page reload fresh data
  revalidatePath('/blog')
  return { success: true }
}

// app/blog/new/page.tsx - Dùng Server Action trong form
import { createPost } from '@/app/actions'

export default function NewPostPage() {
  return (
    // action={createPost} - không cần onSubmit, không cần 'use client'
    <form action={createPost}>
      <input name="title" placeholder="Tiêu đề bài viết" />
      <textarea name="content" placeholder="Nội dung" />
      <button type="submit">Đăng bài</button>
    </form>
  )
}

'use client'

import { useActionState } from 'react'
import { createPost } from '@/app/actions'

export function PostForm() {
  const [state, action, isPending] = useActionState(createPost, null)

  return (
    <form action={action}>
      {state?.error && <p className="error">{state.error}</p>}
      {state?.success && <p className="success">Đăng bài thành công!</p>}
      
      <input name="title" disabled={isPending} />
      <textarea name="content" disabled={isPending} />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Đang lưu...' : 'Đăng bài'}
      </button>
    </form>
  )
}

// app/dashboard/page.tsx
import { Suspense } from 'react'
import { UserProfile } from './UserProfile'
import { RecentPosts } from './RecentPosts'
import { Notifications } from './Notifications'

export default function DashboardPage() {
  return (
    <div className="dashboard">
      {/* Render ngay - không cần chờ */}
      <h1>Dashboard</h1>
      
      {/* Mỗi section stream độc lập */}
      <Suspense fallback={<ProfileSkeleton />}>
        <UserProfile /> {/* Fetch user data */}
      </Suspense>
      
      <Suspense fallback={<PostsSkeleton />}>
        <RecentPosts /> {/* Fetch posts */}
      </Suspense>
      
      <Suspense fallback={<NotificationsSkeleton />}>
        <Notifications /> {/* Fetch notifications */}
      </Suspense>
    </div>
  )
}

// app/dashboard/RecentPosts.tsx - Server Component
import { db } from '@/lib/db'

export async function RecentPosts() {
  // Chậm nhất cũng không block các component khác
  const posts = await db.post.findMany({ take: 5 })
  
  return (
    <section>
      <h2>Bài viết gần đây</h2>
      {posts.map(p => <PostCard key={p.id} post={p} />)}
    </section>
  )
}

// Thay vì fetch tuần tự (chậm)
const user = await getUser(id)
const posts = await getUserPosts(id) // Chờ getUser xong mới chạy

// Fetch song song (nhanh hơn)
const [user, posts] = await Promise.all([
  getUser(id),
  getUserPosts(id),
])