Angular SSR (Universal) มอบให้อะไร?

Question

Accepted Answer

**Angular SSR** (เรียกว่า Angular Universal ในอดีต) render HTML ของแอปพลิเคชันของคุณ **บนเซิร์ฟเวอร์** สำหรับคำขอเริ่มต้น แทนที่จะส่งหน้าว่างที่เบราว์เซอร์ต้องเติมด้วย JavaScript ซึ่งจะช่วยปรับปรุง SEO, ประสิทธิ์การทำงานที่รับรู้ได้ และการวาดครั้งแรก ## ปัญหาที่ SSR แก้ไข ```text Client-side rendering (default SPA): Server sends empty + JS bundle → browser downloads & runs Angular → THEN content appears → slow first paint; crawlers/social bots may see a blank page Server-side rendering: Server runs Angular, sends fully-rendered HTML → content visible immediately → Angular "hydrates" it for interactivity ``` ด้วย SSR เซิร์ฟเวอร์จะสร้าง HTML ที่สมบูรณ์ เพื่อให้ผู้ใช้และเครื่องมือค้นหาได้รับเนื้อหาจริงทันที จากนั้น Angular จะแนบ event listeners (hydration) เพื่อทำให้เป็นแบบ interactive ## การตั้งค่า ```bash ng add @angular/ssr # adds server rendering to an existing app ``` นี่จะสร้างเซิร์ฟเวอร์ Node/Express ที่ render Angular บนเซิร์ฟเวอร์และส่ง HTML ที่ render ล่วงหน้าแล้ว ## สิ่งที่ SSR มอบให้ ```text ✓ Better SEO — crawlers get full content (critical for content/marketing sites) ✓ Faster First Contentful Paint — visible content before JS loads ✓ Better social sharing — link previews see real meta tags/content ✓ Improved performance on slow devices/networks ``` ## Hydration — หลีกเลี่ยงการ render ซ้ำ ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` **Non-destructive hydration** ของ Angular สมัยใหม่นำ DOM ที่ render บนเซิร์ฟเวอร์กลับมาใช้ใหม่แทนที่จะทำลายและ render ใหม่ — ช่วยหลีกเลี่ยงการกระพริบและปรับปรุงประสิทธิ์การทำงาน ## ที่เกี่ยวข้อง: SSG (prerendering) ```text SSR → render per request (dynamic content, always fresh) SSG → prerender pages at BUILD time (static, fastest) — good for content that rarely changes ``` Angular ยังรองรับ **prerendering** (SSG) ของเส้นทางในเวลา build สำหรับการจัดส่งเนื้อหาแบบ static ที่เร็วที่สุด ## คำเตือน ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## ทำไมจึงสำคัญ สำหรับไซต์ที่มีเนื้อหามากมาย e-commerce หรือแอปใดๆ ที่ **SEO และการวาดครั้งแรกที่รวดเร็วมีความสำคัญ** Angular SPA แบบฝั่งไคลเอนต์อพยพ — เครื่องมือค้นหาและผู้ใช้ได้รับหน้าว่างจนกว่า JS จะทำงาน SSR (พร้อม hydration) แก้ไขปัญหานี้โดยส่ง HTML จริงตั้งแต่ต้น และ SSG ไปไกลกว่านั้นสำหรับเนื้อหาแบบ static การรู้ว่าเมื่อใด SSR คุ้มค่ากับความซับซ้อนที่เพิ่มเข้ามา — และคำเตือน browser-API — คือการตัดสินใจทางสถาปัตยกรรมหลัก