مرز کلاینت (Client Boundary)

• دستور 'use client' یک مرز است: وقتی این دستور را می‌نویسید، به Next.js می‌گویید از این نقطه به بعد، مسئولیت اجرا با مرورگر است.

• قانون آبشاری: هر فایلی که 'use client' دارد و تمام فایل‌ها و ماژول‌هایی که درون آن import می‌شوند، کلاینتی محسوب می‌شوند.

• قانون جعبه سیاه: سرور کامپوننت‌های کلاینتی را پردازش نمی‌کند. از نظر سرور، آن‌ها یک “جعبه سیاه” هستند و سرور فقط یک جای‌خالی (Placeholder) برای آن‌ها در RSC Payload می‌گذارد.

۲. چه چیزی وارد باندل جاوااسکریپت (JS Bundle) مرورگر می‌شود؟

• کامپوننت‌های سروری (بدون 'use client'): کد جاوااسکریپت آن‌ها هرگز به مرورگر نمی‌رود. مرورگر فقط HTML و دیتای ساختاریافته (RSC Payload) آن‌ها را دریافت می‌کند.

• کامپوننت‌های کلاینتی (دارای 'use client'): تمام کدهای جاوااسکریپت آن‌ها برای مرورگر ارسال می‌شود تا بتوانند تعاملی (Hydrate) شوند.

• کامپوننت‌های مشترک (مثل یک دکمه یا اسپینر بدون 'use client'):

• اگر در یک فایل سروری ایمپورت شوند -> سروری می‌مانند (JS ارسال نمی‌شود).

• اگر در یک فایل کلاینتی ایمپورت شوند -> کلاینتی می‌شوند (JS آن‌ها به باندل مرورگر اضافه می‌شود).

۳. الگوی ترکیب (Children / Component as Prop Pattern)

برای جلوگیری از کلاینتی شدن کامپوننت‌های سروری و افزایش حجم باندل مرورگر، از این الگو استفاده می‌شود:

• ❌ روش اشتباه (باعث سنگین شدن باندل کلاینت می‌شود):

ایمپورت کردن مستقیم یک کامپوننت سروری (مثل Spinner) داخل فایلِ یک کامپوننت کلاینتی (مثل Button).

• ✅ روش درست (حفظ صفر بایت جاوااسکریپت برای کامپوننت سروری):

کامپوننت کلاینت (Button) را طوری بنویسید که یک prop (مثل children) دریافت کند. سپس در یک فایل سروری (Page)، هر دو را ایمپورت کرده و کامپوننت سروری را درون کامپوننت کلاینتی قرار دهید: <Button> <Spinner /> </Button>.

💡 فرمول کلی برای به یاد سپردن:

“ایمپورتِ” فایل در کلاینت = تبدیل شدن به کلاینت و ارسال JS.

“پاس دادن به عنوان Children” از سرور به کلاینت = باقی ماندن در سرور و ارسال نشدن JS.