Belajar Angular - Server-side Rendering & Universal

#Pendahuluan

Aplikasi Angular standar dirender di browser, sehingga crawler dan pengguna melihat layar kosong selama JavaScript dimuat. Server-side rendering memindahkan pekerjaan merender HTML ke server, menghasilkan halaman yang langsung bisa dibaca.

Episode 21 membahas dasar-dasar Angular Universal, perbedaan prerendering dan server-side rendering, peningkatan SEO dan initial load, serta hydration dan interaksi antara server dan client. Kalian akan memahami kapan SSR diperlukan dan bagaimana konfigurasinya.

Konsep kuncinya adalah satu aplikasi, dua lingkungan eksekusi. Browser dan server sama-sama menjalankan komponen yang sama, tetapi dengan tanggung jawab yang berbeda.

#Dasar-dasar Angular Universal

#Apa yang Ditambahkan Universal

Universal adalah cara Angular untuk merender aplikasi di server. Pemasangannya cukup dengan satu perintah:

ng add @angular/nguniversal

Perintah ini menambahkan server.ts, builder server di angular.json, dan skrip dev:ssr, build:ssr, serta serve:ssr. File main.server.ts menjadi entry point server yang menggunakan renderApplication atau renderModule.

Entry point server

import { renderApplication } from "@angular/platform-server";
import { AppComponent } from "./app/app.component";
import { appConfig } from "./app/app.config";
 
const bootstrap = () => import("./main").then(() => AppComponent);
 
renderApplication(AppComponent, {
  providers: appConfig.providers,
});

#Menjalankan SSR di Development

Mode development menjalankan server Node sekaligus rebuild otomatis:

npm run dev:ssr

Setiap perubahan file langsung direfleksikan, dan kalian bisa memeriksa hasil HTML yang dikirim server lewat view-source browser.

#Prerendering vs Server-side Rendering

#Prerendering untuk Halaman Statis

Prerendering mengubah setiap route menjadi file HTML saat build. Jalankan build dengan prerender:

ng build --prerender

Hasilnya adalah folder statis yang bisa dilayani oleh CDN mana pun. Cocok untuk halaman yang isinya sama untuk semua pengguna.

#SSR untuk Halaman Dinamis

Server-side rendering menghasilkan HTML setiap kali ada request, jadi isi halaman bisa berbeda per pengguna:

ng build
npm run serve:ssr

serve:ssr menjalankan server Node dari file server.ts. Pilih prerender jika halaman hampir statis, dan SSR jika halaman bergantung pada data pengguna, session, atau cookie.

#SEO Improvements dan Initial Load

#Meta Tag dan Open Graph

Halaman yang dirender server bisa menyuntikkan meta tag yang dibaca crawler dan media sosial. Angular menyediakan Meta dan Title dari @angular/platform-browser:

Mengatur meta secara dinamis

import { Injectable } from "@angular/core";
import { Meta, Title } from "@angular/platform-browser";
 
@Injectable({ providedIn: "root" })
export class SeoService {
  constructor(private title: Title, private meta: Meta) {}
 
  update(title: string, description: string): void {
    this.title.setTitle(title);
    this.meta.updateTag({ name: "description", content: description });
  }
}

Dengan SSR, meta tag ini sudah ada di HTML yang diterima crawler, sehingga Google tidak perlu menunggu JavaScript.

#Initial Load yang Lebih Cepat

Pengguna melihat konten yang dirender server lebih cepat, dan browser mengerjakan lebih sedikit pekerjaan untuk first paint. Metric seperti Largest Contentful Paint dan waktu menuju interactive biasanya membaik secara signifikan.

#Hydration dan Interaksi Server-Client

#Mengaktifkan Hydration

Hydration adalah proses menyambungkan aplikasi Angular ke HTML yang sudah dirender server. Aktifkan dengan provideClientHydration:

Mengaktifkan hydration

import { provideClientHydration } from "@angular/platform-browser";
import { ApplicationConfig } from "@angular/core";
 
export const appConfig: ApplicationConfig = {
  providers: [provideClientHydration()],
};

Setelah hydration aktif, Angular mengenali DOM yang sudah ada, melekatkan event listener, dan tidak membuat ulang halaman dari nol. Hasilnya tidak ada kedipan layar dan interaksi langsung bisa digunakan.

#TransferState untuk Data

Server yang mengambil data di awal bisa membagikan hasilnya ke client lewat TransferState, sehingga client tidak perlu mengambil data yang sama dua kali:

Membagikan data dari server

import { TransferState, makeStateKey } from "@angular/core";
import { inject } from "@angular/core";
 
const CATEGORIES_KEY = makeStateKey("categories");
 
// di server: tulis data
// transferState.set(CATEGORIES_KEY, categories);
 
// di client: baca data
// const categories = transferState.get(CATEGORIES_KEY, null);

Ini mencegah flash of empty content dan double fetch, dua masalah umum pada aplikasi SSR tanpa TransferState.

#Penutup

Inti yang harus dibawa pulang:

• Universal memungkinkan satu aplikasi dirender di server dan di browser.
• Prerendering menghasilkan file statis; SSR merender per request.
• Meta tag dan title bisa disuntikkan lewat service SEO.
• SSR memperbaiki SEO dan mempercepat initial load.
• Hydration menyambungkan aplikasi ke HTML yang sudah dirender.
• TransferState membagikan data dari server ke client tanpa double fetch.

Di episode 22 berikutnya kita akan membahas observability dan monitoring — logging error frontend dan metrik performa, monitoring interaksi pengguna, error reporting dengan Sentry atau LogRocket, serta dukungan production dan penanganan insiden.