Angular Academy · Pelajaran

Rute Server dan Mode Rendering

Konfigurasikan prerender, SSR, dan CSR untuk setiap rute.

Rute Server dan Mode Rendering adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Tidak Ada Satu Solusi untuk Semua

Tidak semua rute harus dirender dengan cara yang sama. SSR Angular memungkinkan Anda menetapkan mode rendering untuk setiap rute: dirender server, dirender klien, atau diprerender pada waktu build.

Tiga Mode

RenderMode.Server merender pada setiap permintaan, RenderMode.Client hanya merender di browser (CSR), dan RenderMode.Prerender menghasilkan HTML statis pada waktu build (SSG).

Konfigurasi Rute Server

Tentukan pemetaan ServerRoute[] yang menghubungkan jalur dengan mode rendering, lalu sediakan pemetaan tersebut melalui provideServerRouting dalam konfigurasi server.

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  { path: '', renderMode: RenderMode.Prerender },
  { path: 'dashboard', renderMode: RenderMode.Client },
  { path: '**', renderMode: RenderMode.Server }
];

Menghubungkannya

Daftarkan rute dalam konfigurasi app server agar mesin SSR mengetahui cara menangani setiap jalur.

// app.config.server.ts
import { provideServerRouting } from '@angular/ssr';

providers: [
  provideServerRendering(),
  provideServerRouting(serverRoutes)
]

Kapan Melakukan Prerender

Pilih Prerender untuk halaman publik yang stabil: beranda, tentang, dan dokumentasi. Halaman tersebut dibangun sekali menjadi HTML, disajikan secara instan dari CDN, tanpa biaya server per permintaan.

Kapan Menggunakan Server

Pilih Server untuk halaman yang kontennya berubah pada setiap permintaan atau untuk setiap pengguna, tetapi tetap memerlukan SEO atau tampilan awal yang cepat, seperti halaman produk dengan stok langsung.

Kapan Menggunakan Klien

Pilih Client untuk halaman privat yang sangat interaktif dan tidak terlalu mementingkan SEO serta tampilan awal, seperti dasbor yang memerlukan autentikasi. Server mengirimkan kerangka, lalu browser merendernya.

Prerender Parameter Dinamis

Untuk rute berparameter, Anda harus memberi tahu prerenderer parameter mana yang perlu dibuat dengan mengembalikan daftar melalui getPrerenderParams.

{
  path: 'product/:id',
  renderMode: RenderMode.Prerender,
  async getPrerenderParams() {
    const ids = await fetchProductIds();
    return ids.map(id => ({ id }));
  }
}

Fallback untuk Prerender

Parameter yang tidak diprerender dapat menggunakan rendering server atau klien saat runtime, sehingga Anda dapat memprerender item populer dan merender item lainnya sesuai permintaan.

Header dan Status Per Rute

Rute server dapat menetapkan header respons dan kode status, yang berguna untuk kebijakan caching atau mengembalikan 404 dari penangan rute yang tidak ditemukan.

{
  path: 'old-page',
  renderMode: RenderMode.Server,
  headers: { 'Cache-Control': 'no-store' }
}

Mencampur Mode secara Strategis

App nyata memadukan berbagai mode: memprerender halaman pemasaran, merender halaman dinamis yang penting bagi SEO di server, dan merender app di sisi klien setelah login. Dengan demikian, biaya dan performa dapat dioptimalkan secara bersamaan.

Pemeriksaan Singkat

Periksa pengetahuan Anda tentang mode rendering.

Rangkuman

Anda telah mengonfigurasi rendering per rute dengan ServerRoute[] dan provideServerRouting: Prerender untuk halaman publik yang stabil, Server untuk halaman dinamis yang penting bagi SEO, dan Client untuk halaman privat yang interaktif, termasuk parameter prerender untuk rute dinamis.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Rute Server dan Mode Rendering” gratis?

Ya — teks lengkap “Rute Server dan Mode Rendering” 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 “Rute Server dan Mode Rendering”?

Konfigurasikan prerender, SSR, dan CSR untuk setiap rute. 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 3 dari 4.

Berapa lama pelajaran “Rute Server dan Mode Rendering” 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

← Kembali ke Angular Academy