Angular"s Jamstack!!

Angularのプロジェクトを作成

npx @angular/cli new angular-jamstack --standalone

npm run startで起動

SPAです。 JavaScriptを無効化するとなにも表示されません。 (cmd + shift + p)

SSR化

npx ng add @nguniversal/express-engine

npm run dev:ssr

Hydration

SSRされてDocumentがくる。Frontに表示後またJSでbootstrapしておきかえてる。それをしないのが Hydration機能。

bootstrap前に操作したのが消える可能性がある。 Hydrationしたい。

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

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

console ↓

Angular hydrated 1 component(s) and 161 node(s), 0 component(s) were skipped. Note: this feature is in Developer Preview mode. Learn more at https://angular.io/guide/hydration.

失敗することもある。フロント側でAngularの外からDOMを追加したときなど。

app-rootにもどのように描画されたかでる。

<app-root _nghost-ng-c2702990751="" ng-version="16.0.3" ngh="0" ng-server-context="ssr|httpcache,hydration">

httpcache

サーバー側でリクエストしたAPIにはフロント側ではキャッシュしてあって最初の1回は再利用する。

サーバー側(cdn等)でキャッシュが変えってきた場合、フロントからもリクエストしないのでめっちゃ古いデータを表示する可能性もある。うまく使えばすごい便利そう。

app.config.ts

  providers: [provideHttpClient(), ]

app.component.ts

  user = signal<any>(undefined);

  http = inject(HttpClient);

  ngOnInit() {
    this.http.get('https://jsonplaceholder.typicode.com/users/1').subscribe(user => {
      this.user.set(user);
    })
  }

app.component.html

{{ user() | json }}

で表示される。ネットワークタブをみると通信されていないことがわかる。

DOMにjsonがいる

コンポーネントの作成

npx ng generate component profile

app.router.ts

export const routes: Routes = [{
  path: 'profile',
  component: ProfileComponent
}];

app.component.html

<router-outlet></router-outlet>

{{ user() | json }}

/profileをプリレンダリング(SG)する

npm run prerender

dist/angular-jamstack/browser/index.htmlに生成されている。

/profileもSGする。

angular.json

"prerender": {
  "builder": "@nguniversal/builders:prerender",
  "options": {
    "routes": [
      "/",
      "/profile"
    ]
  }

ビルド時に全部コンテンツが確定できるなら全てのページをプリレンダリング(SG)できる。 S3などにそのままホスティングできる!!

デメリットパスの設定がまだ手動です

npx http-server dist/angular-jamstack/browser

その他の記事

公開日 2023/05/31

Thanks you for reading.