事前レンダリング

<t> コンポーネントと t pipe はブラウザで翻訳される。Angular アプリをプリレンダリングすれば、代わりにビルド時にページを翻訳できる。その後、ユーザーと検索エンジンは、すべての言語で完全に翻訳されたHTMLを受け取る。

サンプルプロジェクトでは、言語ごとに1ページをプリレンダリングする。ドイツ語のページを開いて、ネットワークトラフィックを調べる。Magic Translate APIへのリクエストは行われない。

リゾルバーで翻訳する

言語のルートパラメータを追加し、ルートリゾルバーの translate メソッドを使ってページのテキストを翻訳する。結果を Angular の TransferState に保存して、ブラウザがハイドレーション後に再び翻訳する代わりにそれを再利用する。

import { inject, makeStateKey, TransferState } from '@angular/core';
import { ResolveFn } from '@angular/router';
import { MagicTranslate, type Languages } from '@magic-translate/angular';

const texts = {
  title: 'Welcome to our shop',
  intro: 'This page was translated when the app was built.'
};

type Texts = Record<keyof typeof texts, string>;

export const translationsResolver: ResolveFn<Texts> = async (route) => {
  const transferState = inject(TransferState);
  const magicTranslate = inject(MagicTranslate);
  const lang = (route.paramMap.get('language') ?? 'en') as Languages;
  const key = makeStateKey<Texts>(`translations-${lang}`);

  const transferred = transferState.get(key, null);
  if (transferred) return transferred;

  const entries = await Promise.all(
    Object.entries(texts).map(async ([name, text]) => [
      name,
      await magicTranslate.translate(text, { lang })
    ])
  );
  const translations = Object.fromEntries(entries) as Texts;
  transferState.set(key, translations);
  return translations;
};

// app.routes.ts
export const routes: Routes = [
  {
    path: ':language',
    component: Page,
    resolve: { translations: translationsResolver }
  }
];

withComponentInputBinding() を provideRouter に追加して、解決済みの翻訳を入力としてページコンポーネントに渡す。

リゾルバーはビルドサーバー上で動作するので、秘密鍵で変換される。これを ng build を実行する MAGIC_TRANSLATE_SECRET_KEY 環境変数として、たとえばCIシークレットとして設定する。provideMagicTranslate には渡さないで。その設定はブラウザでも実行される。

すべての言語をプリレンダリングする

getPrerenderParams でプリレンダリングする言語を Angular に教えて:

// app.routes.server.ts
import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  {
    path: ':language',
    renderMode: RenderMode.Prerender,
    getPrerenderParams: async () =>
      ['en', 'de', 'zh'].map((language) => ({ language }))
  }
];

ng build は、言語ごとに翻訳された HTML ファイルを1つ書き込むようになった。翻訳はキャッシュされるので、変更されたテキストだけが後のビルドでの使用にカウントされる。