reveal.js

# Angular Universal: Server-Side Rendering (SSR)

Lesson 1 - Angular Universal และ Full-Stack Integration

**Server-Side Rendering (SSR)** คือการให้ Server สร้าง HTML ที่สมบูรณ์ก่อนส่งให้ Browser ช่วยแก้ปัญหา **Client-Side Rendering (CSR)** ที่มักมี First Load ช้าและอาจทำให้ Search Engine เห็นเนื้อหาไม่ครบ

---

## Timeline/ประวัติศาสตร์

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
 subgraph Era1["ยุค CSR / Client Render"]
 A["SPA Bundle Browser render ทั้งหมด"]
 end
 subgraph Era2["ยุค Angular Universal / SSR"]
 B["Server Render HTML ส่ง HTML พร้อมอ่าน"]
 C["SEO + First Load ดีขึ้น"]
 end
 subgraph Era3["ยุค Hydration / Modern SSR"]
 D["Hydration Client รับช่วงต่อ"]
 E["Transfer State ส่งข้อมูลจาก server ไป client"]
 end
 A --> B --> C --> D --> E
</pre>

---

## แนวคิดสำคัญ

- **CSR** มีปัญหา SEO และ First Load ช้าเมื่อ bundle ใหญ่
- **SSR** คือ Server สร้าง HTML ก่อนส่งให้ Browser
- **`ng add @angular/ssr`** ใช้เพิ่ม SSR ให้โปรเจกต์ Angular รุ่นใหม่
- **`server.ts`** มักเป็น Express Server ที่รัน Angular Universal
- **Hydration** คือ Browser รับช่วงต่อจาก HTML ที่ Server render แล้ว
- **`isPlatformBrowser()` / `isPlatformServer()`** ใช้แยก logic ตาม platform
- **Transfer State** ลดการยิง API ซ้ำโดยส่งข้อมูลจาก Server ไปยัง Client

---

## ตารางเปรียบเทียบ CSR และ SSR

| หัวข้อ | CSR | SSR |
|---|---|---|
| HTML แรก | มักว่างหรือมี shell | มีเนื้อหาพร้อมอ่าน |
| SEO | อาจมีข้อจำกัด | ดีขึ้น |
| First Load | ช้าถ้า bundle ใหญ่ | เห็นเนื้อหาเร็วขึ้น |
| Server Cost | ต่ำกว่า | สูงกว่า |
| Complexity | ง่ายกว่า | ต้องระวัง browser-only API |

---

## Mermaid Diagram: SSR Flow

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart TD
 A["Browser Request ขอหน้าเว็บ"] --> B["Express SSR Server server.ts"]
 B --> C["Angular Render สร้าง HTML"]
 C --> D["HTML Response ส่งหน้าเต็ม"]
 D --> E["Browser Hydration รับช่วงต่อ"]
 E --> F["Interactive App ใช้งานได้"]
</pre>

---

## Code Example

```powershell
# เพิ่ม SSR ให้ Angular project
ng add @angular/ssr

# build แบบ production
ng build --configuration production

# รัน server-side rendered app
npm run serve:ssr:your-project-name

# ตัวอย่างการใช้งาน:
# เปิดหน้าเว็บแล้ว View Source ควรเห็น HTML ที่มีเนื้อหาจริง
```

```ts
// platform-check.component.ts
// แยก logic ตาม platform เพื่อเลี่ยงการใช้ window บน server
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
import { Component, Inject, PLATFORM_ID } from '@angular/core';

@Component({
 selector: 'app-platform-check',
 template: `{{ message }}`
})
export class PlatformCheckComponent {
 message = '';

constructor(@Inject(PLATFORM_ID) platformId: object) {
    if (isPlatformBrowser(platformId)) {
      this.message = 'ทำงานบน Browser';
    }

if (isPlatformServer(platformId)) {
      this.message = 'Render จาก Server';
    }
  }
}

// ตัวอย่างการใช้งาน:
// ใช้เมื่อต้องเขียน logic ที่อ้างถึง window, document หรือ localStorage
```

---

## วิดีโอแนะนำ

- [YouTube: Angular SSR Universal Hydration](https://www.youtube.com/results?search_query=Angular+SSR+Universal+Hydration)

---

## กิจกรรมท้ายบท

1. เพิ่ม SSR ให้โปรเจกต์ Angular
2. ตรวจ View Source ก่อนและหลังเปิด SSR
3. ทดลองใช้ `isPlatformBrowser()` กับ logic ที่อ่าน `window`
4. อธิบายว่า Hydration ช่วยให้งานฝั่ง client ต่อจาก server render ได้อย่างไร

---

## End

<a href="/web-programming/13-fullstack-integration/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>