Adakah Penyelesai Sudut pada Sokongan Hayat?

Saya sedang menatal melalui Tech Twitter beberapa bulan lalu, apabila saya melihat tweet ini oleh Brandon yang terkenal:

Jika anda tidak tahu, Brandon mencipta AnalogJS, rangka kerja meta seperti NextJS untuk Angular. Saya peminat besar apa yang dia lakukan untuk komuniti Angular, jadi saya terpaksa bertindak balas. Dia akan menjadi orang pertama yang memberitahu anda saya mahu menyelesaikan segala-galanya dengan penyelesai.

Dan...

Tiada satu... bujang... suka atau respons.

Saya tidak banyak menyiarkan di Twitter, saya juga tidak mempunyai pengikut, jadi saya tidak fikir apa-apa.

Namun, saya terjumpa siaran ini sekali lagi secara rawak dan membaca komen, dan saya menyedari tiada siapa yang bersetuju dengan saya! Sejujurnya, saya tertanya-tanya sama ada mereka faham apa yang saya cakapkan.

Dua Cara untuk Memuatkan Data

Sebenarnya terdapat dua paradigma popular dalam JavaScript untuk memuatkan data.

1. Di dalam Komponen

Ini adalah cara pertama yang pernah saya pelajari dalam Angular. Apabila saya mula-mula mengambil Kursus Sudut Asal Fireship, saya tidak pernah belajar tentang penyelesai. Penyelesai tidak popular dan saya rasa sangat salah faham.

Contoh Brandon di atas menunjukkan data dimuatkan SELEPAS komponen dipaparkan. Ini adalah corak yang sama untuk rangka kerja lain:<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 menggunakan useEffect di bawah hud. Mungkin corak pengambilan pertama telah dibuat dalam React.
• Vue mengesyorkan menonton
• SolidJS - menggunakan createResource yang mengembalikan isyarat
• Qwik - mempunyai useResource$, yang mengembalikan isyarat
• Svelte - tiada penggunaan yang disyorkan pada GH untuk Svelte tulen, walaupun anda perlu menggunakan $effect dengan .then() dan bukannya async. Svelte 4 menggunakan kedai, yang akan mengikut corak tidak disyorkan yang sama di dalam kedai. Lihat Svelte 5 dengan Firebase
• Angular - Angular sentiasa mengesyorkan corak Subjek Boleh Diperhatikan / Tingkah Laku, dan kini anda hanya boleh menggunakan effect(). Walau bagaimanapun, ngxtension mempunyai derivedAsync untuk melakukan ini untuk anda, dan Angular 19 akan mempunyai sumber() terbina dalam. Pada hakikatnya, RxJS masih terlalu berkait rapat dengan Angular, pemintas dan klien http sekolah lama.

2. Di dalam Fungsi Beban

• NextJS - yang dahulunya getServerSideProps kini hanyalah fungsi async di dalam Komponen Pelayan. Anda pelayan sahaja, atau pakej luar seperti React Query.
• Nuxt - Nuxt telah membina dalam fungsi fetch $fetch yang mengendalikan pengambilan sekali pada klien dan menghidratkan ke penyemak imbas. Anda juga boleh mengambil di dalam Komponen Pelayan seperti dalam NextJS.
• SvelteKit - satu-satunya cara yang disyorkan dalam Svelte atau SvelteKit, berada di dalam fungsi beban. Ini berjalan SEBELUM komponen dipasang, dan boleh dijalankan pada pelayan atau klien. Mereka BUKAN hanya untuk pelayan.
• QwikCity - QwikCity mempunyai routeLoader$ dan server$ untuk pramuat data. Qwik "sambung semula", yang tidak memerlukan penghidratan dan hanya rune sekali.
• SolidStart - menggunakan fungsi pertanyaan dan dengan pramuat yang berjalan pada setiap laluan.
• Angular - Angular mempunyai penyelesai, yang sesuai untuk kes penggunaan ini. Namun, nampaknya tiada siapa yang menggunakannya lagi.

Apa maksud awak?

Adakah anda perasan corak di sini? Rangka kerja Sisi Pelayan lebih suka fungsi beban (penyelesai), manakala rangka kerja klien mengambil data dalam isyarat secara reaktif. Tetapi...

Angular BUKAN Rangka Kerja Sisi Pelayan!

Masalahnya ialah Angular bukan rangka kerja SSR, masalahnya ialah ia berpura-pura.

1. Menambah @angular/ssr sebenarnya tidak menambah sebarang ciri pelayan di luar penghidratan dan keadaan pemindahan automatik (kecuali dalam penyelesai sudah tentu). Namun begitu, React secara teknikal mempunyai Komponen Pelayan, manakala NextJS mengambil kesempatan daripadanya. Ciri yang tiada termasuk tetapi tidak terhad kepada sokongan .env, titik akhir, komponen pelayan, tindakan borang, cache pelayan, pramuat data daripada pelayan sahaja, bun, deno, cloudflare, sokongan bukan nodejs dan tentu saja penghalaan berasaskan fail. Baca mana-mana siaran saya sebelum ini untuk menyelesaikan masalah ini.
2. Perhatikan Firebase App Hosting hanya menyokong Angular dan NextJS, tetapi BUKAN Analog, iaitu rangka kerja Sisi Pelayan Sudut sebenar!

Sekarang saya tidak menjangka Pasukan Angular akan menambah semua permintaan ciri saya. Walau bagaimanapun, adalah baik untuk mempunyai sokongan .env asas dalam pembina utama, dan keupayaan untuk membuat titik akhir dengan Penghala Sudut. Brandon boleh uruskan yang lain.

Saya juga masih gila bahawa saya tidak dapat menggunakan aplikasi SSR Sudut asas kepada Vercel.

Mengapa Tidak Ambil Secara Reaktif?

Saya membaca artikel tentang penyelesai dari 2019 yang mengatakan kes penggunaan untuk penyelesai adalah "sangat jarang". Pada asasnya, anda hanya perlu menggunakannya apabila anda mengambil data yang boleh dimuatkan dengan cepat. Ok, setuju. Pada hakikatnya, anda hanya akan memuatkan data perlahan dalam kes penggunaan yang jarang berlaku. Anda mahu tapak atau aplikasi anda cepat.

? Apa kejadahnya...

Apa yang akan Josh Morony katakan?

Anda tidak boleh menggunakan RxJS dalam Angular melainkan anda perlu mengendalikan acara tak segerak dengan keadaan perlumbaan atau menyelaraskan aliran data yang kompleks.

Dia merujuk kepada Signals VS Observables di sana, jadi saya tidak tahu. Namun begitu, saya suka fikir anda hanya perlu mengambil penyelesai secara lalai SEHINGGA anda mempunyai kes penggunaan lanjutan ini.

Anda benar-benar tidak mempunyai pilihan...

Jika anda sedang membina aplikasi SSR profesional, anda memerlukan SEO yang dihasilkan daripada pangkalan data. Anda MESTI menggunakan penyelesai, atau jeda komponen secara manual daripada memuatkan dengan PendingTask, yang sangat funky.

Dalam Analog, saya mengesyaki orang hanya mengambil di dalam titik akhir berasaskan fail, atau mereka menjana halaman statik yang tidak penting.

Svelte VS Angular

Corak pengaturcaraan untuk dua rangka kerja kegemaran saya adalah kutub bertentangan.

• Huntabyte akan menunjukkan kepada anda cara yang disyorkan --- tidak ada cara lain --- untuk memuatkan data menggunakan fungsi pemuatan halaman.
• Sementara itu komuniti Angular dan Analog menolak penyelesai dan menunjukkan cara reaktif mereka yang boleh dikatakan lebih rumit.

Penstriman HTTP

Satu jawapan popular untuk memuatkan perlahan dalam penyelesai, ialah Penstriman HTTP. NextJS dan SvelteKit menyokong ini, tetapi ia telah ditolak untuk Angular.

?

Memikirkan perkara ini... TL;DR

• Angular bukanlah rangka kerja SSR yang lengkap
• Komuniti jarang menggunakan penyelesai untuk memuatkan data tak segerak
• Ahli Pasukan Angular sering menunjukkan Analog sebagai alasan untuk TIDAK mengubah sesuatu
• Ini tidak semestinya sesuatu yang buruk, cuma bertentangan dengan komuniti Svelte
• Mengendalikan keadaan perlumbaan, menghentikan pengawal, tindakan yang boleh diperhatikan atau sebarang pengambilan kompleks sentiasa lebih baik dalam komponen
• Data pramuat untuk SEO sentiasa lebih baik dalam penyelesai
• Svelte boleh menggunakan sedikit RxJS kadangkala
• Penyelesai harus mempunyai keupayaan untuk menggunakan isyarat seperti input()
• Adakah komuniti Angular SSR kecil?
• Adakah kebanyakan orang hanya membina aplikasi perusahaan sambil mengambil dalam bahasa lain?
• Adakah SEO tidak penting bagi KEBANYAKAN pengguna SSR Sudut, atau adakah ia hanya pemikiran selepas?
• Penstriman HTTP akan menjadi keren dalam Angular, bersama-sama dengan Kebolehsuburan semula apabila Wiz digabungkan.

negeri

Pada masa ini, apa-apa sahaja dalam penyelesai akan diambil dua kali (pelanggan pelayan). Perkara ini juga perlu ditangani pada masa hadapan. ? Penyelesai harus melepasi keadaan secara automatik... gunakan fungsi useAsyncTrasferState saya dalam penyelesai untuk itu.

Membandingkan Dua Pendekatan

Saya menggunakan ngxtension untuk demo secara ringkas, tetapi hasilnya adalah sama.

Versi Kesan

  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>

Versi Penyelesai

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

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

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

Ini dimuatkan daripada penyelesai.

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

Mana yang lebih baik?

Dalam demo khusus ini, terdapat "kerlipan" dalam versi kesan, manakala tiada kelipan dalam versi penyelesai. Saya percaya penyelesai adalah lebih baik dalam kes penggunaan ini.

Apa pendapat anda?

? Oleh kerana Vercel tidak menyokong SSR Deployment, demo memuatkan penyelesai pada klien sahaja. Ini bermakna penghalaan hanya berfungsi dari halaman utama.

• Demo: Vercel (SSR tidak berfungsi dengan Vercel)
• Repo: GitHub

Jawab

Saya akan mengatakan bahawa ia adalah pada sokongan hayat untuk pengambilan tak segerak. Sebenarnya, pengguna Angular SSR harus mempertimbangkan penyelesai lebih banyak untuk kes penggunaan ini dan pengguna SvelteKit harus mempertimbangkan untuk memuatkan dalam $effect() untuk lebih banyak kes penggunaan. Tetapi mungkin itu maksudnya? Pangkalan pengguna adalah berbeza.

Saya masih belajar, tetapi soalan-soalan ini menarik perhatian saya. Semoga kita melihat lebih banyak perubahan dalam kedua-dua ekosistem.

J

Atas ialah kandungan terperinci Adakah Penyelesai Sudut pada Sokongan Hayat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!