Architecture۷ دقیقه مطالعه
درک عمیق React Server Components به زبان ساده: مرز بین سرور و کلاینت در Next.js
راهنمای عملی برای درک ماهیت Server Components و Client Components در Next.js App Router، تفاوت حجم باندل، نحوه تصمیمگیری برای use client و اشتباهات رایج جونیورها.
انتقال از معماری سنتی Single Page Application (SPA) به سمت Next.js App Router و React Server Components (RSC) یکی از مهم‌ترین تحولات در توسعه فرانت‌اند مدرن بوده است. با این حال، بسیاری از توسعه‌دهندگان جونیور با مفهوم مرز سرور و کلاینت دچار سردرگمی می‌شوند.
#قبل از Server Components وب چگونه کار می‌کرد؟
در اپلیکیشن‌های سنتی ری‌اکت (CRA یا Vite)، کلاینت یک فایل HTML تقریباً خالی را به همراه مگابایت‌ها کد جاوااسکریپت دریافت می‌کرد. سپس مرورگر باید کل کد را پارس و اجرا می‌کرد تا المان‌ها نمایش داده شوند. این امر منجر به کندی First Contentful Paint و حجم باندل بسیار سنگین می‌شد.
#React Server Component دقیقاً چیست؟
کامپوننت‌های سرور، کامپوننت‌های ری‌اکتی هستند که فقط و فقط روی سرور اجرا می‌شوند. کد جاوااسکریپت آنها هرگز به مرورگر کاربر دانلود یا ارسال نمی‌شود؛ بلکه خروجی ساختاریافته (Virtual DOM Stream) به مرورگر فرستاده می‌شود.
- دسترسی مستقیم و ایمن به دیتابیس، فایل‌ها و کلیدهای مخفی API در سمت سرور
- کاهش شدید حجم JavaScript ارسال‌شده به مرورگر کاربر
- انجام درخواست‌های دیتایی هم‌جوار با سرور بدون ایجاد Waterfall در کلاینت
#قانون طلایی: چه زمانی باید از 'use client' استفاده کنیم؟
یک تصور غلط این است که 'use client' فایل را کاملاً به سمت کلاینت می‌برد یا RSC را غیرفعال می‌کند. در واقع، دایرکتیو 'use client' مرز تعاملی بودن (Boundary of Interactivity) را مشخص می‌کند. شما تنها در شرایط زیر به آن نیاز دارید:
- استفاده از هوک‌های State و Lifecycle مثل useState، useEffect، useReducer
- شنیدن رویدادهای کاربر مانند onClick، onChange، onSubmit
- استفاده از APIهای مرورگر مثل localStorage، window، navigator یا Web Audio
- کامپوننت‌هایی که از پکیج‌های کلاینت‌محور (مثل Framer Motion) استفاده می‌کنند
#الگوی بهینه: هل دادن کامپوننت‌های کلاینت به انتهای شاخه‌ها (Leaves)
به جای اینکه کل صفحه یا Layout را با 'use client' علامت‌گذاری کنید، صفحه را Server Component نگه دارید و تنها دکمه یا بخش تعاملی را در یک فایل کلاینتی جداگانه استخراج کنید:
unknown node#۳ اشتباه رایج جونیورها هنگام کار با Next.js App Router
آگاهی از این سه چالش متداول به شما در حل سریع باگ‌ها و موفقیت در مصاحبه‌های فنی کمک شایانی می‌کند:
- خطای عدم تطابق هیدریشن (Hydration Mismatch): استفاده مستقیم از window یا تاریخ‌های وابسته به تایم‌زون مرورگر در رندر اولیه که باعث تفاوت بین خروجی سرور و کلاینت می‌شود.
- ارسال Function به عنوان Prop از سرور به کلاینت: اشیاء و آرایه‌ها را می‌توان ارسال کرد چون قابل Serialize شدن به JSON هستند، اما توابع (مانند onClick handler) نمی‌توانند از مرز سرور عبور کنند.
- گرفتار شدن در حلقه 'use client': اضافه کردن عجولانه use client به محض مواجهه با ارور، به جای درک معماری صحیح کامپوننت.
#جمع‌بندی
سرور کامپوننت‌ها آینده اکوسیستم ری‌اکت هستند. با درک مرزهای سرور و کلاینت و پیاده‌سازی معماری تمیز، اپلیکیشن‌هایی با سرعت بارگذاری فوق‌العاده و تجربه کاربری بی‌نقص خواهید ساخت.
ادامه مطالعه
مشاهده همهسایر مقالات
Best Practices
کلین کد در فرانت‌اند: ۵ عادت حیاتی که شما را از جونیور به میدلول ارتقا می‌دهد
۵ تکنیک کاربردی و حرفهای برای افزایش کیفیت کدهای جاوااسکریپت، ری‌اکت و تایپاسکریپت؛ از شکستن صحیح کامپوننت‌ها تا حذف کدهای تکراری و مدیریت تمیز خطاها.
Development / Web Development
مدیریت مدرن State در React: از useState تا Zustand برای توسعه‌دهندگان جونیور
بررسی انواع استیت در فرانت‌اند (Local، Shared، Server Cache و Global)، چرایی عبور از دردسرهای Prop Drilling و Context، و نحوه استفاده کاربردی از Zustand.