사전 렌더링

<t> 구성 요소와 t pipe 브라우저에서 번역돼.Angular 앱을 미리 렌더링하면 빌드 시에 페이지를 번역할 수 있어.그러면 사용자와 검색 엔진은 모든 언어로 완전히 번역된 HTML을 받게 돼.

예제 프로젝트는 언어당 한 페이지를 미리 렌더링해.독일어 페이지를 열고 네트워크 트래픽을 검사해. Magic Translate API에는 요청이 없어.

리졸버로 번역해.

언어에 경로 매개 변수를 추가하고 경로 해석기에서 translate 메서드를 사용하여 페이지 텍스트를 번역해.결과를 Angular's 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 파일을 하나씩 써.번역이 캐시되므로 변경된 텍스트만 이후 빌드 사용량에 반영돼.