Angular 解析器有生命支持吗？

几个月前，我在浏览科技推特时，看到了臭名昭著的布兰登的这条推文：

如果你不知道，Brandon 创建了 AnalogJS，这是 Angular 的类似 NextJS 的元框架。我是他为 Angular 社区所做的事情的超级粉丝，所以我必须做出回应。他会第一个告诉你我想用解析器解决所有问题。

还有...

没有一个...单个...点赞或回复。

我在 Twitter 上发帖不多，也没有关注者，所以我没有多想。

然而，我再次偶然看到这篇文章并阅读了评论，我发现没有人同意我的观点！老实说，我想知道他们是否明白我在说什么。

加载数据的两种方式

JavaScript 中实际上有两种流行的范例来加载数据。

1. 组件内部

这是我学习 Angular 的第一个方法。当我第一次学习 Fireship 的原始 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，尽管您需要使用 $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中文网其他相关文章！