Server Components vs Client Components в Next.js 16 - Кога да използваш кое?

// app/products/page.tsx
// Това е Server Component - няма нужда от маркиране
import { db } from '@/lib/db'

export default async function ProductsPage() {
  // Директна заявка към базата данни - само на сървъра
  const products = await db.product.findMany({
    orderBy: { createdAt: 'desc' },
    take: 20,
  })

  return (
    <section>
      <h1>Нашите продукти</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            <strong>{product.name}</strong> - {product.price} лв.
          </li>
        ))}
      </ul>
    </section>
  )
}

'use client'
// components/SearchBar.tsx

import { useState, useTransition } from 'react'
import { useRouter } from 'next/navigation'

export default function SearchBar() {
  const [query, setQuery] = useState('')
  const [isPending, startTransition] = useTransition()
  const router = useRouter()

  const handleSearch = (value: string) => {
    setQuery(value)
    startTransition(() => {
      router.push(`/search?q=${encodeURIComponent(value)}`)
    })
  }

  return (
    <div>
      <input
        type="search"
        value={query}
        onChange={(e) => handleSearch(e.target.value)}
        placeholder="Търси продукт..."
        className={isPending ? 'opacity-50' : ''}
      />
    </div>
  )
}

// app/blog/[slug]/page.tsx - Server Component
import { getPostBySlug, getRelatedPosts } from '@/lib/posts'
import { LikeButton } from '@/components/LikeButton'     // Client
import { ShareMenu } from '@/components/ShareMenu'        // Client
import { RelatedPosts } from '@/components/RelatedPosts'  // Server

export default async function BlogPostPage({
  params,
}: {
  params: { slug: string }
}) {
  const [post, related] = await Promise.all([
    getPostBySlug(params.slug),
    getRelatedPosts(params.slug),
  ])

  if (!post) notFound()

  return (
    <article>
      <h1>{post.title}</h1>
      <p className="text-gray-500">{post.publishedAt}</p>
      <div dangerouslySetInnerHTML={{ __html: post.contentHtml }} />

      {/* Само интерактивните части са Client Components */}
      <div className="flex gap-4 mt-8">
        <LikeButton postId={post.id} initialLikes={post.likes} />
        <ShareMenu url={post.url} title={post.title} />
      </div>

      {/* Свързани постове са чист Server Component */}
      <RelatedPosts posts={related} />
    </article>
  )
}

'use client'
// components/Modal.tsx

import { useState, useEffect } from 'react'

export default function Modal({
  trigger,
  children,
}: {
  trigger: React.ReactNode
  children: React.ReactNode
}) {
  const [isOpen, setIsOpen] = useState(false)

  useEffect(() => {
    const handleEsc = (e: KeyboardEvent) => {
      if (e.key === 'Escape') setIsOpen(false)
    }
    document.addEventListener('keydown', handleEsc)
    return () => document.removeEventListener('keydown', handleEsc)
  }, [])

  return (
    <>
      <div onClick={() => setIsOpen(true)}>{trigger}</div>
      {isOpen && (
        <div className="modal-overlay" onClick={() => setIsOpen(false)}>
          <div className="modal-content" onClick={(e) => e.stopPropagation()}>
            {children}
          </div>
        </div>
      )}
    </>
  )
}

// app/products/page.tsx - Server Component
import Modal from '@/components/Modal'
import ProductDetails from '@/components/ProductDetails' // Server Component

export default async function ProductsPage() {
  const products = await db.product.findMany()

  return (
    <div>
      {products.map((product) => (
        <Modal
          key={product.id}
          trigger={<button>Виж детайли</button>}
        >
          {/* ProductDetails е Server Component като children */}
          <ProductDetails productId={product.id} />
        </Modal>
      ))}
    </div>
  )
}

// ❌ Излишен Client Component - няма hooks, няма events
'use client'
export default function ProductCard({ name, price, description }) {
  return (
    <div className="card">
      <h3>{name}</h3>
      <p>{description}</p>
      <strong>{price} лв.</strong>
    </div>
  )
}

// ✅ Server Component - нулев JavaScript към клиента
export default function ProductCard({ name, price, description }) {
  return (
    <div className="card">
      <h3>{name}</h3>
      <p>{description}</p>
      <strong>{price} лв.</strong>
    </div>
  )
}

// ❌ Стар паттерн - waterfall заявки, loading state, излишен JS
'use client'
import { useState, useEffect } from 'react'

export default function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then((r) => r.json())
      .then((data) => { setUser(data); setLoading(false) })
  }, [userId])

  if (loading) return <div>Зареждане...</div>
  return <div>{user?.name}</div>
}

// ✅ Server Component - директен достъп, без loading state, без API route
import { db } from '@/lib/db'

export default async function UserProfile({ userId }: { userId: string }) {
  const user = await db.user.findUnique({ where: { id: userId } })
  if (!user) return <div>Потребителят не е намерен.</div>
  return <div>{user.name}</div>
}