Angular リゾルバーは生命維持装置にありますか?

数か月前、Tech Twitter をスクロールしていたとき、悪名高い Brandon による次のツイートを見つけました。

ご存知ないかと思いますが、Brandon は、Angular 用の NextJS に似たメタ フレームワークである AnalogJS を作成しました。私は彼が Angular コミュニティのために行っている活動の大ファンなので、返信する必要がありました。私がリゾルバーですべてを解決したいと最初に言うのは彼でしょう。

そして...

1 つも...1 つも...いいねも反応もありません。

私は Twitter にあまり投稿しないし、フォロワーもいないので、何も考えていませんでした。

しかし、偶然この投稿を再び見つけてコメントを読んだところ、誰も私に同意していないことに気づきました。正直、彼らは私の言っていることが理解できるだろうかとさえ思っています。

データをロードする 2 つの方法

実際、JavaScript にはデータをロードするための 2 つの一般的なパラダイムがあります。

1. コンポーネントの内部

これは私が Angular で学んだ最初の方法でした。私が初めて Fireship の Original Angular コースを受講したときは、リゾルバーについてさえ学びませんでした。リゾルバーは人気がありませんし、非常に誤解されていると思います。

上記の Brandon の例は、コンポーネントがレンダリングされた後にデータがロードされることを示しています。これは他のフレームワークでも同じパターンです:<script> // Detect dark theme var iframe = document.getElementById('tweet-1836847595806732317-750'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1836847595806732317&theme=dark" } </script>

• React Query - Tanstack Query は内部で useEffect を使用します。おそらく最初のフェッチ パターンは React で作成されたものと思われます。
• Vue が推奨するウォッチ
• SolidJS - シグナル
を返す createResource を使用します
• Qwik - useResource$ があり、シグナル
を返します
• Svelte - GH では純粋な Svelte に対して推奨される使用法はありません。ただし、async の代わりに $effect を .then() とともに使用する必要があります。 Svelte 4 はストアを使用しますが、ストア内では同じ非推奨パターンに従います。 Svelte 5 と Firebase を参照してください
• Angular - Angular は常に Observable / Behavioral Subject パターンを推奨してきましたが、現在では、effect() を使用するだけで済みます。ただし、ngxtension にはこれを行うための DerivativeAsync があり、Angular 19 には resource() が組み込まれています。実際には、RxJS は依然として Angular、インターセプター、および古い学校の http クライアントと非常に密接に絡み合っています。

2. ロード関数の内部

• NextJS - 以前は getServerSideProps であったものは、現在はサーバー コンポーネント内の単なる非同期関数です。あなたはサーバーのみ、または React Query のような外部パッケージを使用しています。
• Nuxt - Nuxt には、クライアント上で 1 回フェッチしてブラウザにハイドレートするフェッチ関数 $fetch が組み込まれています。 NextJS のようにサーバー コンポーネント内でフェッチすることもできます。
• SvelteKit - Svelte または SvelteKit で唯一推奨される方法は、load 関数内で行うことです。これはコンポーネントがマウントされる前に実行され、サーバーまたはクライアント上で実行できます。これらはサーバーのためだけのものではありません。
• QwikCity - QwikCity にはデータをプリロードするためのrouteLoader$ とserver$ があります。 Qwik が「再開」します。これには水分補給は必要なく、ルーンは 1 回だけ実行されます。
• SolidStart - クエリ関数を使用し、すべてのルートで実行されるプリロードを使用します。
• Angular - Angular にはリゾルバーがあり、このユースケースに最適です。しかし、もう誰も使っていないようです。

どういうことですか？

ここにパターンがあることに気づきましたか?サーバー側フレームワークはロード関数 (リゾルバー) を優先しますが、クライアント フレームワークはシグナル内のデータをリアクティブにフェッチします。でも…

Angular はサーバー側のフレームワークではありません!

問題は、Angular が SSR フレームワークではないということではなく、問題は、Angular が SSR フレームワークであるふりをしていることです。

1. @angular/ssr を追加しても、ハイドレーションと自動転送状態以外のサーバー機能は実際には追加されません (もちろんリゾルバーを除く)。それでも、技術的には React にはサーバー コンポーネントがあり、NextJS はそれらを利用します。不足している機能には、.env サポート、エンドポイント、サーバー コンポーネント、フォーム アクション、サーバー キャッシュ、サーバーのみからのデータのプリロード、bun、deno、cloudflare、非 nodejs サポート、そしてもちろんファイル ベースのルーティングが含まれますが、これらに限定されません。これらの問題の回避策については、私の以前の投稿を読んでください。
2. Firebase App Hosting は Angular と NextJS のみをサポートしており、実際の Angular サーバー側フレームワークである Analog はサポートしていないことに注意してください。

現在、Angular チームが私の機能リクエストをすべて追加してくれるとは思っていません。ただし、メイン ビルダーで基本的な .env サポートがあり、Angular Router でエンドポイントを作成できる機能があれば便利です。残りはブランドンに任せてください。

基本的な Angular SSR アプリケーションを Vercel にデプロイできないことも、私にはいまだに頭がおかしいです。

なぜリアクティブにフェッチしないのでしょうか?

2019 年のリゾルバーに関する記事を読みましたが、リゾルバーの使用例は「非常にまれ」であると書かれていました。基本的に、これらは、高速にロードできるデータをフェッチする場合にのみ使用してください。わかりました、同意しました。実際には、低速データをロードするのはまれな使用例のみです。サイトやアプリケーションを高速にしたいと考えています。

?一体何者だ...

ジョシュ・モロニーなら何と言うでしょうか?

競合状態のある非同期イベントを処理したり、複雑なデータ フローを調整したりする必要がない限り、Angular で RxJS を使用しないでください。

彼はそこでシグナル VS オブザーバブルについて言及していたので、私にはわかりません。それでも、このような高度な使用例ができるまでは、デフォルトでリゾルバーをフェッチするだけでよいと思います。

本当に選択の余地はありません...

プロフェッショナルな SSR アプリケーションを構築している場合は、データベースから生成された SEO が必要になります。リゾルバーを使用するか、PendingTask を使用してコンポーネントのロードを手動で一時停止する必要がありますが、これは非常にファンキーです。

アナログでは、ファイルベースのエンドポイント内でのみフェッチしているか、関係のない静的ページを生成しているのではないかと思います。

細い VS 角張った

私のお気に入りの 2 つのフレームワークのプログラミング パターンは正反対です。

• Huntabyte は、ページ ロード関数を使用してデータをロードする、推奨される方法 -- 他に方法はありません -- を紹介します。
• 一方、Angular および Analog コミュニティはリゾルバーを却下し、おそらくより複雑なリゾルバーの方法を示しています。

HTTPストリーミング

リゾルバーでの読み込みが遅いことに対する一般的な解決策の 1 つは、HTTP ストリーミングです。 NextJS と SvelteKit はこれをサポートしていますが、Angular では拒否されました。

?

これを振り返って...TL;DR

• Angular は完全な SSR フレームワークではありません
• コミュニティは非同期データのロードにリゾルバーをほとんど使用しません
• Angular チームのメンバーは、変更を加えない理由としてアナログを挙げることがよくあります
• これは必ずしも悪いことではなく、Svelte コミュニティとは正反対であるだけです
• 競合状態、中止コントローラー、監視可能なアクション、または複雑なフェッチの処理は、常にコンポーネント内で行う方が優れています
• SEO のためのデータの事前ロードは、常にリゾルバーで行う方が優れています
• Svelte は時々 RxJS を少し使用できます
• リゾルバーには、input() のようなシグナルを使用する機能が必要です
• Angular SSR コミュニティは小さいですか?
• ほとんどの人は、別の言語でフェッチしながらエンタープライズ アプリケーションを構築するだけですか?
• ほとんどの Angular SSR ユーザーにとって SEO は重要ではありませんか、それとも単に思いついただけなのでしょうか?
• Angular では HTTP ストリーミングが優れており、Wiz を組み合わせた場合の再開機能も優れています。

州

現在、リゾルバー内のすべてのものが 2 回フェッチされます (サーバー クライアント)。これも今後の対応が必要です。 ?リゾルバーは状態を自動的に渡す必要があります...そのためにはリゾルバーで useAsyncTrasferState 関数を使用してください。

2 つのアプローチの比較

簡潔にするためにデモには ngxtension を使用しましたが、結果は同じです。

エフェクトバージョン

  id = injectParams('id');

  idNumber = computed(() => Number(this.id()));

  todo = derivedAsync<Todo>(() =>
    fetch(`https://jsonplaceholder.typicode.com/todos/${this.id()}`).then(
      (response) => response.json()
    )
  );

  prevId = computed(() => Math.max(this.idNumber() - 1, 1));
  nextId = computed(() => this.idNumber() + 1);

リゾルバーのバージョン

  todo = injectRouteData<Todo>('data');

  idNumber = computed(() => this.todo()!.id);

  prevId = computed(() => Math.max(this.idNumber() - 1, 1));
  nextId = computed(() => this.idNumber() + 1);

これはリゾルバーからロードされます。

import { ResolveFn } from '@angular/router';

export const routeResolverResolver: ResolveFn<boolean> = async (route) => {

  const todoId = route.paramMap.get('id');

  if (!todoId) {
    throw new Error('Todo ID is missing in the route!');
  }

  // Fetch the todo from the API
  const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId}`);

  if (!response.ok) {
    throw new Error('Failed to fetch the todo');
  }

  return await response.json();
};

どちらが良いでしょうか？

この特定のデモでは、エフェクト バージョンには「ちらつき」がありますが、リゾルバ バージョンにはちらつきがありません。このユースケースではリゾルバーの方が優れていると思います。

どう思いますか?

? Vercel は SSR デプロイメントをサポートしていないため、デモではクライアントのみにリゾルバーがロードされています。これは、ルーティングがホームページからのみ機能することを意味します。

• デモ: ヴァーセル (SSR はヴァーセルでは動作しません)
• リポジトリ: GitHub

答え

非同期フェッチのための生命維持装置が付いていると言えます。実際には、Angular SSR ユーザーはこのユースケースについてはリゾルバーをより考慮する必要があり、SvelteKit ユーザーはさらに多くのユースケースについて $effect() でのロードを検討する必要があります。しかし、おそらくそれがポイントでしょうか？ユーザーベースが違います。

私はまだ勉強中ですが、これらの質問は私を魅了します。両方のエコシステムにさらなる変革が起こることを願っています。

J

以上がAngular リゾルバーは生命維持装置にありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。