Angular 解析器有生命維持嗎？

幾個月前，我在瀏覽科技推特時，看到了臭名昭著的布蘭登的這條推文：

如果你不知道，Brandon 創建了 AnalogJS，這是 Angular 的類似 NextJS 的元框架。我是他為 Angular 社群所做的事情的超級粉絲，所以我必須做出回應。他會第一個告訴你我想用解析器解決所有問題。

還有...

沒有一個...單一...按讚或回覆。

我在 Twitter 上發文不多，也沒有追蹤者，所以我沒有多想。

然而，我再次偶然看到這篇文章並閱讀了評論，我發現沒有人同意我的觀點！老實說，我想知道他們是否明白我在說什麼。

載入資料的兩種方式

JavaScript 中其實有兩個流行的範例來載入資料。

1. 組件內部

這是我學習 Angular 的第一個方法。當我第一次學習 Fireship 的原始角度課程時，我甚至從未了解過解析器。解析器並不流行，我認為它被極大地誤解了。

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，儘管您需要使用 $effect 和 .then() 而不是非同步。 Svelte 4 使用商店，它將遵循商店內相同的不建議的模式。查看帶有 Firebase 的 Svelte 5
• Angular - Angular 一直推薦可觀察/行為主題模式，現在您可以只使用effect()。然而，ngxtension 有一個衍生非同步來為你做這件事，Angular 19 將內建資源（）。實際上，RxJS 仍然與 Angular、攔截器和老式 http 用戶端緊密地交織在一起。

2. 載入函數內部

• NextJS - 先前的 getServerSideProps 現在只是伺服器元件內的非同步函數。您只是伺服器，或者是像 React Query 這樣的外部套件。
• Nuxt - Nuxt 內建了獲取函數 $fetch，它處理在客戶端上的一次獲取並提供給瀏覽器。您也可以像 NextJS 一樣在伺服器元件內部取得。
• SvelteKit - Svelte 或 SvelteKit 中唯一建議的方式是在載入函數內。它在安裝元件之前運行，並且可以在伺服器或客戶端上運行。它們不僅適用於伺服器。
• QwikCity - QwikCity 有routeLoader$ 和server$ 用於預先載入資料。 Qwik“恢復”，不需要水合作用，只需符文一次。
• SolidStart - 使用查詢功能並預先載入在每條路線上執行。
• Angular - Angular 有解析器，非常適合此用例。然而，似乎沒有人再使用它們了。

你的觀點是什麼？

你注意到這裡的模式了嗎？伺服器端框架偏好載入函數（解析器），而客戶端框架則以反應方式取得訊號中的資料。但是...

Angular 不是伺服器端框架！

問題不在於 Angular 不是 SSR 框架，問題在於它假裝是。

1. 添加@angular/ssr實際上並沒有添加任何除了水合作用和自動傳輸狀態之外的伺服器功能（當然解析器除外）。然而，從技術上講，React 具有伺服器元件，而 NextJS 利用了它們。缺少的功能包括但不限於 .env 支援、端點、伺服器元件、表單操作、伺服器快取、僅從伺服器預先載入資料、bun、deno、cloudflare、非 Nodejs 支持，當然還有基於檔案的路由。閱讀我之前的任何帖子以解決這些問題。
2. 注意 Firebase 應用程式託管僅支援 Angular 和 NextJS，但不支援 Analog，這是實際的 Angular 伺服器端框架！

現在我不希望 Angular 團隊添加我的所有功能請求。然而，如果主建構器能夠提供基本的 .env 支持，並且能夠使用 Angular Router 建立端點，那就太好了。布蘭登可以處理剩下的事情。

我仍然很瘋狂，因為我無法將基本的 Angular SSR 應用程式部署到 Vercel。

為什麼不響應式獲取？

我在 2019 年讀過一篇關於解析器的文章，其中說解析器的用例「非常罕見」。基本上，您應該只在獲取可以快速加載的資料時使用它們。好的，同意。實際上，您只會在極少數用例中載入緩慢的資料。您希望您的網站或應用程式能夠快速運作。

？到底是怎麼回事老兄...

喬許莫羅尼會說什麼？

你不應該在 Angular 中使用 RxJS，除非你需要處理具有競爭條件的非同步事件或協調複雜的資料流。

他指的是 Signals VS Observables，所以我不知道。儘管如此，我認為您應該默認獲取解析器，直到您擁有這些高級用例。

你真的別無選擇...

如果您正在建立專業的 SSR 應用程序，您將需要從資料庫產生 SEO。您必須使用解析器，或者使用 PendingTask 手動暫停元件加載，這非常時髦。

在模擬中，我懷疑人們僅在基於文件的端點內部進行提取，或者他們在無關緊要的地方生成靜態頁面。

Svelte VS Angular

我最喜歡的兩個框架的程式模式是截然相反的。

• Huntabyte 將向您展示建議的方法（沒有其他方法）使用頁面載入函數載入資料。
• 與此同時，Angular 和 Analog 社群放棄了解析器，並展示了他們可以說更複雜的反應方式。

HTTP 串流

解決解析器載入緩慢的一個流行答案是 HTTP 流。 NextJS 和 SvelteKit 支持這一點，但 Angular 拒絕了。

？

反思這一點... TL;DR

• Angular 並不是一個完整的 SSR 框架
• 社群很少使用解析器來載入非同步資料
• Angular 團隊成員常將 Analog 視為不改變事物的理由
• 這不一定是壞事，只是與 Svelte 社群截然相反
• 在組件中處理競爭條件、中止控制器、可觀察的操作或任何複雜的獲取總是更好
• 在解析器中預先載入 SEO 資料總是比較好
• Svelte 有時可以用一點 RxJS
• 解析器應該能夠使用像 input() 這樣的訊號
• Angular SSR 社群很小嗎？
• 大多數人只是在使用另一種語言獲取資料時建立企業應用程式嗎？
• SEO 對大多數 Angular SSR 使用者來說並不重要，還是只是事後的想法？
• HTTP 流在 Angular 中會很酷，當 Wiz 結合使用時，可恢復性也會很酷。

狀態

目前，解析器中的任何內容都將被獲取兩次（伺服器客戶端）。這也需要在未來處理。 ？解析器應該會自動傳遞狀態...在解析器中使用我的 useAsyncTrasferState 函數。

比較兩種方法

為了簡潔起見，我使用 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 部署，因此此示範僅在用戶端載入解析器。這意味著路由只能在主頁上使用。

• 示範：Vercel（SSR 不適用於 Vercel）
• 倉庫：GitHub

回答

我想說它是非同步獲取的生命維持。實際上，Angular SSR 用戶應該更多地考慮此用例的解析器，而 SvelteKit 用戶應該考慮在 $effect() 中載入更多用例。但也許這就是重點？用戶群不同。

我仍在學習，但這些問題讓我著迷。希望我們在這兩個生態系統中看到更多的改變。

J

以上是Angular 解析器有生命維持嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！