Angular Resolver는 생명 유지에 도움이 됩니까?

몇 달 전 Tech Twitter를 스크롤하다가 악명 높은 Brandon의 다음 트윗을 보았습니다.

모르신다면 Brandon이 NextJS와 유사한 Angular용 메타 프레임워크인 AnalogJS를 만들었습니다. 나는 그가 Angular 커뮤니티를 위해 하는 일의 열렬한 팬이므로 응답해야 했습니다. 리졸버로 모든 걸 해결하고 싶다고 가장 먼저 말해줄 거예요.

그리고...

한 번도... 한 번도... 좋아요나 반응이 없습니다.

저는 트위터에 글을 많이 올리지도 않고, 팔로워도 없는 편이라 별 생각이 없었습니다.

그런데 우연히 이 글을 발견하고 댓글을 읽어보니 아무도 내 의견에 동의하지 않는다는 것을 깨달았습니다! 솔직히 그들이 내 말을 이해하고 있는지 궁금합니다.

데이터를 로드하는 두 가지 방법

실제로 JavaScript에는 데이터 로드에 널리 사용되는 두 가지 패러다임이 있습니다.

1. 컴포넌트 내부

이것이 제가 Angular를 처음 배운 방법이었습니다. 처음 Fireship의 Original Angular Course를 수강했을 때 리졸버에 대해 전혀 배우지 못했습니다. 리졸버는 대중적이지 않고, 굉장히 오해받고 있는 것 같아요.

위 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 - 순수 Svelte의 경우 GH에서는 권장되지 않습니다. 단, 비동기 대신 .then()과 함께 $효과를 사용해야 합니다. Svelte 4는 상점 내부에서 권장되지 않는 동일한 패턴을 따르는 상점을 사용합니다. Firebase를 사용한 Svelte 5 보기
• Angular - Angular는 항상 Observable / Behavioral Subject 패턴을 권장해 왔으며 이제는 effect()만 사용할 수 있습니다. 그러나 ngxtension에는 이 작업을 수행하기 위한 파생된 Async가 있으며 Angular 19에는 내장된 resources()가 있습니다. 실제로 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 프레임워크가 아니라는 것이 아니라 SSR 프레임워크인 척하는 것입니다.

1. @angular/ssr을 추가해도 실제로 하이드레이션 및 자동 전송 상태 이외의 서버 기능은 추가되지 않습니다(물론 리졸버 제외). 그럼에도 불구하고 기술적으로 React에는 서버 구성 요소가 있는 반면 NextJS는 이를 활용합니다. 누락된 기능에는 .env 지원, 엔드포인트, 서버 구성 요소, 양식 작업, 서버 캐싱, 서버에서만 데이터 사전 로드, bun, deno, cloudflare, 비 nodejs 지원 및 물론 파일 기반 라우팅이 포함되지만 이에 국한되지는 않습니다. 이러한 문제를 해결하려면 내 이전 게시물을 읽어보세요.
2. Firebase 앱 호스팅은 Angular 및 NextJS만 지원하고 실제 Angular 서버 측 프레임워크인 아날로그는 지원하지 않습니다.

이제 Angular 팀이 내가 요청한 기능을 모두 추가할 것이라고는 기대하지 않습니다. 그러나 기본 빌더에서 기본 .env 지원과 Angular Router로 엔드포인트를 만드는 기능이 있으면 좋을 것입니다. 나머지는 Brandon이 처리할 수 있습니다.

기본 Angular SSR 애플리케이션을 Vercel에 배포할 수 없다는 점도 여전히 제게는 미친 일입니다.

반응적으로 가져오지 않는 이유는 무엇입니까?

2019년에 리졸버 사용 사례가 '매우 드물다'는 리졸버 관련 기사를 읽었습니다. 기본적으로 빠르게 로드할 수 있는 데이터를 가져올 때만 사용해야 합니다. 알았어, 동의했어. 실제로는 드문 사용 사례에서만 느린 데이터를 로드합니다. 사이트나 애플리케이션이 빠르게 진행되기를 원합니다.

? 대체 뭐야...

조시 모로니는 뭐라고 말할까요?

경합 조건이 있는 비동기 이벤트를 처리하거나 복잡한 데이터 흐름을 조정해야 하는 경우가 아니라면 Angular에서 RxJS를 사용하면 안 됩니다.

그는 거기에서 Signals VS Observable을 언급하고 있었기 때문에 잘 모르겠습니다. 그럼에도 불구하고 이러한 고급 사용 사례가 있을 때까지 기본적으로 리졸버를 가져와야 한다고 생각합니다.

넌 정말 선택의 여지가 없어...

전문 SSR 애플리케이션을 구축하는 경우 데이터베이스에서 생성된 SEO가 필요합니다. 리졸버를 사용하거나 매우 특이한 PendingTask로 구성요소 로드를 수동으로 일시 중지해야 합니다.

아날로그에서는 사람들이 파일 기반 엔드포인트 내에서만 가져오거나 중요하지 않은 정적 페이지를 생성하는 것 같습니다.

날씬한 VS 각도

내가 가장 좋아하는 두 프레임워크의 프로그래밍 패턴은 정반대입니다.

• Huntabyte는 페이지 로드 기능을 사용하여 데이터를 로드하는 권장 방법(다른 방법은 없습니다)을 보여 드리겠습니다.
• 그동안 Angular 및 Analog 커뮤니티에서는 리졸버를 무시하고 틀림없이 더 복잡한 반응 방식을 보여줍니다.

HTTP 스트리밍

리졸버의 느린 로딩에 대한 인기 있는 대답 중 하나는 HTTP 스트리밍입니다. NextJS와 SvelteKit은 이를 지원하지만 Angular에서는 지원되지 않습니다.

?

반성해보면... TL;DR

• Angular는 완전한 SSR 프레임워크가 아닙니다
• 커뮤니티에서는 비동기 데이터 로드에 리졸버를 거의 사용하지 않습니다
• Angular 팀 구성원은 변화를 원하지 않는 이유로 아날로그를 지적하는 경우가 많습니다
• 이것이 반드시 나쁜 것은 아니며 Svelte 커뮤니티와는 정반대입니다
• 경합 조건, 컨트롤러 중단, 관찰 가능한 작업 또는 복잡한 가져오기 처리는 항상 구성 요소에서 더 좋습니다
• 리졸버에서는 SEO용 데이터를 미리 로드하는 것이 항상 더 좋습니다
• Svelte는 때때로 RxJS를 약간 사용할 수 있습니다
• 리졸버에는 input()과 같은 신호를 사용할 수 있는 기능이 있어야 합니다.
• Angular SSR 커뮤니티는 작은가요?
• 대부분의 사람들이 다른 언어로 가져오면서 엔터프라이즈 애플리케이션을 구축합니까?
• SEO는 대부분의 Angular SSR 사용자에게 중요하지 않은가요, 아니면 그냥 나중에 생각한 것인가요?
• HTTP 스트리밍은 Wiz와 결합하면 재개 가능성과 함께 Angular에서 멋질 것입니다.

상태

현재 리졸버의 모든 항목은 두 번 가져옵니다(서버 클라이언트). 이 문제는 앞으로도 처리되어야 합니다. ? 해석기는 자동으로 상태를 전달해야 합니다. 이를 위해서는 해석기에서 내 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()에 로드하는 것을 고려해야 합니다. 하지만 그게 요점이 아닐까요? 사용자층이 다릅니다.

저는 아직 배우는 중이지만 이러한 질문이 저를 매료시킵니다. 두 생태계 모두에서 더 많은 변화가 일어나기를 바랍니다.

제이

위 내용은 Angular Resolver는 생명 유지에 도움이 됩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!