Sind Winkelresolver lebenserhaltend?

Ich habe vor ein paar Monaten durch Tech-Twitter gescrollt, als ich diesen Tweet des berüchtigten Brandon gesehen habe:

• React Query – Tanstack Query nutzt useEffect unter der Haube. Möglicherweise wurde das erste Abrufmuster in React erstellt.
• Vue empfiehlt Uhr
• SolidJS – verwendet createResource, das ein Signal zurückgibt
• Qwik – verfügt über useResource$, das ein Signal zurückgibt
• Svelte – keine empfohlene Verwendung auf GH für reines Svelte, obwohl Sie $effect mit .then() anstelle von async verwenden müssten. Svelte 4 verwendet Stores, die innerhalb des Stores demselben nicht empfohlenen Muster folgen würden. Siehe Svelte 5 mit Firebase
• Angular – Angular hat immer das Muster Observable/Behavioral Subject empfohlen, und jetzt können Sie einfach effect() verwenden. Allerdings verfügt ngxtension über einen abgeleiteten Async, der dies für Sie erledigt, und in Angular 19 ist „resource()“ integriert. In Wirklichkeit ist RxJS immer noch zu sehr mit Angular, Interceptors und dem HTTP-Client der alten Schule verflochten.

2. Innerhalb einer Ladefunktion

• NextJS – was früher getServerSideProps war, ist jetzt nur noch eine asynchrone Funktion innerhalb einer Serverkomponente. Sie sind nur ein Server oder ein externes Paket wie React Query.
• Nuxt – Nuxt verfügt über integrierte Abruffunktionen $fetch, die den einmaligen Abruf auf dem Client und die Übertragung an den Browser übernehmen. Sie können auch innerhalb einer Serverkomponente wie in NextJS abrufen.
• SvelteKit – der einzige empfohlene Weg in Svelte oder SvelteKit ist eine Ladefunktion. Dies wird VOR dem Mounten der Komponente ausgeführt und kann auf dem Server oder Client ausgeführt werden. Sie sind NICHT nur für den Server.
• QwikCity – QwikCity verfügt über routeLoader$ und server$ zum Vorabladen von Daten. Qwik wird „fortgesetzt“, was keine Flüssigkeitszufuhr und nur einmalige Runen erfordert.
• SolidStart – verwendet eine Abfragefunktion und mit Vorspannung, die auf jeder Route ausgeführt wird.
• Angular – Angular verfügt über Resolver, die perfekt für diesen Anwendungsfall geeignet sind. Allerdings scheint sie niemand mehr zu benutzen.

Was ist Ihr Punkt?

Ist Ihnen hier ein Muster aufgefallen? Serverseitige Frameworks bevorzugen Ladefunktionen (Resolver), während Client-Frameworks Daten reaktiv in einem Signal abrufen. Aber...

Angular ist KEIN serverseitiges Framework!

Das Problem ist nicht, dass Angular kein SSR-Framework ist, sondern dass es so tut.

1. Durch das Hinzufügen von @angular/ssr werden eigentlich keine Serverfunktionen außer der Hydratation und dem automatischen Übertragungsstatus hinzugefügt (außer natürlich im Resolver). Dennoch verfügt React technisch gesehen über Serverkomponenten, während NextJS diese nutzt. Zu den fehlenden Funktionen gehören unter anderem .env-Unterstützung, Endpunkte, Serverkomponenten, Formularaktionen, Server-Caching, Vorabladen von Daten nur vom Server, Bun, Deno, Cloudflare, Nicht-NodeJS-Unterstützung und natürlich dateibasiertes Routing. Lesen Sie alle meine vorherigen Beiträge, um Lösungen für diese Dinge zu finden.
2. Beachten Sie, dass Firebase App Hosting nur Angular und NextJS unterstützt, jedoch NICHT Analog, das eigentliche Angular Server Side Framework!

Jetzt erwarte ich nicht, dass das Angular-Team alle meine Funktionswünsche berücksichtigt. Es wäre jedoch schön, im Haupt-Builder eine grundlegende .env-Unterstützung zu haben und die Möglichkeit zu haben, Endpunkte mit dem Angular Router zu erstellen. Den Rest erledigt Brandon.

Ich finde es auch immer noch verrückt, dass ich keine einfache Angular SSR-Anwendung auf Vercel bereitstellen kann.

Warum nicht reaktiv abrufen?

Ich habe einen Artikel über Resolver aus dem Jahr 2019 gelesen, in dem es heißt, dass der Anwendungsfall für Resolver „sehr selten“ sei. Grundsätzlich sollten Sie sie nur verwenden, wenn Sie Daten abrufen, die schnell geladen werden können. Ok, einverstanden. In der Realität würden Sie langsame Daten nur in seltenen Anwendungsfällen laden. Sie möchten, dass Ihre Website oder Anwendung schnell ist.

? Was zum Teufel, Mann...

Was würde Josh Morony sagen?

Sie sollten RxJS nicht in Angular verwenden, es sei denn, Sie müssen asynchrone Ereignisse mit Race Conditions verarbeiten oder einen komplexen Datenfluss koordinieren.

Er bezog sich dort auf Signale vs. Observablen, daher habe ich keine Ahnung. Dennoch bin ich der Meinung, dass Sie einfach den Resolver standardmäßig einholen sollten, BIS Sie über diese erweiterten Anwendungsfälle verfügen.

Du hast wirklich keine Wahl...

Wenn Sie eine professionelle SSR-Anwendung erstellen, benötigen Sie SEO, das aus einer Datenbank generiert wird. Sie MÜSSEN einen Resolver verwenden oder das Laden der Komponente manuell mit PendingTask anhalten, was äußerst unkonventionell ist.

In Analog vermute ich, dass die Leute nur innerhalb der dateibasierten Endpunkte abrufen oder statische Seiten generieren, wo es keine Rolle spielt.

Schlank vs. eckig

Die Programmiermuster für meine beiden Lieblings-Frameworks sind polare Gegensätze.

• Huntabyte zeigt Ihnen den empfohlenen Weg – es gibt keinen anderen Weg – zum Laden von Daten mithilfe von Seitenladefunktionen.
• Mittlerweile lehnt die Angular- und Analog-Community Resolver ab und zeigt ihren wohl komplizierteren reaktiven Weg.

HTTP-Streaming

Eine beliebte Antwort auf langsames Laden im Resolver ist HTTP-Streaming. NextJS und SvelteKit unterstützen dies, aber für Angular wurde es abgelehnt.

?

Wenn ich darüber nachdenke... TL;DR

• Angular ist kein vollständiges SSR-Framework
• Die Community verwendet selten Resolver zum Laden asynchroner Daten
• Angular-Teammitglieder nennen Analog oft einen Grund, Dinge NICHT zu ändern
• Das ist nicht unbedingt eine schlechte Sache, sondern das genaue Gegenteil der Svelte-Community
• Der Umgang mit Race Conditions, Abbruch-Controllern, beobachtbaren Aktionen oder anderen komplexen Abrufvorgängen ist in der Komponente immer besser
• Das Vorladen von Daten für SEO ist in einem Resolver immer besser
• Svelte kann manchmal ein wenig RxJS verwenden
• Resolver sollten in der Lage sein, Signale wie input() zu verwenden
• Ist die Angular SSR-Community klein?
• Erstellen die meisten Leute nur Unternehmensanwendungen, während sie in einer anderen Sprache abrufen?
• Spielt SEO für die MEISTEN Angular SSR-Benutzer keine Rolle oder ist es nur ein nachträglicher Gedanke?
• HTTP-Streaming wäre in Angular cool, zusammen mit Wiederaufnahmebarkeit, wenn Wiz kombiniert wird.

Zustand

Derzeit wird alles im Resolver zweimal abgerufen (Server-Client). Dies muss auch in Zukunft gehandhabt werden. ? Resolver sollten den Status automatisch übergeben. Verwenden Sie dazu meine Funktion „useAsyncTrasferState“ in einem Resolver.

Vergleich der beiden Ansätze

Der Kürze halber habe ich ngxtension für die Demo verwendet, aber das Ergebnis ist das gleiche.

Effektversion

  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);

Resolver-Version

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

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

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

Dies wird vom Resolver geladen.

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();
};

Was ist besser?

In dieser speziellen Demo gibt es ein „Flackern“ in der Effektversion, während es in der Resolver-Version kein Flimmern gibt. Ich glaube, dass der Resolver in diesem Anwendungsfall besser ist.

Was denkst du?

? Da Vercel die SSR-Bereitstellung nicht unterstützt, lädt die Demo den Resolver nur auf dem Client. Das bedeutet, dass das Routing nur von der Startseite aus funktioniert.

• Demo: Vercel (SSR funktioniert nicht mit Vercel)
• Repo: GitHub

Antwort

Ich würde sagen, dass es sich um lebenserhaltende Maßnahmen für asynchrone Abrufe handelt. Tatsächlich sollten Angular SSR-Benutzer für diesen Anwendungsfall eher Resolver in Betracht ziehen, und SvelteKit-Benutzer sollten das Laden von $effect() für weitere Anwendungsfälle in Betracht ziehen. Aber vielleicht ist das der Punkt? Die Nutzerbasis ist unterschiedlich.

Ich lerne noch, aber diese Fragen faszinieren mich. Hoffentlich erleben wir weitere Umwälzungen in beiden Ökosystemen.

J

Das obige ist der detaillierte Inhalt vonSind Winkelresolver lebenserhaltend?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!