معماری MRAH

MRAH مخفف Modular Rendering & Adaptive Hydration هست.
این یک روش معماریه که برای بهینه‌سازی SSR (Server Side Rendering) و Hydration توی ری‌اکت استفاده میشه.

دو بخش اصلی داره:

1. Modular Rendering → صفحه رو به ماژول‌های مستقل تقسیم می‌کنی که هرکدوم جداگانه رندر بشن.
2. Adaptive Hydration → هیدریت شدن این ماژول‌ها رو به صورت هوشمند انجام میدی، نه همه با هم.

بخش اول: Modular Rendering

ایده اینه که صفحه رو به قسمت‌های جدا تقسیم کنیم:

• هدر
• منوی کناری
• محتوای اصلی
• فوتر

هر بخش:

• جداگانه از سرور رندر میشه.
• فقط وقتی نیاز باشه هیدریت میشه.

مزیتش اینه که لازم نیست همه جاوااسکریپت یک‌جا لود و اجرا بشه.

بخش دوم: Adaptive Hydration

اینجا زمان و شرایط هیدریت شدن رو هوشمندانه کنترل می‌کنیم:

• وقتی در viewport کاربر باشه → هیدریت کن.
• وقتی کاربر idle باشه → هیدریت کن.
• فقط وقتی کاربر تعامل داشته باشه → هیدریت کن.
• بعضی بخش‌ها رو اصلاً هیدریت نکن اگه نیاز به تعامل ندارن.

مثال ساده در ری‌اکت / Next.js

فرض کن ما یک صفحه داریم که شامل هدر، محتوای اصلی، سایدبار و فوتر هست.

import dynamic from 'next/dynamic';
import { LazyHydrate } from 'react-lazy-hydration';

const Header = dynamic(() => import('../components/Header'));
const MainContent = dynamic(() => import('../components/MainContent'));
const Sidebar = dynamic(() => import('../components/Sidebar'));
const Footer = dynamic(() => import('../components/Footer'));

export default function Home() {
  return (
    <>
      {/* هدر رو بلافاصله هیدریت می‌کنیم چون کلیدیه */}
      <LazyHydrate whenVisible>
        <Header />
      </LazyHydrate>

      {/* محتوای اصلی رو وقتی کاربر آماده تعامل شد */}
      <LazyHydrate whenIdle>
        <MainContent />
      </LazyHydrate>

      {/* سایدبار فقط وقتی دیده شد */}
      <LazyHydrate whenVisible>
        <Sidebar />
      </LazyHydrate>

      {/* فوتر رو وقتی کاربر به پایین صفحه رسید */}
      <LazyHydrate whenVisible>
        <Footer />
      </LazyHydrate>
    </>
  );
}

مزیت‌های MRAH

• کاهش حجم جاوااسکریپت اولیه → فقط بخش‌های ضروری زود هیدریت میشن.
• بهبود سرعت لود اولیه (TTFB و TTI).
• کاهش فشار CPU در دستگاه‌های ضعیف.
• تجربه کاربری روان‌تر چون کاربر سریع می‌تونه با بخش‌های مهم تعامل داشته باشه.

نتیجه

MRAH کمک می‌کنه:

• اپلیکیشن ری‌اکتت هم سریع لود بشه، هم سریع قابل تعامل باشه.
• با تقسیم و زمان‌بندی درست، از منابع سیستم کاربر بهینه استفاده بشه.
• مخصوصاً توی پروژه‌هایی با SSR مثل Next.js خیلی اثر مثبت داره.