مکانیزم کارکرد سرور کامپوننت ها

برای درک اینکه Next.js چطور صفحات را با این سرعت بالا لود می‌کند، باید ببینیم این فریم‌ورک چگونه کارهای رندر را بین سرور و کلاینت (مرورگر) تقسیم می‌کند. این فرآیند بسته به اینکه کاربر برای اولین بار وارد سایت می‌شود یا در حال جابه‌جایی بین صفحات (Subsequent Navigations) است، رفتارهای متفاوتی دارد.

۱. اتفاقات سمت سرور (On the Server)

وقتی درخواستی به سرور Next.js می‌رسد، فرآیند رندر به صورت تکه‌تکه (بر اساس هر بخش از مسیر مثل Layoutها و Pageها) آغاز می‌شود. در این مرحله، Next.js از دو خروجی رونمایی می‌کند:

• رندر سرور کامپوننت‌ها: تمام Server Componentها اجرا شده و خروجی آن‌ها به یک فرمت داده‌ای ویژه و فشرده به نام React Server Component Payload (یا به اختصار RSC Payload) تبدیل می‌شود.

• تولید نسخه اولیه HTML: ری‌اکت با ترکیب کدهای کلاینت کامپوننت‌ها و دیتای متنیِ RSC Payload، یک نسخه HTML خام و استاتیک تولید می‌کند تا فوراً به مرورگر بفرستد.

دیتای RSC Payload چیست و شامل چه چیزهایی است؟

این پِیلود یک نمایش باینری، بسیار فشرده و متنی از درختِ رندر شده‌ی کامپوننت‌های سروری است. مرورگر با خواندن این دیتا می‌فهمد چطور باید ظاهر سایت را به‌روز کند. این فایل حاوی ۳ چیز حیاتی است:

1. خروجی نهایی و رندر شده‌ی تمام کامپوننت‌های سروری.

2. جایگاه‌های خالی (Placeholders): نشانه‌گذاری نقاطی از صفحه که باید کامپوننت‌های کلاینتی در آنجا قرار بگیرند به همراه آدرس فایل‌های جاوااسکریپت آن‌ها.

3. تمام پروپ‌هایی (Props) که از یک سرور کامپوننت به یک کلاینت کامپوننت پاس داده شده‌اند.

۲. اتفاقات سمت کلاینت در اولین ورود (First Load)

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

1. نمایش آنی ظاهر سایت (HTML): مرورگر فوراً فایل HTML دریافتی را رندر می‌کند. کاربر در کسری از ثانیه ظاهر کامل سایت را می‌بیند، اما این صفحه هنوز غیرتعاملی است (یعنی اگر روی دکمه‌ها کلیک کند، اتفاقی نمی‌افتد).

2. تطبیق درخت‌ها (RSC Payload): ری‌اکت در مرورگر شروع به خواندن دیتای RSC Payload کرده و درخت کامپوننت‌های سرور و کلاینت را با هم جفت‌وجور و همگام می‌کند.

3. فعال‌سازی تعاملات (Hydration): فایل‌های جاوااسکریپت کلاینت لود می‌شوند تا عملیات هیدراسیون صورت بگیرد.

مفهوم هیدراسیون (Hydration) چیست؟

هیدراسیون (آبرسانی به کدهای خشک) فرآیندی است که در آن، ری‌اکت رویدادها (Event Handlers مثل onClick یا onChange) را به المان‌های بی‌روح و استاتیک HTML که در مرحله اول روی صفحه نشسته بودند، متصل می‌کند. با این کار، سایت کاملاً زنده و تعاملی می‌شود.

۳. جابه‌جایی‌های بعدی بین صفحات (Subsequent Navigations)

وقتی کاربر در سایت گشت‌وگذار می‌کند و به صفحه جدیدی می‌رود، Next.js دیگر نیازی به تکرار مراحل بالا ندارد! در ناوبری‌های بعدی:

• دانلود مستقیم دیتای فشرده: سرور Next.js دیگر فایل HTML جدیدی تولید نمی‌کند. بلکه فقط و فقط فایل سبکِ RSC Payload مربوط به صفحه جدید را تولید (یا از کَش لود) کرده و به مرورگر می‌فرستد.

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

خلاصه فرآیند (Recap)

• در سرور: کدهای سروری تبدیل به دیتای متنی RSC Payload می‌شوند و یک خروجی HTML اولیه برای لود سریع ساخته می‌شود.

• در کلاینت (ورود اول): ابتدا HTML بی‌روح نشان داده می‌شود، سپس RSC Payload ساختار را هماهنگ می‌کند و در نهایت با فرآیند Hydration دکمه‌ها و تعاملات زنده می‌شوند.

• در صفحات بعدی: دیگر خبری از HTML نیست؛ فقط دیتاهای سبک RSC Payload جابه‌جا می‌شوند تا کلاینت خودش صفحه را به‌روزرسانی کند.