Memindahkan Keadaan kepada Klien
Elakkan permintaan pendua dengan pemindahan keadaan.
Memindahkan Keadaan kepada Klien ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.
Masalah Pengambilan Data Berganda
Semasa SSR, pelayan mengambil data untuk memaparkan HTML. Tanpa bantuan, klien mengambil data yang sama sekali lagi selepas hidrasi, membazirkan satu permintaan dan berisiko menyebabkan kandungan berkelip.
TransferState sebagai Penyelesaian
TransferState Angular mengekodkan data pada pelayan ke dalam HTML, kemudian klien membacanya dan bukannya mengambilnya semula. Data bergerak dalam tag skrip dalam respons.
Cara Data Bergerak
Keadaan yang disimpan pada pelayan dibenamkan sebagai JSON dalam halaman. Semasa dimulakan, klien menyahkodkannya supaya paparan pertama menggunakan data yang sama seperti yang digunakan oleh pelayan.
<!-- embedded in SSR HTML -->
<script id="ng-state" type="application/json">{"users-1":[...]}</script>Menggunakan makeStateKey
Cipta kunci bertaip dengan makeStateKey, kemudian baca atau tulis melalu perkhidmatan TransferState.
import { makeStateKey, TransferState } from '@angular/core';
const USERS = makeStateKey<User[]>('users');
const state = inject(TransferState);
state.set(USERS, fetchedUsers);Corak Baca Kemudian Ambil
Pada pelayan dan klien: jika kunci wujud dalam TransferState, gunakannya; jika tidak, ambil data. Pelayan mengambil dan menyimpannya; klien menemukan nilai yang disimpan lalu tidak melakukan panggilan tersebut.
const state = inject(TransferState);
if (state.hasKey(USERS)) {
this.users = state.get(USERS, []);
} else {
this.http.get<User[]>('/api/users')
.subscribe(u => { this.users = u; state.set(USERS, u); });
}HttpClient Melakukannya Secara Automatik
Memanggil provideClientHydration(withHttpTransferCacheOptions()) (didayakan secara lalai dengan hidrasi) menyebabkan HttpClient menyimpan respons GET pelayan ke dalam TransferState, supaya permintaan klien yang sama dilayan daripada cache tanpa kunci manual.
provideClientHydration(withHttpTransferCacheOptions({ filter: (req) => req.method === 'GET' }))Mengelakkan Kandungan Berkelip
Oleh sebab klien menggunakan semula data yang dipindahkan, paparan terhidrat sepadan tepat dengan HTML pelayan, lalu menghalang kilatan apabila kandungan hilang dan dimuatkan semula.
Nota Keselamatan
Keadaan yang dipindahkan dibenamkan dalam HTML awam. Jangan sekali-kali meletakkan rahsia, token atau data peribadi pengguna yang tidak patut didedahkan dalam sumber halaman ke dalam TransferState.
Manual Berbanding Automatik
Cache pemindahan HTTP meliputi kebanyakan pengambilan data berasaskan GET secara automatik. Gunakan makeStateKey manual untuk keadaan terhitung bukan HTTP yang ingin anda bawa dari pelayan ke klien.
Skop Cache
Cache pemindahan HTTP adalah bagi setiap permintaan dan digunakan sekali pada klien. Selepas permintaan klien pertama yang sepadan membacanya, panggilan seterusnya pergi ke rangkaian seperti biasa.
Mengesahkan Ia Berfungsi
Periksa respons SSR dan cari skrip keadaan yang dibenamkan. Dalam tab rangkaian pelayar, anda sepatutnya melihat bahawa pengambilan data berganda dilangkau sejurus selepas hidrasi.
Semakan Pantas
Uji pengetahuan anda tentang pemindahan keadaan.
Imbas Kembali
Anda telah mempelajari cara membawa data dari pelayan ke klien dengan TransferState dan makeStateKey, menggunakan cache pemindahan HTTP automatik, mengelakkan pengambilan data berganda dan kandungan berkelip, serta memastikan data peribadi tidak dimasukkan ke dalam keadaan yang dibenamkan secara awam.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 38
- Pelajaran
- 144
Soalan Lazim
Adakah pelajaran “Memindahkan Keadaan kepada Klien” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Memindahkan Keadaan kepada Klien”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Memindahkan Keadaan kepada Klien”?
Elakkan permintaan pendua dengan pemindahan keadaan. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Memindahkan Keadaan kepada Klien” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Mengapa Paparan Sisi Pelayan
- Menyediakan Angular SSR
- Laluan Pelayan dan Mod Paparan
- Memindahkan Keadaan kepada Klien