مفهوم Hydration در پروژه‌های Angular

Hydration در Angular به فرآیندی اشاره دارد که در آن یک برنامه که روی سرور یا Static Site Generator (SSG) رندر شده، هنگام بارگیری در مرورگر، توسط JavaScript فعال می‌شود تا تعامل‌پذیری (interactivity) را ممکن سازد.

چرا Hydration مهم است؟

در SSR (Server-Side Rendering)، محتوای اولیه صفحه در سرور تولید شده و به مرورگر ارسال می‌شود. اما این فقط HTML و CSS است و شامل تعاملات کاربری (مانند کلیک، رویدادها و تغییرات در داده‌ها) نیست.
Hydration باعث می‌شود Angular مجدداً این HTML را گرفته و آن را به یک برنامه کاملاً تعاملی تبدیل کند.
این تکنیک به بهبود SEO و کاهش TTI (Time To Interactive) کمک می‌کند، زیرا کاربران می‌توانند صفحه را قبل از بارگذاری کامل اسکریپت‌ها ببینند.

چگونه Hydration در Angular کار می‌کند؟

سرور HTML اولیه را رندر می‌کند: در SSR (مثلاً با Angular Universal)، محتوای اولیه صفحه در سرور ساخته شده و برای کاربر ارسال می‌شود.
مروگر HTML را دریافت و نمایش می‌دهد: کاربر یک صفحه کاملاً استاتیک را مشاهده می‌کند که هنوز تعاملات Angular روی آن فعال نشده است.
Angular شروع به Hydrate کردن می‌کند: پس از بارگیری جاوااسکریپت، Angular HTML را بررسی کرده و آن را به یک SPA (Single Page Application) تبدیل می‌کند.
اتصال دوباره به DOM: Angular رویدادها و سرویس‌ها را دوباره به عناصر DOM متصل می‌کند تا برنامه فعال و قابل تعامل شود.

چالش‌های Hydration در Angular

Mismatch بین HTML سرور و کلاینت
- اگر خروجی SSR و رندر کلاینتی متفاوت باشد، Angular خطا می‌دهد. این اتفاق زمانی رخ می‌دهد که داده‌های سمت سرور و کلاینت همگام نباشند.
- مثال: اگر در سرور مقدار div به "Hello" تنظیم شده باشد اما در کلاینت "Hello World" باشد، Angular خطای hydration می‌دهد.
افزایش زمان Hydration در پروژه‌های بزرگ
- اگر برنامه سنگین باشد، فرآیند hydration می‌تواند طولانی شود و عملکرد را تحت تأثیر قرار دهد.
- راه‌حل: Partial Hydration (هیدراسیون جزئی) که در آن تنها بخش‌هایی از UI که لازم است hydrate شوند.
مدیریت حالت در زمان Hydration
- استفاده از TransferState API برای نگه داشتن وضعیت بین SSR و کلاینت کمک می‌کند که mismatch رخ ندهد.

فعال‌سازی SSR و Hydration در Angular

اگر بخواهید SSR را در پروژه Angular فعال کنید، می‌توانید از Angular Universal استفاده کنید:

نصب Angular Universal

ng add @angular/platform-server

پیکربندی SSR در `angular.json`

"server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
    "outputPath": "dist/your-app-server",
    "main": "src/main.server.ts",
    "tsConfig": "tsconfig.server.json"
  }
}

فعال‌سازی Hydration در `app.config.ts`

import { provideClientHydration } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration() // فعال‌سازی هیدراسیون در کلاینت
  ]
};

نتیجه‌گیری

Hydration در Angular یک مفهوم کلیدی در SSR و SSG است که به بهینه‌سازی عملکرد، بهبود SEO و کاهش زمان بارگذاری اولیه کمک می‌کند. این تکنیک به Angular اجازه می‌دهد که صفحات رندر شده در سرور را در مرورگر فعال کند و تعامل‌پذیری را فراهم سازد.

اگر برنامه شما نیاز به سرعت بالا، سئو بهتر و تجربه کاربری بهینه دارد، ترکیب SSR و Hydration یک راه‌حل ایده‌آل است.

مفهوم Hydration در پروژه‌های Angular