Server Component و Client Component در Next.js به زبان ساده
یکی از تفاوتهای مهم Next.js با React معمولی، نحوه اجرای کامپوننتهاست. در Next.js، مخصوصاً با استفاده از App Router، کامپوننتها میتوانند بهصورت Server Component یا Client Component اجرا شوند.
شاید در ابتدا این دو مفهوم کمی پیچیده به نظر برسند، اما اگر بدانیم هرکدام چه زمانی استفاده میشوند، کار با Next.js بسیار سادهتر خواهد شد.
Server Component چیست؟
در Next.js، کامپوننتها بهصورت پیشفرض Server Component هستند.
یعنی کد این کامپوننتها روی سرور اجرا میشود و نتیجه موردنیاز برای نمایش صفحه به مرورگر ارسال میشود.
برای مثال:
export default function Product() {
return (
<div>
<h2>محصول جدید</h2>
<p>این یک محصول نمونه است.</p>
</div>
);
}
در این مثال نیازی به نوشتن "use client" نداریم، بنابراین کامپوننت یک Server Component محسوب میشود.
یکی از مزیتهای Server Component این است که لازم نیست تمام کد مربوط به آن کامپوننت برای اجرا به مرورگر ارسال شود.
Client Component چیست؟
گاهی اوقات یک کامپوننت نیاز دارد در مرورگر اجرا شود و با رفتارهای کاربر تعامل داشته باشد.
برای مثال اگر بخواهیم از:
useState
useEffect
Event Handlerهایی مثل onClick
بعضی APIهای مرورگر
استفاده کنیم، به Client Component نیاز داریم.
برای مشخص کردن یک Client Component، باید "use client" را در ابتدای فایل قرار دهیم:
"use client";
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
{count}
</button>
);
}
در اینجا چون از useState و onClick استفاده کردهایم، کامپوننت باید روی Client اجرا شود.
تفاوت اصلی این دو چیست؟
به زبان ساده میتوان گفت:
Server Component → مناسب نمایش محتوا و کارهایی که میتوانند روی سرور انجام شوند.
Client Component → مناسب تعاملات کاربر و قابلیتهایی که به مرورگر نیاز دارند.
برای مثال فرض کنید یک صفحه محصول داریم.
بخشهایی مانند:
نام محصول
قیمت
توضیحات
تصویر محصول
میتوانند Server Component باشند.
اما دکمهای مثل:
افزودن به سبد خرید
ممکن است نیاز به Client Component داشته باشد؛ چون با کلیک کاربر باید یک اتفاق در رابط کاربری رخ دهد.
آیا باید همه چیز را Client Component کنیم؟
خیر.
یکی از اشتباهات رایج هنگام کار با Next.js این است که "use client" را در تعداد زیادی از فایلها قرار دهیم.
بهتر است فقط بخشهایی که واقعاً به قابلیتهای Client نیاز دارند، Client Component باشند.
برای مثال به جای اینکه کل صفحه محصول را Client Component کنیم، میتوانیم فقط دکمه خرید را Client Component قرار دهیم:
ProductPage
│
├── ProductInfo
├── ProductImage
└── AddToCartButton
در این حالت ProductPage و بخشهای اطلاعات محصول میتوانند Server Component باشند و فقط AddToCartButton بهعنوان Client Component استفاده شود.
این روش باعث میشود ساختار پروژه سادهتر و استفاده از Client JavaScript محدودتر باشد.
آیا Server Component یعنی هیچ تعاملی ندارد؟
بهطور کلی، Server Component برای تعاملات مستقیم مرورگر مانند onClick و useState طراحی نشده است.
اگر یک بخش از رابط کاربری به چنین قابلیتهایی نیاز داشته باشد، میتوانیم همان بخش را به Client Component تبدیل کنیم.
بنابراین لازم نیست بین «کل صفحه Server» و «کل صفحه Client» یکی را انتخاب کنیم. میتوانیم یک صفحه را از ترکیب هر دو نوع کامپوننت بسازیم.
یک مثال واقعی
فرض کنید یک صفحه فروشگاه داریم:
صفحه محصول
│
├── عنوان محصول
├── تصویر محصول
├── توضیحات
├── قیمت
│
└── دکمه افزودن به سبد خرید
اطلاعات محصول میتواند در Server Component دریافت و نمایش داده شود.
اما دکمه «افزودن به سبد خرید» میتواند Client Component باشد:
"use client";
export function AddToCartButton() {
return (
<button onClick={() => console.log("Added to cart")}>
افزودن به سبد خرید
</button>
);
}
در نتیجه هر بخش در محیطی اجرا میشود که برای آن مناسبتر است.
پس چه زمانی از هرکدام استفاده کنیم؟
یک قانون ساده میتواند کمک کند:
اگر کامپوننت فقط وظیفه نمایش اطلاعات را دارد، ابتدا Server Component را در نظر بگیرید.
اگر کامپوننت نیاز به تعامل کاربر، State یا APIهای مرورگر دارد، احتمالاً باید Client Component باشد.
البته در پروژههای واقعی ممکن است شرایط پیچیدهتر باشد، اما این قانون برای شروع کار با Next.js بسیار کاربردی است.
جمعبندی
Server Component و Client Component یکی از مفاهیم مهم در Next.js هستند، اما درک آنها لزوماً پیچیده نیست.
بهطور خلاصه:
Server Component بهصورت پیشفرض استفاده میشود.
Server Component روی سرور اجرا میشود.
Client Component با "use client" مشخص میشود.
Client Component برای تعاملات کاربر و قابلیتهایی مانند useState و onClick مناسب است.
لازم نیست کل پروژه را Client Component کنیم.
بهتر است فقط بخشهایی که به قابلیتهای Client نیاز دارند، Client Component باشند.
با درک همین تفاوت ساده، میتوان هنگام ساخت پروژههای Next.js تصمیم بهتری درباره محل اجرای هر بخش از رابط کاربری گرفت.