Angular Server Side Rendering - Tận dụng Angular SSR và Angular Universal

Mục lục

1. Giới thiệu về trình phối hợp phía máy chủ (SSR)
2. Đặt vấn đề: Tại sao cần sử dụng trình phối hợp phía máy chủ?
3. Cách hoạt động của trình phối hợp phía máy chủ trong Angular
4. Cài đặt trình phối hợp phía máy chủ trong Angular
   • 4.1. Cài đặt gói ng-universal/express-engine
   • 4.2. Cấu hình file main.server.ts và app.server.module.ts
   • 4.3. Cấu hình file server.ts
   • 4.4. Chạy ứng dụng với trình phối hợp phía máy chủ
5. Giải quyết vấn đề liên quan đến Storage trên phía máy chủ
6. Tận dụng lại dữ liệu đã phối hợp phía máy chủ trên phía máy khách
7. Lợi ích và hạn chế của trình phối hợp phía máy chủ trong Angular
8. Kết luận

📣 Trình phối hợp phía máy chủ trong Angular: Mọi thứ bạn cần biết

Trang web được phát triển bằng Angular thường không thể hiển thị nội dung được phối hợp phía máy chủ mặc định. Điều này dẫn đến không có nội dung được hiển thị cho người dùng khi trang web được tải. Trong bài viết này, chúng ta sẽ tìm hiểu về trình phối hợp phía máy chủ (SSR - Server-side Rendering) trong Angular và cách triển khai nó.

1. Giới thiệu về trình phối hợp phía máy chủ (SSR)

Trình phối hợp phía máy chủ (SSR) là một phương pháp để tạo trang web với việc phối hợp nội dung phía máy chủ trước khi gửi đến máy khách. Thay vì sử dụng JavaScript để xây dựng nội dung trên máy khách sau khi trang web đã tải, SSR cho phép chúng ta xây dựng nội dung trên máy chủ và gửi đến máy khách dưới dạng HTML đã được tạo sẵn.

2. Đặt vấn đề: Tại sao cần sử dụng trình phối hợp phía máy chủ?

Khi xây dựng trang web bằng Angular, việc không có nội dung được phối hợp phía máy chủ có thể gây ra một số vấn đề như sau:

• Trang web không thể hiển thị đúng nội dung ngay lập tức khi tải, người dùng phải chờ đợi cho đến khi JavaScript được tải và chạy để xây dựng nội dung trên máy khách.
• Không có nội dung được phối hợp phía máy chủ khi các công cụ tìm kiếm quét trang web. Điều này dẫn đến việc trang web không được hiển thị trong kết quả tìm kiếm.
• Hiệu năng trang web có thể bị ảnh hưởng nếu phải đợi cho đến khi JavaScript được tải và xử lý trên máy khách.

3. Cách hoạt động của trình phối hợp phía máy chủ trong Angular

Trình phối hợp phía máy chủ trong Angular hoạt động theo cách sau:

• Khi yêu cầu được gửi từ máy khách, trình phối hợp phía máy chủ xây dựng nội dung trên máy chủ và trả về dưới dạng HTML đã được tạo sẵn.
• HTML được gửi đến máy khách và trình duyệt hiển thị nội dung.
• JavaScript trong ứng dụng Angular sẽ tiếp tục chạy trên máy khách và xây dựng lại giao diện người dùng, tự động đính kèm các sự kiện và đặt lại trạng thái của ứng dụng.

4. Cài đặt trình phối hợp phía máy chủ trong Angular

Để triển khai trình phối hợp phía máy chủ trong Angular, chúng ta cần thực hiện các bước sau:

4.1. Cài đặt gói ng-universal/express-engine

Đầu tiên, chúng ta cần cài đặt gói ng-universal/express-engine để hỗ trợ trình phối hợp phía máy chủ trong Angular. Để cài đặt gói này, chạy lệnh sau:

ng add @nguniversal/express-engine

4.2. Cấu hình file main.server.ts và app.server.module.ts

Sau khi cài đặt thành công, một số file mới sẽ được tạo ra, trong đó có file main.server.ts và app.server.module.ts. Chúng ta cần cấu hình những file này để sử dụng trình phối hợp phía máy chủ.

4.3. Cấu hình file server.ts

Tiếp theo, chúng ta cần cấu hình file server.ts để khởi tạo ứng dụng trên máy chủ. Trong file này, chúng ta sẽ sử dụng Express để tạo máy chủ và cấu hình phối hợp phía máy chủ.

4.4. Chạy ứng dụng với trình phối hợp phía máy chủ

Cuối cùng, để chạy ứng dụng với trình phối hợp phía máy chủ, chúng ta cần sử dụng lệnh dev:ssr hoặc build:ssr để khởi động máy chủ và tạo nội dung đã phối hợp phía máy chủ.

5. Giải quyết vấn đề liên quan đến Storage trên phía máy chủ

Trên phía máy chủ, không có đối tượng storage như localStorage. Điều này có nghĩa là không thể sử dụng localStorage để lưu trữ hoặc truy xuất dữ liệu trên phía máy chủ. Để giải quyết vấn đề này, chúng ta cần sử dụng một số phương pháp khác nhau như truyền dữ liệu dưới dạng cookie hoặc header từ phía máy chủ.

6. Tận dụng lại dữ liệu đã phối hợp phía máy chủ trên phía máy khách

Một trong những lợi ích lớn của trình phối hợp phía máy chủ là khả năng tái sử dụng dữ liệu đã phối hợp phía máy chủ trên phía máy khách. Thay vì thực hiện truy vấn API lại trên phía máy khách, chúng ta có thể sử dụng dữ liệu đã được phối hợp phía máy chủ để giảm thiểu thời gian tải và tăng hiệu suất ứng dụng.