Jassif Team Institution

Angular SSR & Hydration

SSR சர்வரில் HTML-ஐ வழங்குகிறது, மற்றும் hydration கிளையண்டில் அந்த HTML-ஐ மீண்டும் பயன்படுத்துகிறது மாநிலம் மற்றும் கேட்போர்களை இணைப்பதன் மூலம்.

SSR & Hydration அத்தியாவசியங்கள்

SSR: வேகமான முதல் ஓவியம் மற்றும் SEO-க்காக சர்வரில் HTML-ஐ முன்கூட்டியே வழங்குகிறது.

Hydration: மாநிலம் மற்றும் கேட்போர்களை இணைப்பதன் மூலம் கிளையண்டில் சர்வர் HTML-ஐ மீண்டும் பயன்படுத்துகிறது (முழு மறு-வழங்கல் இல்லை).

Determinism: வழங்கல் வெளியீட்டைக் கணிக்கக்கூடியதாக வைத்திருங்கள்; விளைவுகளை idempotent-ஆக ஆக்குங்கள்.

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

Hydration-பாதுகாப்பான சரிபார்ப்புகள்

பிரௌசர்-மட்டும் APIs-ஐ பிரௌசரில் இயங்கும்போது மட்டுமே அழைக்கவும்.

அம்சக் கண்டறிதல் அல்லது தள சரிபார்ப்புகளுடன் பாதுகாக்கவும்.

// எளிய அம்சக் கண்டறிதல்
const isBrowser = typeof window !== 'undefined';

// Angular தள சரிபார்ப்பு
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);

SSR குறிப்புகள்

தூய, கணிக்கக்கூடிய டெம்ப்ளேட்டுகளைப் பயன்படுத்தவும் (வழங்கலின் போது சீரற்ற மதிப்புகளைத் தவிர்க்கவும்).

கனரக வேலையை post-hydration இயங்கும் விளைவுகளுக்குத் தள்ளுபடி செய்யவும்.

கிளையண்டில் SSR-பெறப்பட்ட தரவை மீண்டும் பயன்படுத்த TransferState பயன்படுத்தவும்.

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);

SSR vs CSR ஒப்பீடு

SSR & Hydration வினாடி வினா