angular-ssr

@angular/ssr（サーバーサイドレンダリング）

バージョン： Angular 21（2025） タグ： SSR、ハイドレーション、事前レンダリング、SEO、Angular Universal

参考資料： SSR ガイド • ハイドレーション • @angular/ssr

API の変更点

このセクションでは、最近のバージョン固有の API の変更点について説明します。

• 新機能：インクリメンタルハイドレーション — すべてを一度にではなく、コンポーネントを段階的にハイドレートします ソース

• 新機能：ハイブリッドレンダリング — ルートごとにレンダリングモードを設定できます ソース

• 新機能：provideClientHydration — イベントのリプレイに対応した最新のハイドレーション設定

• 新機能：遅延可能ビュー（@defer） — SSR に対応しながらコンポーネントを遅延読み込みします

• 新機能：ngSkipHydration — 特定のコンポーネントのハイドレーションをオプトアウトします

• 非推奨：Angular Universal — @angular/ssr に移行してください

ベストプラクティス

• CLI で SSR を有効にします

ng add @angular/ssr

# Or create new project with SSR
ng new my-app --ssr

• クライアントハイドレーションを有効にします

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

export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration()
  ]
};

• パフォーマンス向上のため、インクリメンタルハイドレーションを使用します

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

export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration(withIncrementalHydration())
  ]
};

• 遅延読み込みには @defer を使用します

@Component({
  template: `
    @defer (on viewport) {
      <heavy-component />
    } @placeholder {
      <div>Loading...</div>
    }
  `
})
export class MainComponent {}

• isPlatformBrowser を使用してブラウザー固有のコードを処理します

import { PLATFORM_ID, Inject } from '@angular/core';

constructor(@Inject(PLATFORM_ID) private platformId: Object) {
  if (isPlatformBrowser(this.platformId)) {
    // Browser-only code
  }
}

• TransferState を使用して HTTP リクエストの重複を防ぎます

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

@Injectable()
export class DataService {
  constructor(private http: HttpClient, private transferState: TransferState) {}

  getData() {
    const DATA_KEY = makeStateKey('DATA');
    
    if (this.transferState.hasKey(DATA_KEY)) {
      return of(this.transferState.get(DATA_KEY, []));
    }
    
    return this.http.get('/api/data').pipe(
      tap(data => this.transferState.set(DATA_KEY, data))
    );
  }
}

• DOM を操作するコンポーネントではハイドレーションをスキップします

@Component({
  selector: 'app-third-party',
  host: {
    'ngSkipHydration': 'true'
  }
})
export class ThirdPartyComponent {}

• ルートごとにハイブリッドレンダリングを設定します

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  {
    path: 'dashboard',
    renderMode: RenderMode.Client
  },
  {
    path: 'blog/:slug',
    renderMode: RenderMode.Server
  },
  {
    path: 'about',
    renderMode: RenderMode.Prerender
  }
];

• サーバーサイドのロジックには platform-server を使用します

import { isPlatformServer } from '@angular/common';

constructor(@Inject(PLATFORM_ID) platformId: Object) {
  if (isPlatformServer(platformId)) {
    // Server-side only
  }
}