Angular SSR va hydration

SSR HTMLni serverda ko‘rsatadi va hidratsiya holat va tinglovchilarni biriktirish orqali mijozda HTMLni qayta ishlatadi.

SSR va Hydration Essentials

• SSR: tezroq birinchi bo‘yash va SEO uchun serverda HTMLni oldindan ko‘rsatadi.
• Hidratsiya: holat va tinglovchilarni ulash orqali mijozda server HTML-dan qayta foydalanadi (to‘liq qayta ko‘rsatilmaydi).
• Determinizm: render chiqishini bashorat qilish mumkin; effektlarni idempotent qilish.

// Deterministic render (no random IDs during render)
@Component({ template: `<div>Hello</div>` })
class App {}

Hidratsiya uchun xavfsiz tekshiruvlar

Faqat brauzerga xos API-larni kod brauzerda ishlayotgandagina chaqiring.

Xususiyatlarni aniqlash yoki platforma tekshiruvlari bilan qo‘riqlash.

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

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

const platformId = inject(PLATFORM_ID);
const onBrowser = isPlatformBrowser(platformId);

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>
  `
})
class App {
  isBrowser = typeof window !== 'undefined';
}

bootstrapApplication(App);

<app-root></app-root>

Misol tushuntirildi

• isBrowser: Kod brauzerda ishlayotganligini tekshirish uchun typeof window !== 'undefined' dan foydalanadi.
• Hidratsiya uchun xavfsiz: serverni ko‘rsatish paytida faqat brauzer API-lariga kirishdan qochadi; ularni faqat mijozga hidratsiyadan keyin o‘qiydi.
• SSR → Hydration: server dastlabki HTML’ni render qiladi; mijoz (client) butun ko‘rinishni qayta render qilmasdan tinglovchilar (listener) va state’ni biriktiradi.

SSR bo‘yicha maslahatlar

• Sof, deterministik shablonlardan foydalaning (render paytida tasodifiy qiymatlardan qoching).
• Og‘ir ishlarni hidratsiyadan keyingi effektlarga kechiktiring.
• Mijozda SSR tomonidan olingan ma’lumotlarni qayta ishlatish uchun TransferState-dan foydalaning.

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

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