Angular Academy · Pelajaran

Menyiapkan Angular SSR

Tambahkan SSR dengan Angular CLI.

Menyiapkan Angular SSR adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Menambahkan SSR

Cara tercepat untuk mengaktifkan SSR adalah dengan skematik ng add @angular/ssr. Skematik ini menyiapkan build server, server berbasis Express, dan hydration untuk Anda.

// terminal
// ng add @angular/ssr

Proyek Baru

Saat membuat app baru, Anda dapat langsung memilih SSR melalui tanda SSR sehingga proyek siap menggunakan SSR sejak awal.

// ng new my-app --ssr

Yang Ditambahkan Skematik

Skematik ini menambahkan server.ts (server Express), bootstrap main.server.ts, app.config.server.ts, memperbarui angular.json dengan opsi server, dan mengaktifkan hydration dalam konfigurasi app.

provideServerRendering

Konfigurasi app server menyediakan mesin SSR melalui provideServerRendering(), yang digabungkan dengan konfigurasi browser Anda.

// app.config.server.ts
import { provideServerRendering } from '@angular/ssr';
import { mergeApplicationConfig } from '@angular/core';

const serverConfig = { providers: [provideServerRendering()] };
export const config = mergeApplicationConfig(appConfig, serverConfig);

Hydration di Klien

Konfigurasi browser mengaktifkan hydration agar klien menggunakan kembali HTML server, bukan merendernya ulang. Konfigurasi ini ditambahkan secara otomatis oleh skematik.

// app.config.ts
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig = {
  providers: [provideClientHydration()]
};

Server Express

server.ts membuat app Express yang menyajikan aset statis dan menyerahkan rendering HTML kepada mesin SSR Angular untuk semua rute lainnya.

// server.ts (simplified)
const app = express();
app.get('**', (req, res) => {
  angularApp.handle(req).then(response =>
    response ? writeResponseToNodeResponse(response, res) : res.sendStatus(404)
  );
});

Server Pengembangan

Selama pengembangan, ng serve menjalankan SSR secara otomatis dengan pembuat aplikasi, sehingga Anda dapat melihat keluaran yang dirender server dan hydration tanpa langkah tambahan.

// ng serve

Membangun untuk Produksi

Build produksi menghasilkan bundel browser dan bundel server. Anda menjalankan entri server Node untuk menyajikan SSR di lingkungan produksi.

// ng build
// node dist/my-app/server/server.mjs

API Khusus Browser

Kode juga dijalankan di server, tempat window, document, dan localStorage tidak tersedia. Lindungi akses tersebut atau SSR akan mengalami kerusakan.

import { isPlatformBrowser } from '@angular/common';
import { inject, PLATFORM_ID } from '@angular/core';

const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
if (isBrowser) { localStorage.setItem('k', 'v'); }

URL Absolut untuk HTTP

Di server, URL API relatif tidak memiliki asal. Gunakan URL absolut atau konfigurasikan basis agar pemanggilan HttpClient di sisi server terselesaikan dengan benar.

Memverifikasi SSR Berfungsi

Untuk memastikan SSR berfungsi, minta sebuah halaman lalu periksa respons mentahnya (misalnya dengan curl). Anda seharusnya melihat konten yang telah dirender di dalam HTML, bukan hanya root app yang kosong.

// curl http://localhost:4000/ | grep "<h1>"

Pemeriksaan Singkat

Periksa pengetahuan Anda tentang penyiapan SSR.

Rangkuman

Anda telah menyiapkan SSR dengan ng add @angular/ssr: perintah ini menambahkan server Express, provideServerRendering(), dan hydration klien. Ingatlah untuk melindungi API khusus browser, menggunakan URL absolut di sisi server, serta memverifikasi HTML yang dirender dalam respons mentah.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menyiapkan Angular SSR” gratis?

Ya — teks lengkap “Menyiapkan Angular SSR” 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 “Menyiapkan Angular SSR”?

Tambahkan SSR dengan Angular CLI. 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 2 dari 4.

Berapa lama pelajaran “Menyiapkan Angular SSR” 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