Giới thiệu

Trong phần 5 của Câu hỏi phỏng vấn Angular 20 (Phiên bản 2025), chúng ta sẽ cùng khám phá:

Ứng dụng web tiến bộ (PWA) trong Angular (Q171–Q180)
Kết xuất phía máy chủ (SSR) & Angular Universal (Q181–Q190)
Zone.js, ngOptimizedImage & Tối ưu hóa hiệu suất (Q191–Q200)

Hãy cùng nhau tìm hiểu những khái niệm quan trọng và các thực tiễn tốt nhất trong việc phát triển ứng dụng Angular hiện đại!

PWA trong Angular (Q171–Q180)

Q171. PWA là gì?

PWA (Progressive Web App) là ứng dụng web có hỗ trợ ngoại tuyến, thông báo đẩy và khả năng cài đặt giống như ứng dụng gốc.

Q172. Làm thế nào để biến ứng dụng Angular thành PWA?

bash Copy

ng add @angular/pwa

Lệnh này sẽ thêm các service worker, manifest và biểu tượng cho ứng dụng của bạn.

Q173. Service Worker trong Angular là gì?

Là một script chạy ngầm trong nền.
Lưu trữ tài nguyên và API để sử dụng ngoại tuyến.

Q174. Cách cấu hình cache trong PWA Angular?

Chỉnh sửa tệp ngsw-config.json:

json Copy

{
  "assetGroups": [
    { "name": "app", "installMode": "prefetch", "resources": { "files": ["/*.html", "/*.css", "/*.js"] } }
  ]
}

Q175. PWAs xử lý đồng bộ dữ liệu ngoại tuyến như thế nào trong Angular?

Sử dụng IndexedDB (thông qua idb hoặc NgRx Data).
Đồng bộ dữ liệu khi trực tuyến bằng cách sử dụng API đồng bộ nền.

Q176. Làm thế nào để kiểm tra PWA Angular?

Sử dụng Chrome DevTools → Lighthouse Audit.
Kiểm tra chế độ ngoại tuyến qua DevTools → Network → “Offline”.

Q177. Lợi ích của Angular PWA là gì?

Tải nhanh hơn (nhờ cache).
Hoạt động ngoại tuyến.
Thông báo đẩy.
Có thể cài đặt trên màn hình chính.

Q178. Cách kích hoạt thông báo đẩy trong PWA Angular?

Sử dụng @angular/service-worker + Firebase Cloud Messaging.

Q179. Những hạn chế của PWAs là gì?

Truy cập phần cứng của thiết bị hạn chế hơn so với ứng dụng gốc.
Phân phối qua App Store vẫn còn hạn chế.

Q180. Làm thế nào để cập nhật service worker trong Angular?

Triển khai phiên bản mới → Angular sẽ phát hiện và nhắc người dùng tải lại.

Kết xuất phía máy chủ (SSR) (Q181–Q190)

Q181. Angular Universal (SSR) là gì?

Là kỹ thuật mà Angular render HTML trên máy chủ thay vì phía client.
Cải thiện SEO và hiệu suất tải ban đầu.

Q182. Làm thế nào để kích hoạt SSR trong Angular 20?

bash Copy

ng add @nguniversal/express-engine

Q183. Lợi ích của Angular SSR là gì?

Tối ưu SEO cho bot tìm kiếm.
Tốc độ tải trang đầu tiên nhanh hơn (FCP).
Hoạt động tốt trên mạng chậm.

Q184. Nhược điểm của SSR trong Angular là gì?

Cài đặt phức tạp hơn.
Cần máy chủ Node.js.
Tăng tải cho máy chủ.

Q185. Làm thế nào để triển khai ứng dụng Angular Universal?

Các nền tảng: Vercel, Firebase Functions, AWS Lambda hoặc máy chủ Node tùy chỉnh.

Q186. Kết xuất trước (pre-rendering) trong Angular SSR là gì?

Tạo các trang HTML tĩnh tại thời điểm xây dựng.
Kết hợp giữa tạo trang tĩnh và SSR.

Q187. Làm thế nào để sử dụng TransferState trong Angular SSR?

Lưu trữ phản hồi API trên máy chủ.
Cung cấp chúng cho client mà không cần gọi HTTP trùng lặp.

Q188. Sự khác biệt giữa SSR và SSG trong Angular là gì?

SSR → render HTML tại thời gian chạy trên máy chủ.
SSG → tạo HTML trước tại thời gian xây dựng.

Q189. Làm thế nào để xử lý xác thực với Angular SSR?

Lưu trữ token phiên một cách an toàn.
Sử dụng API máy chủ với cookie thay vì lưu trữ cục bộ.

Q190. Làm thế nào để gỡ lỗi các vấn đề SSR trong Angular?

Sử dụng nhật ký máy chủ.
Chạy npm run dev:ssr để xem các vấn đề kết xuất.

Zone.js & Tối ưu hóa (Q191–Q200)

Q191. Zone.js trong Angular là gì?

Là thư viện patch các API bất đồng bộ.
Theo dõi các hoạt động bất đồng bộ và tự động kích hoạt phát hiện thay đổi.

Q192. Tại sao Zone.js lại quan trọng trong Angular?

Giúp Angular tự động cập nhật UI sau các tác vụ bất đồng bộ.
Nếu không có nó, bạn sẽ phải gọi phát hiện thay đổi thủ công.

Q193. Làm thế nào để chạy mã bên ngoài Zone của Angular để tối ưu hóa hiệu suất?

javascript Copy

this.zone.runOutsideAngular(() => {
  window.addEventListener('scroll', () => { /* không kích hoạt CD */ });
});

Q194. Làm thế nào để vào lại Zone của Angular một cách thủ công?

javascript Copy

this.zone.run(() => { this.value = 42; });

Q195. `ngOptimizedImage` trong Angular 20 là gì?

Chỉ thị tích hợp sẵn cho tối ưu hóa hình ảnh.
Các tính năng: tải lười, tạo srcset, tự động thay đổi kích thước.

Q196. Ví dụ sử dụng `ngOptimizedImage`?

html Copy

<img ngSrc="assets/banner.png" width="800" height="400" priority />

Q197. Những thực tiễn tốt nhất để tối ưu hóa hiệu suất Angular là gì?

Sử dụng chiến lược OnPush.
Sử dụng trackBy trong *ngFor.
Tải trước và tải lười các module.
Sử dụng async pipe.
Tránh rò rỉ bộ nhớ với takeUntil.
Tối ưu hóa hình ảnh với ngOptimizedImage.

Q198. Làm thế nào để phân tích hiệu suất Angular?

Sử dụng Angular DevTools Profiler.
Sử dụng Chrome DevTools → tab Performance.

Q199. Làm thế nào để giảm kích thước bundle trong ứng dụng Angular?

Bật tối ưu hóa trong angular.json.
Sử dụng các thành phần độc lập.
Loại bỏ các import không sử dụng.
Sử dụng ng build --configuration production.

Q200. Hydration trong Angular SSR là gì?

Quy trình tái sử dụng DOM đã được render từ máy chủ thay vì render lại trên client.
Cải thiện hiệu suất khởi động.

Kết luận

Trong phần 5 của Câu hỏi phỏng vấn Angular 20 (Phiên bản 2025), chúng ta đã thảo luận về:

PWA trong Angular (Q171–Q180)
Kết xuất phía máy chủ & Angular Universal (Q181–Q190)
Zone.js & Tối ưu hóa (Q191–Q200)

Hãy áp dụng những kiến thức này để phát triển các ứng dụng Angular tối ưu hơn!

Câu hỏi thường gặp

Câu hỏi 1: PWA có thể thay thế ứng dụng gốc không?

Không hoàn toàn, nhưng nó cung cấp nhiều tính năng tương tự.

Câu hỏi 2: Có cần thiết phải sử dụng SSR cho mọi ứng dụng không?

Không, chỉ cần thiết cho các ứng dụng cần SEO cao và hiệu suất tốt hơn.

Câu hỏi 3: Làm thế nào để tối ưu hóa hiệu suất cho ứng dụng Angular?

Thực hiện các thực tiễn tốt nhất như sử dụng OnPush, lazy load và giảm kích thước bundle.

Câu Hỏi Phỏng Vấn Angular 20: PWA, SSR, Zone.js & Tối Ưu Hóa