Angular SSR (Universal) cung cấp những gì?

Question

Accepted Answer

**Angular SSR** (trước đây gọi là Angular Universal) render HTML của ứng dụng **trên server** cho request ban đầu, thay vì gửi một trang trống mà trình duyệt phải lấp đầy bằng JavaScript. Điều này cải thiện SEO, hiệu năng cảm nhận, và first paint. ## Vấn đề mà SSR giải quyết ```text Client-side rendering (SPA mặc định): Server gửi trống + bundle JS → trình duyệt tải & chạy Angular → SAU ĐÓ nội dung xuất hiện → first paint chậm; crawler/social bot có thể thấy một trang trống Server-side rendering: Server chạy Angular, gửi HTML đã render đầy đủ → nội dung hiển thị ngay → Angular "hydrate" nó để có tính tương tác ``` Với SSR, server tạo ra HTML hoàn chỉnh nên người dùng và công cụ tìm kiếm nhận nội dung thực ngay lập tức; Angular sau đó gắn các event listener (hydration) để làm nó tương tác được. ## Thiết lập nó ```bash ng add @angular/ssr # thêm server rendering vào một ứng dụng có sẵn ``` Lệnh này dựng một server Node/Express render Angular trên server và phục vụ HTML đã được pre-render. ## SSR cung cấp những gì ```text ✓ SEO tốt hơn — crawler nhận nội dung đầy đủ (tối quan trọng cho site nội dung/marketing) ✓ First Contentful Paint nhanh hơn — nội dung hiển thị trước khi JS tải ✓ Chia sẻ mạng xã hội tốt hơn — link preview thấy meta tag/nội dung thực ✓ Hiệu năng cải thiện trên thiết bị/mạng chậm ``` ## Hydration — tránh render lại ```ts provideClientHydration() // hydration không phá hủy: tái sử dụng HTML server, không dựng lại ``` **Hydration không phá hủy (non-destructive)** của Angular hiện đại tái sử dụng DOM được render từ server thay vì vứt bỏ nó và render lại — tránh nhấp nháy và cải thiện hiệu năng. ## Liên quan: SSG (prerender) ```text SSR → render theo từng request (nội dung động, luôn mới) SSG → prerender các trang tại thời điểm BUILD (tĩnh, nhanh nhất) — tốt cho nội dung ít thay đổi ``` Angular cũng hỗ trợ **prerender** (SSG) các route tại thời điểm build để phân phối nội dung tĩnh nhanh nhất có thể. ## Lưu ý ```text ⚠️ Không có browser API trên server (window, document, localStorage) — bảo vệ bằng isPlatformBrowser ⚠️ Nhiều hạ tầng hơn (một server Node để chạy/bảo trì) ``` ## Tại sao điều này quan trọng Đối với các site nặng nội dung, thương mại điện tử, hoặc bất kỳ ứng dụng nào mà **SEO và first paint nhanh quan trọng**, một SPA Angular thuần client là chưa đủ — công cụ tìm kiếm và người dùng nhận một trang trống cho tới khi JS thực thi. SSR (với hydration) giải quyết điều này bằng cách phân phối HTML thực ngay từ đầu, và SSG đi xa hơn cho nội dung tĩnh. Biết khi nào SSR đáng với độ phức tạp tăng thêm — và các lưu ý về browser API — là phán đoán kiến trúc then chốt.