Angular Academy · Pelajaran

Laluan Pelayan dan Mod Paparan

Konfigurasikan prapaparan, SSR dan CSR bagi setiap laluan.

Pelajaran 3 daripada 413 langkah

Laluan Pelayan dan Mod Paparan ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 3 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.

Satu Cara Tidak Sesuai untuk Semua

Tidak semua laluan sepatutnya dipaparkan dengan cara yang sama. SSR Angular membolehkan anda menetapkan mod pemaparan bagi setiap laluan: dipaparkan oleh pelayan, dipaparkan oleh klien atau diprapaparkan pada masa binaan.

Tiga Mod

RenderMode.Server memaparkan pada setiap permintaan, RenderMode.Client hanya memaparkan dalam pelayar (CSR), dan RenderMode.Prerender menjana HTML statik pada masa binaan (SSG).

Konfigurasi Laluan Pelayan

Tentukan pemetaan ServerRoute[] yang memetakan laluan kepada mod pemaparan, kemudian sediakannya dengan provideServerRouting dalam konfigurasi pelayan.

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

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

Menyambungkan Konfigurasi

Daftarkan laluan dalam konfigurasi app pelayan supaya enjin SSR mengetahui cara mengendalikan setiap laluan.

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

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

Bila Hendak Memprapaparkan

Pilih Prerender untuk halaman awam yang stabil: laman utama, tentang kami dan dokumentasi. Halaman ini dibina sekali menjadi HTML, disediakan serta-merta daripada CDN, tanpa kos pelayan bagi setiap permintaan.

Bila Hendak Menggunakan Pelayan

Pilih Server untuk halaman yang kandungannya berubah mengikut permintaan atau pengguna tetapi masih memerlukan SEO atau paparan pertama yang pantas, seperti halaman produk dengan stok semasa.

Bila Hendak Menggunakan Klien

Pilih Client untuk halaman peribadi yang sangat interaktif, apabila SEO dan paparan pertama kurang penting, seperti papan pemuka yang memerlukan pengesahan. Pelayan menghantar rangka dan pelayar melakukan pemaparan.

Memprapaparkan Parameter Dinamik

Untuk laluan berparameter, anda mesti memberitahu prapapar parameter yang hendak dijana dengan mengembalikan senarai menggunakan getPrerenderParams.

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

Sandaran untuk Prapaparan

Parameter yang tidak diprapaparkan boleh beralih kepada pemaparan pelayan atau klien semasa masa jalan, jadi anda boleh memprapaparkan item popular dan memaparkan item yang kurang popular apabila diminta.

Pengepala dan Status Mengikut Laluan

Laluan pelayan boleh menetapkan pengepala respons dan kod status, yang berguna untuk dasar caching atau mengembalikan 404 daripada pengendali laluan yang tidak ditemui.

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

Menggabungkan Mod Secara Strategik

App sebenar menggabungkan mod: prapaparkan halaman pemasaran, paparkan halaman dinamik yang kritikal untuk SEO oleh pelayan dan paparkan app di sebalik log masuk oleh klien. Ini mengoptimumkan kos dan prestasi secara serentak.

Semakan Pantas

Uji pengetahuan anda tentang mod pemaparan.

Jawab dalam pelajaran interaktif

Imbas Kembali

Anda telah mengkonfigurasi pemaparan mengikut laluan dengan ServerRoute[] dan provideServerRouting: Prerender untuk halaman awam yang stabil, Server untuk halaman dinamik yang memerlukan SEO dan Client untuk halaman peribadi yang interaktif, termasuk parameter prapaparan bagi laluan dinamik.

Percuma untuk bermula

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

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Laluan Pelayan dan Mod Paparan” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Laluan Pelayan dan Mod Paparan”, 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 “Laluan Pelayan dan Mod Paparan”?

Konfigurasikan prapaparan, SSR dan CSR bagi setiap laluan. 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 3 daripada 4.

Berapa lamakah pelajaran “Laluan Pelayan dan Mod Paparan” 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

← Kembali ke Angular Academy