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.
Sebenarnya terdapat dua paradigma popular dalam JavaScript untuk memuatkan data.
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>
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.
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.
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.
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.
Corak pengaturcaraan untuk dua rangka kerja kegemaran saya adalah kutub bertentangan.
Satu jawapan popular untuk memuatkan perlahan dalam penyelesai, ialah Penstriman HTTP. NextJS dan SvelteKit menyokong ini, tetapi ia telah ditolak untuk Angular.
?
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.
Saya menggunakan ngxtension untuk demo secara ringkas, tetapi hasilnya adalah sama.
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);
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();
};
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.
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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
