کدوم نوع کامپوننت استفاده کنیم

یکی از کلیدی‌ترین مفاهیم در معماری مدرن Next.js، تفکیک محیط اجرای کدهاست. سرور و کلاینت (مرورگر) قابلیت‌ها و محدودیت‌های کاملاً متفاوتی دارند. Next.js به شما اجازه می‌دهد تا با توجه به نیاز هر بخش از صفحه، تعیین کنید که کدها کجا پردازش و اجرا شوند.

چه زمانی باید از Client Components استفاده کنیم؟ ('use client')

به طور خلاصه، هر زمان که کامپوننت شما نیاز به تعامل مستقیم با کاربر یا دسترسی به قابلیت‌های مرورگر داشته باشد، باید به سراغ کلاینت کامپوننت بروید.

• مدیریت وضعیت (State) و مدیریت‌کننده‌های رویداد (Event Handlers): هر جا که نیاز به هوک‌هایی مثل useState ،useReducer یا رویدادهایی مثل onClick و onChange دارید.

• منطق‌های وابسته به چرخه حیات (Lifecycle): برای استفاده از هوک‌هایی مثل useEffect و useLayoutEffect.

• APIهای اختصاصی مرورگر: دسترسی به اشیاء و متدهای بومی مرورگر مثل window ،document ،localStorage یا navigator.geolocation.

• هوک‌های سفارشی (Custom Hooks): هوک‌هایی که خودشان به وضعیت‌ها یا قابلیت‌های کلاینت وابسته‌اند.

چه زمانی باید از Server Components استفاده کنیم؟ (حالت پیش‌فرض)

هر جا که کامپوننت شما صرفاً وظیفه نمایش ساختار، دریافت دیتا یا تعامل با سرور را دارد، باید سرور کامپوننت باقی بماند.

• دریافت اطلاعات (Data Fetching): ارتباط مستقیم با دیتابیس یا فراخوانی APIها درست در نزدیک‌ترین نقطه به منبع داده.

• امنیت و حفظ اطلاعات حساس: استفاده از API Keyها، توکن‌ها و کدهای محرمانه بدون تررس از لو رفتن آن‌ها در مرورگر کاربر.

• کاهش حجم جاوااسکریپت نهایی (Bundle Size): کدهای سنگین و پکیج‌های وابسته، روی سرور پردازش شده و فقط خروجی متنی یا HTML آن‌ها به مرورگر ارسال می‌شود؛ در نتیجه جاوااسکریپت کمتری برای کاربر فرستاده می‌شود.

• بهبود سئو و سرعت لود اولیه (FCP): تولید سریع‌تر ساختار اولیه صفحه روی سرور و امکان استریم (Streaming) قطره‌چکانی محتوا برای کاربر.

مثال بارز: ترکیب هماهنگ سرور و کلاینت

یک الگوی معماری استاندارد این است که صفحه والد دیتای سنگین را روی سرور بگیرد و آن را به عنوان پروپ به یک فرزند تعاملی در کلاینت پاس بدهد.

در مثال زیر، کامپوننت <Page> یک کامپوننت سروری است که دیتای پست را دانلود می‌کند و تعداد لایک‌ها را به کامپوننت کلاینتی <LikeButton> می‌سپارد:

۱. کامپوننت سروری (والد دیتامحور)

// app/[id]/page.tsx
import LikeButton from '@/app/ui/like-button'
import { getPost } from '@/lib/data'
 
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  
  // دیتای پست مستقیماً و با امنیت بالا روی سرور گرفته می‌شود
  const post = await getPost(id)
 
  return (
    <div>
      <main>
        <h1>{post.title}</h1>
        {/* پاس دادن دیتای آماده به کامپوننت کلاینت */}
        <LikeButton likes={post.likes} />
      </main>
    </div>
  )
}

۲. کامپوننت کلاینتی (فرزند تعاملی)

// app/ui/like-button.tsx
'use client' // تعریف مرز کلاینت
 
import { useState } from 'react'
 
export default function LikeButton({ likes }: { likes: number }) {
  const [currentLikes, setCurrentLikes] = useState(likes)
 
  return (
    <button onClick={() => setCurrentLikes(currentLikes + 1)}>
      👍 لایک ({currentLikes})
    </button>
  )
}

جدول راهنمای سریع تصمیم‌گیری