Angular Academy · Pelajaran

Mengapa Rendering Sisi Server

Pahami manfaat SSR untuk SEO dan kecepatan.

Mengapa Rendering Sisi Server adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

Apa Itu SSR

Server-Side Rendering (SSR) menjalankan app Angular Anda di server untuk menghasilkan HTML yang sepenuhnya dirender pada setiap permintaan. Browser langsung menerima markup yang bermakna, bukan kerangka kosong.

Masalah CSR

app yang sepenuhnya dirender di sisi klien (CSR) mengirimkan index.html yang hampir kosong beserta JavaScript. Pengguna dan perayap melihat halaman kosong sampai bundel selesai diunduh, diuraikan, dan dijalankan. SSR mengatasi jeda pada tampilan awal tersebut.

Manfaat SEO

Banyak perayap dan bot pratinjau tautan membaca HTML awal. Dengan SSR, judul, tag meta, dan konten halaman tersedia dalam respons, sehingga pengindeksan dan pratinjau kaya di media sosial menjadi lebih baik.

<!-- SSR response already contains content -->
<title>Product — Blue Shoes</title>
<meta name="description" content="Comfortable blue running shoes">
<h1>Blue Shoes</h1>

First Contentful Paint Lebih Cepat

Karena server mengirimkan HTML yang telah dirender, browser menampilkan konten lebih cepat. Hal ini meningkatkan First Contentful Paint (FCP) dan kecepatan yang dirasakan, terutama pada jaringan atau perangkat yang lambat.

Core Web Vitals Lebih Baik

SSR dapat meningkatkan Largest Contentful Paint (LCP) dengan mengirimkan konten utama dalam HTML awal, bukan setelah JavaScript dijalankan. Vitals yang baik membantu UX dan peringkat pencarian.

Berbagi di Media Sosial

Saat seseorang membagikan tautan, platform mengambil URL tersebut dan membaca tag meta Open Graph serta Twitter dari HTML. SSR memastikan tag tersebut mencerminkan halaman yang sebenarnya sehingga kartu pratinjau menjadi akurat.

<meta property="og:title" content="Blue Shoes">
<meta property="og:image" content="/img/shoes.png">

Berikutnya Adalah Hydration

Setelah mengirimkan HTML, app yang sama dijalankan di klien dan mengambil alih interaktivitas. Proses ini disebut hydration; Angular modern menggunakan kembali HTML dari server, bukan merendernya ulang.

Kompromi

SSR menambah biaya dan kompleksitas server: runtime Node, perbedaan kode khusus server dan khusus browser, serta rendering pada saat permintaan. Pertimbangkan hal tersebut terhadap peningkatan SEO dan performa untuk app Anda.

Saat SSR Paling Bermanfaat

Halaman yang kaya konten, bersifat publik, dan sensitif terhadap SEO (pemasaran, blog, daftar e-commerce) paling banyak memperoleh manfaat. Dasbor internal yang dilindungi login sering kali hanya memperoleh sedikit manfaat dari SSR.

Alternatif Prerendering

Untuk rute yang sebagian besar statis, prerendering (SSG) menghasilkan HTML pada waktu build, sehingga memberikan manfaat seperti SSR tanpa server aktif. Angular mendukung SSR dan prerendering secara berdampingan.

SSR Angular Saat Ini

Angular modern menyediakan SSR pihak pertama melalui @angular/ssr dengan pembuat aplikasi, hydration DOM penuh, dan mode rendering per rute, sehingga SSR jauh lebih sederhana daripada penyiapan Angular Universal lama.

Pemeriksaan Singkat

Periksa pemahaman Anda tentang pentingnya SSR.

Rangkuman

Anda telah mempelajari alasan pentingnya SSR: HTML nyata pada permintaan pertama meningkatkan SEO, pratinjau media sosial, FCP, dan LCP. SSR menambah biaya server, cocok untuk halaman publik yang kaya konten, melengkapi prerendering, dan Angular modern menyediakannya sebagai fitur utama melalui @angular/ssr.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengapa Rendering Sisi Server” gratis?

Ya — teks lengkap “Mengapa Rendering Sisi Server” 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 “Mengapa Rendering Sisi Server”?

Pahami manfaat SSR untuk SEO dan kecepatan. 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 1 dari 4.

Berapa lama pelajaran “Mengapa Rendering Sisi Server” 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