SSR و هیدریشن (SSR & Hydration)

«SSR (رندر سمت سرور)» یعنی ساخت HTML در سرور. «هیدریشن (Hydration)» یعنی همان HTML در مرورگر دوباره جان می گیرد. سپس رویدادها و حالت ها وصل می شوند. نتیجه سریع تر دیده می شود و سئو بهتر می شود.

مفهوم اصلی SSR و هیدریشن

در SSR، خروجی اولیه آماده است. در هیدریشن، همان خروجی دوباره استفاده می شود. سپس لیسنرها و state وصل می شوند. دوباره سازی کامل انجام نمی شود.

• SSR: بارگذاری اولیه سریع تر و سئو بهتر.
• Hydration: اتصال state و رویدادها بدون رندر دوباره.
• Determinism: خروجی پیش بینی پذیر؛ افکت ها idempotent باشند.

// Deterministic render (no random IDs during render)
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<div>Hello</div>`
})
export class AppComponent {
}

مشاهده در ادیتور

نکته: برای راه اندازی برنامه، صفحه App Bootstrap را ببین. برای مسیرها هم Router را بررسی کن. برای درخواست ها نیز HTTP را ببین. همچنین SSR و هیدریشن را به عنوان مرجع نگه دار.

بررسی های ایمن در هیدریشن

فقط در مرورگر از APIهای مرورگر استفاده کن. اول بررسی کن که مرورگر هست یا نه. سپس کد مرتبط را اجرا کن.

// Simple feature detection
const isBrowser: boolean = typeof window !== 'undefined';

// Angular platform check
import { PLATFORM_ID, inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

const platformId: object = inject(PLATFORM_ID);
const onBrowser: boolean = isPlatformBrowser(platformId);

مشاهده در ادیتور

نمونه ساده SSR → Hydration

این نمونه بررسی می کند کد در مرورگر اجرا می شود یا نه. سپس مقدار را نمایش می دهد.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>SSR & Hydration</h3>
    <p>Is Browser: {{ isBrowser }}</p>
  `
})
export class AppComponent {
  isBrowser: boolean = typeof window !== 'undefined';
}

bootstrapApplication(AppComponent);

مشاهده در ادیتور

نکات SSR در عمل

قالب ها باید خالص و قابل پیش بینی باشند. کارهای سنگین را بعد از هیدریشن انجام بده. داده SSR را دوباره استفاده کن.

import { TransferState, makeStateKey } from '@angular/platform-browser';

const DATA_KEY = makeStateKey<any>('initial-data');
// Server: state.set(DATA_KEY, data);
// Client: const cached = state.get(DATA_KEY, null);

مشاهده در ادیتور

هشدار: شناسه ها را در سرور و مرورگر پایدار نگه دار. از مقدارهای تصادفی هنگام رندر اولیه دوری کن. اندازه گیری ها و لیسنرها را تا بعد از هیدریشن به تعویق بینداز.

گام های عملی پیاده سازی

1. قالب ها را خالص و بدون تصادف نگه دار.
2. پیش از دسترسی به window، محیط را بررسی کن.
3. افکت ها را پس از هیدریشن اجرا کن.
4. از TransferState برای جلوگیری از درخواست دوباره استفاده کن.
5. برای مسیرها از Router به صورت پایدار استفاده کن.

جمع بندی سریع

• SSR صفحه اولیه را سریع می سازد.
• هیدریشن فقط اتصال ها را برمی گرداند.
• کد غیرقطعی هیدریشن را می شکند.
• قبل از window، محیط را چک کن.
• داده SSR را با TransferState کش کن.