# Angular Universal & SSR (Angular)

> Server-side rendering, prerendering, setup Angular Universal, deteksi platform, transfer state, optimasi SEO

- 20 pertanyaan wawancara
- Senior
- [Pertanyaan Wawancara: Angular](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara.md)

## 1. Apa itu Angular Universal?

**Jawaban**

Angular Universal adalah solusi resmi untuk server-side rendering (SSR) di Angular. Ia menghasilkan HTML di server sebelum mengirimkannya ke klien, meningkatkan waktu muat awal dan SEO. Berbeda dengan rendering klasik yang memerlukan pengunduhan dan eksekusi JavaScript sebelum menampilkan konten, Universal menghasilkan HTML lengkap secara langsung.

## 2. Apa keuntungan utama server-side rendering (SSR) untuk SEO?

**Jawaban**

Crawler mesin pencari menerima HTML lengkap yang langsung dapat digunakan, tanpa menunggu eksekusi JavaScript. Ini memastikan pengindeksan konten yang benar bahkan untuk crawler yang kesulitan dengan SPA klasik. Selain itu, meta tag (title, description) hadir sejak pemuatan awal, meningkatkan visibilitas di hasil pencarian.

## 3. Apa perbedaan antara SSR (Server-Side Rendering) dan prerendering?

**Jawaban**

SSR menghasilkan HTML on-demand untuk setiap permintaan pengguna di sisi server, memungkinkan konten dinamis. Prerendering menghasilkan HTML untuk semua rute pada waktu build dan melayani file statis. Prerendering cocok untuk situs dengan konten statis (blog, dokumentasi) karena lebih cepat dan lebih hemat sumber daya. SSR diperlukan untuk konten yang dipersonalisasi atau sering berubah.

## 17 pertanyaan lagi tersedia

- Bagaimana mendeteksi apakah kode berjalan di sisi server atau browser?
- Apa itu API TransferState dan apa tujuannya?

Daftar gratis: https://sharpskill.dev/id/login

## Topik wawancara Angular lainnya

- [Dasar-dasar TypeScript](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/typescript-basics.md): 25 pertanyaan, Junior
- [TypeScript Lanjutan](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/typescript-advanced.md): 20 pertanyaan, Junior
- [Dasar-Dasar Angular](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/angular-fundamentals.md): 20 pertanyaan, Junior
- [Komponen dan siklus hidup](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/components-lifecycle.md): 20 pertanyaan, Junior
- [Services & Dependency Injection](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/services-dependency-injection.md): 20 pertanyaan, Junior
- [Organisasi Modul Angular](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/modules-organization.md): 22 pertanyaan, Mid-Level
- [Angular CLI](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/angular-cli.md): 18 pertanyaan, Junior
- [Direktif dan Pipe](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/directives-pipes.md): 22 pertanyaan, Mid-Level
- [Routing dan Navigasi](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/routing-navigation.md): 24 pertanyaan, Mid-Level
- [Reactive Forms](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/forms-reactive.md): 26 pertanyaan, Mid-Level
- [Template-driven Forms](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/forms-template-driven.md): 16 pertanyaan, Mid-Level
- [Dasar-Dasar RxJS](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/rxjs-fundamentals.md): 22 pertanyaan, Mid-Level
- [Operator RxJS](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/rxjs-operators.md): 24 pertanyaan, Mid-Level
- [HttpClient & Panggilan API](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/http-client.md): 22 pertanyaan, Mid-Level
- [Manajemen State Dasar](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/state-management-basics.md): 20 pertanyaan, Mid-Level
- [Change Detection](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/change-detection.md): 20 pertanyaan, Mid-Level
- [Angular Signals](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/angular-signals.md): 20 pertanyaan, Mid-Level
- [Standalone Components](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/standalone-components.md): 18 pertanyaan, Mid-Level
- [Unit Testing Angular](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/testing-unit.md): 22 pertanyaan, Mid-Level
- [Pengujian End-to-End](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/testing-e2e.md): 18 pertanyaan, Mid-Level
- [Build dan optimasi](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/build-optimization.md): 20 pertanyaan, Mid-Level
- [Dasar-dasar NgRx](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/ngrx-fundamentals.md): 24 pertanyaan, Senior
- [NgRx Lanjutan](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/ngrx-advanced.md): 24 pertanyaan, Senior
- [Arsitektur Angular](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/angular-architecture.md): 22 pertanyaan, Senior
- [Optimisasi Performa](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/performance-optimization.md): 22 pertanyaan, Senior
- [Keamanan dan Praktik Terbaik](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/security-best-practices.md): 20 pertanyaan, Senior
- [Pola RxJS Lanjutan](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/advanced-rxjs-patterns.md): 22 pertanyaan, Senior
- [Micro-frontend Angular](https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/micro-frontends-angular.md): 20 pertanyaan, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/id/technologies/angular/pertanyaan-wawancara/angular-universal-ssr