تمثیل «مهندس برق و ساختمان نوساز»: درک دقیق Hydration و نقش RSC در Next.js

برای درک اینکه چرا ری‌اکت در لود اولیه مرورگر، کدهای HTML را از نو نمی‌سازد (DOM را آپدیتِ کامل نمی‌کند)، فرض کنید در حال ساخت یک ساختمان هوشمند هستیم:

۱. اسکلت و نمای ساختمان (همان HTML اولیه سرور)

وقتی کاربر آدرس سایت را می‌زند، سرور Next.js بلافاصله یک ساختمان کامل با تمام دیوارها، درها، پنجره‌ها و نمای ظاهری می‌سازد و به شهر (مرورگر کاربر) می‌فرستد.

کاربر در کسری از ثانیه ساختمان را می‌بیند. ظاهرش کامل است؛ دکمه‌های آسانسور و کلیدهای برق روی دیوار نصب هستند. اما یک مشکل وجود دارد: ساختمان هنوز برق‌کشی نشده است. اگر کلید برق را بزنید هیچ اتفاقی نمی‌افتد (Non-interactive Preview).

۲. نقشه مهندسی ساختمان (همان RSC Payload)

همزمان با ارسال ساختمان، سرور یک نقشه‌ی بسیار دقیق هم برای مرورگر می‌فرستد. این نقشه به زبان آدمیزاد نیست، بلکه پر از کدهای مهندسی است که می‌گوید: «در طبقه دوم، یک کلید برق (Client Component) داریم که باید این‌طور کار کند و در طبقه اول فقط یک تابلوی نقاشی (Server Component) داریم که اصلاً نیازی به برق ندارد».

۳. ورود مهندس ری‌اکت به صحنه (دانلود JavaScript)

حالا مرورگر فایل‌های جاوا اسکریپت را دانلود می‌کند. این یعنی «مهندس ارشد ری‌اکت» از خواب بیدار می‌شود و به محل ساختمان (مرورگر) می‌رسد.

۴. عملیات برق‌کشی (همان Hydration)

حالا سوال مهم این است: وقتی مهندس ری‌اکت به ساختمان می‌رسد، آیا برای اینکه دکمه‌های برق را فعال کند، ساختمان (DOM) را با بولدوزر خراب می‌کند تا از نو بسازد؟

قطعا خیر!

مهندس ری‌اکت نقشه (RSC Payload) را در یک دست می‌گیرد و وارد ساختمان (HTML رندر شده) می‌شود. او با دقت اتاق‌ها را چک می‌کند:

• «آها، اینجا یک دکمه لایک (Like Button) هست. طبق نقشه، باید به آن جریان برق وصل کنم.»

• او فقط سیم‌کشی‌ها را انجام می‌دهد و سنسورها را به دکمه‌ها وصل می‌کند (در برنامه‌نویسی یعنی Attach کردن Event Handlerها مثل onClick به عناصر موجود در DOM).

به این فرآیند که مهندس ری‌اکت به ساختمانِ بی‌جانِ HTML جان می‌بخشد و آن را تعاملی می‌کند، Hydration (هیدراته کردن یا آب‌رسانی) می‌گویند.

⚠️ نکته طلایی (Hydration Error):

چه زمانی مهندس ری‌اکت مجبور به تخریب می‌شود؟

فقط زمانی که بین ساختمان (HTML) و نقشه (RSC Payload) مغایرتی وجود داشته باشد. مثلاً نقشه می‌گوید اینجا باید یک در آبی باشد، اما سرور به اشتباه یک دیوار آجری ساخته است. در این حالت مهندس ری‌اکت گیج می‌شود، ارور می‌دهد (Hydration Mismatch Error) و مجبور می‌شود آن قسمت دیوار را خراب کند و خودش از نو بسازد (Re-render روی کلاینت). اما در یک اپلیکیشن سالم، هیچ تخریبی (Rebuilding DOM) در کار نیست!