Mentransfer State ke Klien
Hindari permintaan duplikat dengan transfer state.
Mentransfer State ke Klien adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.
Masalah Pengambilan Data Ganda
Selama SSR, server mengambil data untuk merender HTML. Tanpa bantuan, klien mengambil data yang sama lagi setelah hydration, sehingga membuang satu permintaan dan berisiko menimbulkan perubahan tampilan konten.
TransferState sebagai Solusi
TransferState Angular membuat serialisasi data di server ke dalam HTML, lalu klien membacanya alih-alih mengambilnya kembali. Data tersebut dikirim dalam tag skrip pada respons.
Cara Data Berpindah
Status yang disimpan server disisipkan sebagai JSON di dalam halaman. Saat dijalankan, klien melakukan deserialisasi terhadapnya sehingga rendering pertama menggunakan data yang sama dengan yang digunakan server.
<!-- embedded in SSR HTML -->
<script id="ng-state" type="application/json">{"users-1":[...]}</script>Menggunakan makeStateKey
Buat kunci bertipe dengan makeStateKey, lalu baca atau tulis data melalui layanan TransferState.
import { makeStateKey, TransferState } from '@angular/core';
const USERS = makeStateKey<User[]>('users');
const state = inject(TransferState);
state.set(USERS, fetchedUsers);Pola Baca lalu Ambil
Di server dan klien: jika kunci tersedia di TransferState, gunakan nilainya; jika tidak, lakukan pengambilan data. Server mengambil dan menyimpan data; klien menemukan nilai yang tersimpan dan melewati pemanggilan 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 Otomatis
Memanggil provideClientHydration(withHttpTransferCacheOptions()) (aktif secara default bersama hydration) membuat HttpClient menyimpan respons GET server ke dalam TransferState, sehingga permintaan klien yang identik dilayani dari cache tanpa kunci manual.
provideClientHydration(withHttpTransferCacheOptions({ filter: (req) => req.method === 'GET' }))Menghindari Perubahan Tampilan
Karena klien menggunakan kembali data yang ditransfer, tampilan yang telah dihidrasi sama persis dengan HTML server, sehingga mencegah kilatan saat konten menghilang lalu dimuat ulang.
Catatan Keamanan
Status yang ditransfer disisipkan dalam HTML publik. Jangan pernah memasukkan rahasia, token, atau data privat per pengguna yang tidak ingin Anda tampilkan dalam sumber halaman ke dalam TransferState.
Manual dan Otomatis
Cache transfer HTTP secara otomatis mencakup sebagian besar pengambilan data berbasis GET. Gunakan makeStateKey manual untuk status hasil komputasi non-HTTP yang ingin Anda bawa dari server ke klien.
Cakupan Cache
Cache transfer HTTP berlaku per permintaan dan digunakan sekali di klien. Setelah permintaan klien pertama yang cocok membacanya, pemanggilan berikutnya kembali menggunakan jaringan seperti biasa.
Memverifikasi Fungsinya
Periksa respons SSR dan cari skrip status yang disisipkan. Pada tab jaringan browser, Anda seharusnya melihat bahwa pengambilan data duplikat dilewati segera setelah hydration.
Pemeriksaan Singkat
Periksa pengetahuan Anda tentang transfer status.
Rangkuman
Anda telah mempelajari cara membawa data dari server ke klien dengan TransferState dan makeStateKey, menggunakan cache transfer HTTP otomatis, menghindari pengambilan data ganda dan perubahan tampilan, serta menjaga data privat agar tidak masuk ke status yang disisipkan secara publik.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 38
- Pelajaran
- 144
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Mentransfer State ke Klien” gratis?
Ya — teks lengkap “Mentransfer State ke Klien” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Mentransfer State ke Klien”?
Hindari permintaan duplikat dengan transfer state. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Angular Academy?
Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Mentransfer State ke Klien” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Mengapa Rendering Sisi Server
- Menyiapkan Angular SSR
- Rute Server dan Mode Rendering
- Mentransfer State ke Klien