Angular SSR ด้วย Angular Universal: Server-Side Rendering

Angular SSR คืออะไร

Angular Universal ช่วยให้ render HTML บน server ก่อนส่งไปยัง browser ทำให้

• SEO ดีขึ้น เพราะ crawler เห็น content
• First Contentful Paint (FCP) เร็วขึ้น
• Social media preview ทำงานได้

ติดตั้ง SSR

ng add @angular/ssr

คำสั่งนี้จะสร้างไฟล์ที่จำเป็นให้อัตโนมัติ

โครงสร้างหลัง SSR

src/
  app/
    app.config.ts          # client config
    app.config.server.ts   # server config
  main.ts                  # client bootstrap
  main.server.ts           # server bootstrap
server.ts                  # Express server

isPlatformBrowser

บางโค้ดรันได้เฉพาะ browser เช่น localStorage, window

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

export class MyComponent {
  private platformId = inject(PLATFORM_ID);

  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      // โค้ดที่รันได้เฉพาะ browser
      const token = localStorage.getItem('token');
    }
  }
}

TransferState

ส่งข้อมูลจาก server ไป client เพื่อไม่ต้อง fetch ซ้ำ

import { TransferState, makeStateKey } from '@angular/core';

const USERS_KEY = makeStateKey<User[]>('users');

export class UserService {
  private transferState = inject(TransferState);

  getUsers(): Observable<User[]> {
    if (this.transferState.hasKey(USERS_KEY)) {
      const users = this.transferState.get(USERS_KEY, []);
      this.transferState.remove(USERS_KEY);
      return of(users);
    }
    return this.http.get<User[]>('/api/users').pipe(
      tap(users => this.transferState.set(USERS_KEY, users))
    );
  }
}

Build และ Run

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

สรุป

Angular SSR เหมาะกับ app ที่ต้องการ SEO หรือ performance บน first load ควรระวังการใช้ browser-only APIs และใช้ isPlatformBrowser ตรวจสอบก่อนเสมอครับ