Server-Side Rendering (SSR) merender Angular di server untuk performa dan SEO lebih baik.

Setup dengan Angular CLI

ng add @angular/ssr

Hydration

Angular 17+ mendukung client hydration — server merender HTML, lalu client mengambil alih tanpa re-render:

// app.config.server.ts
export const serverConfig = {
  providers: [provideClientHydration()],
}

Manfaat SSR

• SEO — search engine bisa membaca konten
• Performance — First Contentful Paint lebih cepat
• Social sharing — preview link yang benar

Defer Loading

@defer (on viewport) {
  <app-heavy-component />
} @placeholder {
  <p>Loading...</p>
}

⚠️ Hati-hati: window dan document tidak ada di server

Saat komponen kamu di-render di server (Node.js), API browser seperti window, document, atau localStorage tidak tersedia — kalau diakses langsung, build SSR akan crash. Gunakan isPlatformBrowser() untuk guard:

import { Component, inject, PLATFORM_ID, OnInit } from "@angular/core";
import { isPlatformBrowser } from "@angular/common";

@Component({ /* ... */ })
export class HelloComponent implements OnInit {
  private platformId = inject(PLATFORM_ID);

  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      // hanya dijalankan di browser
      const tema = localStorage.getItem("tema");
      window.addEventListener("scroll", this.onScroll);
    }
  }
}

Pola umum untuk feature yang perlu DOM API:

• Pindahkan ke ngAfterViewInit (selalu di browser).
• Kalau pakai library third-party yang butuh window (charts, animasi), wrap dengan @defer agar tidak ter-render di server.
• Pakai service abstraction yang return safe default di server (mis. service StorageService yang return null saat di server).