Angular20 の SSR 時の HttpClient を考える

DRANK

はじめに前回、HonoとAngular20でSSRする方法をまとめました。 Clientを比較していこうと思います。'hono/client' の hc を使ったRPCを使う'@angular/common/http' の HttpClient を使う'@angular/common/http' の httpResource を使う'hono/client' の hc を使ったRPC機能を使うHonoにはサーバー側で定義したAPI情報（schemaやroute情報）をフロントエンド側に伝搬するRPCという強力な機能があります。この機能はzodなど使い慣れたバリデータと組み合わせリクエスト/レスポンスのschemaの検証をすることができたり、どのAPIパスに対してどのレスポンスコードを返すか。などの検証までを行ってくれます。少し冗長ですが、以下のように schema → route → api を定義してRPC機能を体感しましょう。hono rpc の schemaまずはschemaを作成します。ドキュメントの通りzValidator でも良いのですが、今回は @hono/zod-openapi を使いましょう。health.schema.tsimport { z } from '@hono/zod-openapi'; export const healthSchema = z.object({ status: z.string().describe('Status of the health check'), message: z.string().describe('Message from the health check'),…