مقدمهای درباره Server Components در Next.js
اگه تازه وارد دنیای برنامهنویسی وب شدی و اسم Next.js یا Server Components به گوشت خورده و با خودت گفتی: «وای اینا دیگه چیان؟!» اصلاً نگران نباش.
تو این پست قراره قدمبهقدم برات توضیح بدم که سرور کامپوننتها دقیقاً چی هستن، چرا ساخته شدن و چطوری میتونن کارتو راحتتر کنن.
تفاوت Server Components و Client Components
Server Components دقیقاً چطور کار میکنن؟
چرا سرور کامپوننت ساخته شد؟
خب اول بیایم ببینیم چی شد که اصلاً همچین چیزی لازم شد؟
اگه تا حالا با React کار کرده باشی، یا حتی فقط دربارهش شنیده باشی، میدونی که ریاکت دو نوع کامپوننت داره: کامپوننتهایی که سمت کاربر (Client Side) اجرا میشن و چیزهایی که میتونن سمت سرور پردازش بشن. ولی قبلاً این ایده زیاد جدی نبود و عملاً اکثر کارا سمت مرورگر انجام میشد.
مشکل کارهای سمت مرورگر چیه؟ همین که:
- مرورگر باید کلی کد جاوااسکریپت دانلود کنه
- این کدها رو اجرا کنه
- بعد تازه صفحه رو بسازه و نمایش بده
اگه پروژهات کوچیک باشه شاید فرقی حس نکنی، ولی وقتی یه سایت بزرگ میسازی که کلی بخش مختلف داره، این حجم دانلود و اجرا کردن کد باعث میشه:
- سایت دیر لود بشه
- CPU گوشی یا لپتاپ کاربر فشار بخوره
- تجربه کاربری افت کنه
اینجا بود که Next.js گفت:
«خب چرا همهچیز باید روی دستگاه کاربر اجرا بشه؟! بیایم یه بخشی از کار رو برگردونیم سمت سرور.»
و نتیجهش شد Server Components.
Server Components چیه؟ یک تعریف خیلی راحت
سرور کامپوننتها درواقع همون کامپوننتهای React هستن، با این تفاوت که:
- به جای اجرا شدن داخل مرورگر، روی سرور اجرا میشن
- برای اجرا شدن لازم نیست جاوااسکریپت به مرورگر ارسال بشه
- میتونن مستقیم به دیتابیس، فایلها یا APIهای امن دسترسی داشته باشن
- قراره حجم جاوااسکریپت سمت کلاینت رو کاهش بدن
یعنی چی؟
یعنی یه سری کارایی که لازم نیست کاربر انجام بده، راحت و بیسروصدا سمت سرور انجام میشن و فقط نتیجهی نهایی (خروجی HTML) برای کاربر فرستاده میشه. این یعنی سایت هم سریعتر میشه، هم سبکتر، هم امنتر.
مثال خیلی ساده
فرض کن یه سایت داری که لیست محصولات رو نشون میده. قبلاً معمولاً اینطوری بود:
- کاربر صفحه رو باز میکرد
- مرورگر جاوااسکریپت رو دانلود میکرد
- جاوااسکریپت اجرا میشد
- درخواست به سرور میرفت
- محصولات میاومدن و بعد نمایش داده میشدن
اما با Server Components:
- سرور خودش لیست محصولات رو میخونه
- HTML آماده میکنه
- مستقیم به مرورگر میفرسته
- مرورگر فقط نمایش میده.
دیگه خبری از اون دانلودهای سنگین و اجرای اسکریپت نیست.
چرا این موضوع برای تازهکارها مهمه؟
چون Next.js با سرور کامپوننتها عملاً داره مسیر ساخت پروژههای حرفهای رو برات سادهتر میکنه. تو لازم نیست درگیر کلی پیچیدگی بشی. فقط باید بدونی هر کامپوننت کجا اجرا میشه و چرا.
تفاوت Server Components و Client Components
حالا که فهمیدیم Server Componentها چی هستن و چرا اصلاً به وجود اومدن، وقتشه خیلی واضح، تفاوتشون با Client Componentها رو بررسی کنیم. چون وقتی این تفاوت رو خوب بفهمی، تصمیمگیری برای اینکه کِی از کدوم استفاده کنی خیلی راحتتر میشه.
کلاینت کامپوننتها (Client Components) دقیقاً چیکار میکنن؟
اگه بخوایم ساده بگیم، کلاینت کامپوننتها اون بخشهایی هستن که باید توی مرورگر اجرا بشن. چرا؟ چون کارهایی انجام میدن که فقط مرورگر میتونه انجام بده. مثل:
• مدیریت رویدادها (مثل onClick، onChange، و …)
• انیمیشنها و تعاملات کاربر
• استفاده از state برای تغییرات آنی روی صفحه
• کارهایی که به window، document یا APIهای مرورگر نیاز دارن
یه مثال خیلی ساده:
− دکمهها
− فرمها
− منوهای باز شونده
− مودالها
− اسلایدرها
همه اینا معمولاً باید Client Component باشن، چون با رفتار کاربر سروکار دارن. پس کلاینت کامپوننتها خیلی مهمن، اما پرهزینهان چون:
- جاوااسکریپت باید دانلود بشه
- مرورگر باید اون رو اجرا کنه
- ممکنه سرعت سایت رو کم کنه
- بهخصوص برای کاربران با گوشیهای ضعیف یا اینترنت کند.
سرور کامپوننتها (Server Components) چیکار میکنن؟
Server Components مثل پشتصحنهی یه نمایش هستن. کارهایی رو انجام میدن که کاربر لازم نیست ازشون باخبر باشه. مثل:
- گرفتن دیتا از دیتابیس
- اتصال به APIهای امن
- پردازش اطلاعات
- ساختن بخشهای ثابت و بدون تعامل
مزیت اصلیشون اینه که:
«هیچ جاوااسکریپتی به مرورگر ارسال نمیکنند.»
یعنی سایت خیلی سریع لود میشه، مخصوصاً وقتی صفحه سنگین باشه. همچنین چون روی سرور هستن:
• دسترسی مستقیم به دیتابیس دارن
• نیاز به API جداگانه ندارن
• امنیت خیلی بالاتر میره
• نیاز نیست برای هر دادهای درخواست AJAX بزنی
و خیلی جذابتر از همه:
کامپوننتهای سروری میتونن async باشن!
این قبلاً توی React امکانپذیر نبود، ولی Next.js با سرور کامپوننتها این قابلیت رو فراهم کرده.
یک تشبیه خیلی ساده
تصور کن یه رستوران داری:
سرور کامپوننتها مثل آشپزها هستن که تمام کارهای پشتصحنه رو انجام میدن.
کلاینت کامپوننتها مثل پیشخدمتها هستن که با مشتری تعامل دارن و سرویس ارائه میکنن.
مشتری نیازی نداره بدونه غذا چطوری درست شده. فقط خروجی رو میبینه.
Server Components دقیقاً چطور کار میکنن؟
توی این بخش قراره بفهمی فرایند اجرای Server Components از لحظهای که کاربر صفحه رو باز میکنه تا وقتی خروجی نهایی رو میبینه، دقیقاً چطور اتفاق میافته. اگه این بخش رو خوب بفهمی، انگار نصف راه سرور کامپوننت رو رفتی.
مرحله اول: کاربر وارد صفحه میشه
وقتی یک کاربر وارد صفحهای از سایتت میشه که با Server Components ساخته شده، مرورگر یک درخواست به سرور میفرسته. این درخواست ممکنه برای:
– لود کردن صفحه
– انجام رفرش
– یا حتی رفتن به یک روت جدید داخل Next.js باشه.
تا اینجای کار طبیعیه.
مرحله دوم: سرور شروع میکنه به اجرای کامپوننتها
اینجا بخش جذاب اصلیه. Next.js میاد و کامپوننتهای سروری رو یکییکی از بالا به پایین اجرا میکنه. چون این کامپوننتها ممکنه async باشن، کلی مزیت داره:
- گرفتن دیتا
- ساختن خروجی
- ترکیب کامپوننتها با هم
- تولید HTML آماده
و همه اینا قبل از اینکه چیزی به مرورگر بره انجام میشه. مرورگر هیچ جاوااسکریپتی برای این بخش دانلود نمیکنه. پس یعنی سرعت لود اولیه به شدت بهتر میشه.
مرحله سوم: خروجی HTML آماده میشه
بعد از اجرای کامل Server Components، سرور از کل صفحه یک HTML کامل و آماده میسازه. اینجا اتفاق طلایی میفته:
- دیگه لازم نیست مرورگر صبر کنه جاوااسکریپت بیاد
- دیگه لازم نیست مرورگر خودش دیتا بگیره
- دیگه لازم نیست React از سمت کاربر صفحه رو بسازه
- فقط همون HTML نمایش داده میشه.
نتیجه؟
لود فوق سریع و احساس اینکه سایت خیلی سبک و سریع کار میکنه.
مرحله چهارم: ترکیب شدن با Client Components
اگه داخل یک Server Component از یک Client Component استفاده کرده باشی، Next.js خیلی باهوش رفتار میکنه.
مثلاً فرض کن یه صفحه داری که اینطوریه:
// Server Component import Button from “./Button”; // Client Component export default async function Page() { const data = await getData(); return ( <div> <h1>Products</h1> <Button /> </div> ); }
پشتصحنه چه اتفاقی میفته؟
- سرور بخش سروری (مثل <h1> و دیتاها) رو به HTML تبدیل میکنه
- بخش کلاینتی رو به صورت جاوااسکریپت جداگانه به مرورگر میفرسته
- مرورگر فقط همون قسمت کلاینتی رو هیدرات (Hydrate) میکنه
یعنی چی؟
یعنی کل صفحه نیاز به جاوااسکریپت نداره، فقط اون بخش کوچیکی که تعامل داره. این باعث میشه:
- خیلی کد کمتر دانلود بشه
- مرورگر کمتر تحت فشار باشه
- سایت روانتر و سریعتر لود بشه
مرحله پنجم: رندر مجدد هنگام تغییر روت
وقتی داخل یک سایت Next.js به صفحه دیگه میری، مثل قبل نیست که React همهچیز رو از اول بسازه. اینجا Next.js با عقلانیت رفتار میکنه:
فقط کامپوننتهای سروری مربوط به صفحه جدید رو اجرا میکنه
بخشهای مشترک (مثل layout و header) دوباره اجرا نمیشن
فقط بخشهای مورد نیاز برای صفحه جدید HTML جدید میسازن
این یعنی navigation خیلی سریعتر از قبل.
قوانین مهمی که باید رعایت کنی
Server Components چند قانون مهم دارن:
- نمیتونی از state استفاده کنی
سروریه، پس تعامل کاربر اینجا معنی نداره. - نمیتونی از event handler استفاده کنی
یعنی چیزی مثل onClick عمل نمیکنه. - نمیتونی به window یا document دسترسی داشته باشی
چون اینها فقط توی مرورگر وجود دارن، نه سرور. - اما میتونی مستقیم دیتا بگیری
این یکی از جذابترین مزیتهاست.
خلاصه: Server Componentها پشتصحنه همه کارها رو انجام میدن
– اجرا روی سرور
– خروجی HTML
– بدون ارسال جاوااسکریپت اضافی
– ترکیب هوشمندانه با Client Components
– انتقال دیتا و لودینگ خیلی سریع
به شکل ساده:
کاری میکنن سایت هم سریع باشه، هم سبک، هم امن.
مزایا و کاربردهای Server Components — چرا انقدر مهم شدن؟
تا اینجای کار فهمیدیم Server Componentها چیه، چطور کار میکنن و چه تفاوتی با Client Componentها دارن. حالا سوال اصلی اینه:
چرا این همه سر و صدا کردن؟ واقعاً چقدر مهمن؟ خیلی زیاد
ولی چون این “خیلی زیاد” برای کسی که تازهکاره شاید نامفهوم باشه، بیایم قدمبهقدم درباره مزایای واقعی و کاربردهای عملی Server Components صحبت کنیم.
1. کاهش چشمگیر حجم جاوااسکریپت
یکی از بزرگترین مشکلات سایتهای ریاکتی اینه که برای لود شدن باید کلی جاوااسکریپت دانلود و اجرا بشه. این موضوع باعث میشه:
• لود اولیه سنگین بشه
• سرعت گوشیهای ضعیف شدیداً پایین بیاد
• مصرف باتری و CPU بالا بره
اما Server Components بخش بزرگی از کار رو به سرور منتقل میکنن. پس:
• خیلی از کامپوننتها دیگه اصلاً جاوااسکریپت ندارن
• فقط خروجی HTML ارسال میشه
• مرورگر سبکتر میشه
• تجربه کاربری سریعتر حس میشه
مثلاً اگه یک صفحه 100 کیلوبایت جاوااسکریپت لازم داشت، ممکنه با Server Components به 20 کیلوبایت یا کمتر برسه. این یعنی 5 برابر سریعتر شدن بدون هیچ کار عجیب و غریبی.
2. امنیت بالاتر بهصورت طبیعی
چون سرور کامپوننتها روی سرور اجرا میشن، میتونن:
- مستقیماً به دیتابیس وصل بشن
- به فایلهای سرور دسترسی داشته باشن
- APIهای خصوصی رو استفاده کنن
- و کاربر هیچوقت این کدها رو نمیبینه.
این یعنی:
- دیگه لازم نیست برای هر کار ساده API جدا بسازی
- هیچ اطلاعات حساسی سمت کاربر نمیره
- امنیت پروژه خودبهخود بهتر میشه
این مزیت برای تازهکارها فوقالعادهست چون معمولاً ساختن APIهای امن کار سختیه.
3. اجرای سریعتر (Performance عالی)
چرا اجرای سروری سریعتره؟
- سرورها معمولاً خیلی قویتر از گوشی و لپتاپ کاربر هستن
- اینترنت بین سرورها معمولاً فوقسریع و داخلیه
- پردازشها بهینه و پایدارتر انجام میشه
- خروجی فقط یک HTML سبک به کاربر میرسه
به همین دلیل صفحات ساخته شده با Server Components معمولاً:
- خیلی سریع لود میشن
- کمتر لگ میزنن
- توی نَویگیشن سبکتر عمل میکنن
- انگار کل سایت «سبک و روغنکاریشده» میشه!
4. قابلیت async در کامپوننتها
تا قبل از RSC، کامپوننتها نمیتونستن مستقیماً await داشته باشن. ولی حالا:
export default async function Page() { const user = await fetchUser(); return <div>{user.name}</div>; }
این یعنی چی؟
– گرفتن داده فوقالعاده ساده میشه
– کد تمیزتر میشه
– دیگه نیاز نیست از useEffect و state استفاده کنی فقط برای گرفتن دیتا
– رندر اولیه خیلی سریعتر انجام میشه
– این باعث میشه تازهکارها خیلی راحتتر بتونن پروژههای واقعی بسازن.
5. سازگاری عالی برای صفحات فروشگاه، وبلاگ، داشبورد و …
هرجا که نیاز به داده داری ولی تعامل کاربری زیاد نیست، Server Components بهترین انتخابه. مثلاً برای: صفحه محصولات، صفحه بلاگ، صفحه پروفایل، داشبوردهای سبک، صفحه اصلی سایت، صفحه لیستها (لیست پستها، لیست فیلمها، لیست کاربران و …)
این صفحات معمولاً:
- یکبار لود میشن
- دیتا زیاد دارن
- حرکتی ندارن (کلیک و منو و … خیلی کم)
- پس کاملاً مناسب Server Components هستن.
6. کاهش پیچیدگی کدنویسی
این شاید بزرگترین هدیه Next.js باشه. قبلاً تو باید:
- بکاند مینوشتی
- API میساختی
- Client Side Data Fetching انجام میدادی
- State managment انجام میدادی
- از لایبرریهایی مثل SWR استفاده میکردی
اما حالا:
- یک Server Component ساده
- یک fetch
- یک return
تموم شد!
کدت نصف میشه، باگها کمتر میشن، سرعتت بیشتر میشه.
محدودیتها و نکات مهم
توی بخشهای قبلی درباره مزایا، کاربردها و نحوه کارکرد Server Components صحبت کردیم. اما برای اینکه کامل مسلط بشی، باید محدودیتها و نکات مهمش رو هم بشناسی. چون هیچ تکنولوژیای کامل نیست، و Server Components هم یکسری محدودیت دارن که اگه بدونی، انتخابهات خیلی دقیقتر میشه.
1. محدودیت اول: نبودن state داخل Server Components
این کاملاً منطقیه. چون Server Components سمت سرور اجرا میشن و کاری با تعامل کاربر ندارن، پس طبیعیه که:
- useState
- useEffect
- useRef
- useReducer
و هر چیزی که مربوط به حالت در مرورگر باشه اینجا کار نمیکنن.
این یعنی اگه میخوای:
- دکمهای بسازی که با کلیک باز و بسته بشه
- یک منو که باز و بسته بشه
- یک فرم که ورودی کاربر رو نگه داره
باید اون بخش رو تبدیل به Client Component کنی. فقط کافیه بالای فایل بنویسی: “;use client”
2. محدودیت دوم: نبودن Event Handlerها
هر چیزی مثل:
- onClick
- onChange
- onSubmit
- onHover
اینها هم فقط در کلاینت کار میکنن.
چون رویدادها مربوط به مرورگر هستن و سرور که رویداد کاربر رو حس نمیکنه.
3. محدودیت سوم: نبود دسترسی به window و document
تو کامپوننت سروری نمیتونی بنویسی:
window.location document.querySelector localStorage
چون اینا فقط توی مرورگر هستن، نه سرور.
اگه این چیزا رو لازم داری ← Client Component
4. محدودیت چهارم: وجود مرز بین سرور و کلاینت
وقتی یک Server Component یک Client Component رو داخل خودش وارد میکنه، Next.js مرزی بین اینها ایجاد میکنه.
این مرز باعث میشه:
- مقادیر ساده (string, number, boolean) قابل انتقال باشن
- آبجکتهای پیچیده یا توابع به صورت مستقیم منتقل نشن
این چیزیه که باید هنگام طراحی ساختار صفحه حواست بهش باشه.
5. محدودیت پنجم: همهچیز سروری نیست
اگه کل پروژه رو با Server Component بسازی، ممکنه به جای اینکه سریعتر بشه، حتی بدتر هم بشه! چرا؟ چون:
• هر بار روت عوض میشه سرور دوباره باید کامپوننتها رو رندر کنه
• اگه درخواستها سنگین باشن ممکنه فشار روی سرور بالا بره
• بخشهای تعاملی زیاد نیاز به Client Component دارن
پس بهترین روش ترکیبی هست.
خب، بالاخره کِی از Server و کِی از Client استفاده کنیم؟
زمان مناسب برای Server Component وقتیه که:
- صفحه دادهمحور داری (مثل لیست محصولات، بلاگ، پروفایل)
- تعامل کاربر کم هست
- میخوای سرعت اولیهی لود بالا باشه
- میخوای مستقیم از دیتابیس اطلاعات بگیری
- اطلاعات حساس داری و امنیت برات مهمه
- میخوای جاوااسکریپت کمتر دانلود بشه
بهترین انتخاب: Server Component
زمان مناسب برای Client Component وقتیه که:
- نیاز به state داری
- نیاز به رویداد داری
- UI تعاملی داری
- پنلهای قابل باز و بسته شدن
- انیمیشنهای سمت کاربر
- فرمهای پیچیده
بهترین انتخاب: Client Component
جمعبندی نهایی
Server Components برای دیتا، سرعت، امنیت و کاهش حجم جاوااسکریپت عالیان.
Client Components برای تعامل کاربر، دکمه، منو و انیمیشن ضروریان.
ترکیب این دو باعث میشه سایتت هم قدرتمند باشه، هم سریع، هم سبک، هم قابل مدیریت. Next.js با آوردن Server Components عملاً کاری کرد که بتونی:
- هم بکاند داشته باشی
- هم فرانتاند سریع
- هم امنیت خوب
- هم پیچیدگی کمتر
بدون اینکه لازم باشه کلی کد بزنی یا ساختار عجیب طراحی کنی.
سوالات متداول
1. آیا میشه یک کامپوننت هم سروری باشه هم کلاینتی؟
نه. یک کامپوننت فقط میتونه یکی از این دو حالت باشه. ولی یک کامپوننت سروری میتونه کامپوننت کلاینتی داخل خودش داشته باشه.
2. اگه “use client” نذارم، کامپوننت چی میشه؟
پیشفرض Next.js = Server Component
3. آیا استفاده از Server Components لازمه؟
خیر، اجباری نیست. ولی اگه میخوای سرعت سایتت بالا باشه و با داده زیاد کار میکنی، به شدت پیشنهاد میشه.
4. آیا میشه داخل Server Component دیتا fetch کنم؟
بله و اتفاقاً این بهترین جای ممکن برای گرفتن اطلاعاته.
5. آیا همه صفحهها بهتره Server Component باشن؟
نه. صفحههایی که تعامل زیادی دارن بهتره کلاینت باشن.
6. آیا Server Components جایگزین API میشن؟
در بسیاری از مواقع بله. چون میتونی مستقیماً توی سرور دیتا بگیری.
همراهان عزيز تمسی، شما می توانید جديدترین مطالب ما را در اینستاگرام و تلگرام تمسی دنبال کنید. اگر دنبال کیفیت بالاتر این آموزش ها هستید میتوانید از کانال یوتیوب ما استفاده کنید. برای عضویت در شبکه های مجازی ما از دکمه های زیر استفاده کنید.
یوتیوب تلگرام اینستاگرام
