🌟 Kích hoạt Server-Side Rendering (SSR) trong Ứng dụng Angular

Trong bài viết này, chúng ta sẽ tìm hiểu cách kích hoạt Server-Side Rendering (SSR) trong một ứng dụng Angular. Chúng ta sẽ khám phá một kịch bản thực tế và xem từng bước SSR giúp giải quyết vấn đề như thế nào.

🧐 Tại sao cần thêm SSR?

Angular thường render nội dung trên trình duyệt, điều này không tối ưu cho các công cụ tìm kiếm hoặc hiệu suất tải ban đầu. SSR cho phép:

• ✅ Công cụ tìm kiếm có thể lập chỉ mục nội dung động
• ✅ Tăng tốc độ tải lần đầu và cải thiện Time-to-Interactive (TTI)
• ✅ Trả về mã trạng thái HTTP tùy chỉnh như 404
• ✅ Hiển thị trước cho người chỉnh sửa CMS

🔹 Kịch bản: Xử lý Mã trạng thái HTTP Tùy chỉnh (ví dụ: 404)

Giả sử bạn có nhiều trang trong ứng dụng Angular của mình cần trả về các mã trạng thái HTTP cụ thể.

Ví dụ, khi một trang không được tìm thấy, bạn muốn máy chủ gửi trở lại mã trạng thái 404 chính xác.

Thông thường, các ứng dụng Angular chạy trên trình duyệt không thể gửi mã trạng thái HTTP. Tuy nhiên, với SSR, chúng ta có thể tiêm đối tượng phản hồi của máy chủ và trả về các mã trạng thái tùy chỉnh như 404 (Không tìm thấy).

🔧 Thư viện Sử dụng

Chúng tôi sử dụng @nguniversal/express-engine, cung cấp một bộ chuyển đổi máy chủ dựa trên Express để render Angular trên máy chủ.

🔄 Thiết lập Bước từng bước cho SSR

Bước 1: Thêm Angular Universal

Chạy lệnh sau để thêm Angular Universal:

ng add @nguniversal/express-engine

Bước 2: Kiểm tra Cấu trúc Tệp

Sau khi lệnh chạy, đảm bảo rằng các tệp sau đây tồn tại:

• server.ts
• main.ts
• main.server.ts
• Cập nhật angular.json với mục tiêu máy chủ

📂 Cập nhật Tệp và Cấu hình

Trong server.ts

Đảm bảo tệp server.ts trông giống như sau để hỗ trợ định tuyến phía khách:

import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine, isMainModule } from '@angular/ssr/node';
import express from 'express';
import { dirname, join, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';
import AppServerModule from './main.server';
import { RESPONSE } from '@nguniversal/express-engine/tokens';
import https from 'https';
import fs from 'fs';

const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, '../browser');
const indexHtml = join(serverDistFolder, 'index.server.html');

const httpsOptions = {
  key: fs.readFileSync('./ssl-certificates/ssl.key'),
  cert: fs.readFileSync('./ssl-certificates/ssl.crt')
};

const app = express();
const commonEngine = new CommonEngine();

app.get(
  '**',
  express.static(browserDistFolder, {
    maxAge: '1y',
    index: 'index.html'
  }),
);

app.get('**', (req, res, next) => {
  const { protocol, originalUrl, baseUrl, headers } = req;

  commonEngine
    .render({
      bootstrap: AppServerModule,
      documentFilePath: indexHtml,
      url: `${protocol}://${headers.host}${originalUrl}`,
      publicPath: browserDistFolder,
      providers: [
        { provide: APP_BASE_HREF, useValue: baseUrl },
        { provide: RESPONSE, useValue: res }
      ],
    })
    .then((html) => res.send(html))
    .catch((err) => next(err));
});

if (isMainModule(import.meta.url)) {
  const port = process.env['PORT'] || 4200;
  https.createServer(httpsOptions, app).listen(port, () => {
    console.log(`🚀 Máy chủ Angular SSR đang chạy tại https://localhost:${port}`);
  });
}

export default app;

Trong main.ts

/// <reference types="@angular/localize" />
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Trong main.server.ts

export { AppServerModule as default } from './app/app.module.server';

⚠️ Lưu ý: Bằng cách cập nhật mã trong các tệp đã đề cập ở trên, bạn có thể kích hoạt SSR trong ứng dụng Angular của mình.

🌍 Cách Chạy SSR?

Bạn cần thêm một script máy chủ trong package.json. Trong một số trường hợp, nó đã được thêm mặc định, nhưng nếu không, bạn sẽ cần thêm thủ công như sau:

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "serve:ssr:Demo_App": "node dist/demo-app/server/server.mjs"
}

⚠️ Thay thế "Demo_App" và "demo-app" bằng tên dự án thực tế của bạn.

Sau đó, chạy lệnh này:

npm run serve:ssr:Demo_App

🔍 Trường hợp Sử dụng Thực tế

🔌 Ví dụ trang 404 với SSR

Bây giờ chúng ta sẽ thay đổi mã trạng thái của thành phần cụ thể mà sẽ được render mỗi khi nhận được mã phản hồi 404, nó sẽ cập nhật mã trạng thái của trang đó thành 404.

Để xử lý phản hồi 404 trong ứng dụng SSR Angular của chúng ta, chúng ta sẽ thực hiện các bước sau:

1. Tạo Thành phần Trang 404

• Xây dựng một thành phần dành riêng sẽ được render mỗi khi backend trả về phản hồi 404.

2. Sử dụng Đăng ký Trang

• Với sự trợ giúp của đăng ký trang (PAGE_REGISTRY) mà chúng ta đã tạo trong bài viết trước (Tiêu đề: "Đăng ký Thành phần (Cầu nối)") Xây dựng một ứng dụng Angular động dựa trên CMS bằng Optimizely & Kiến trúc BFF Tùy chỉnh, thư viện của chúng tôi có thể phát hiện khi phản hồi chứa trạng thái 404.
• Khi phát hiện, nó sẽ tự động ánh xạ và định tuyến phản hồi đến thành phần 404 mới.

3. Render Thành phần Trang 404

• Khi thành phần 404 được kích hoạt, nó nhận dữ liệu phản hồi.
• Tại thời điểm này, chúng ta thay thế logic hiện tại bằng mã dưới đây để cập nhật mã trạng thái HTTP thành 404.

import { RESPONSE } from '@nguniversal/express-engine/tokens';

constructor(
  private router: Router,
  @Optional() @Inject(RESPONSE) private response: any
) {}

ngOnInit(): void {
  if (this.response) {
    this.response.statusCode = 404;
    this.response.statusMessage = 'Trang không tìm thấy';
  }
}

⚠️ Lưu ý: Bằng cách sử dụng mã trên, bạn có thể dễ dàng cập nhật mã trạng thái của bất kỳ trang hoặc thành phần nào trong Angular.

4. Lưu ý về Kiến trúc

• Luồng này hoàn toàn tương thích với kiến trúc BFF (Backend for Frontend) mà tôi đang sử dụng.
• Tuy nhiên, bạn cũng có thể tùy chỉnh và cập nhật mã trạng thái HTTP trong dự án của riêng bạn dựa trên các điều kiện hoặc yêu cầu khác nhau.

🌟 Suy nghĩ Cuối cùng

Kích hoạt SSR trong Angular bằng Angular Universal mang lại cho bạn một tăng trưởng SEO và hiệu suất lớn trong khi vẫn giữ được tất cả tính linh hoạt phía khách của Angular.

Hãy sử dụng thiết lập này để xây dựng các ứng dụng Angular thân thiện với công cụ tìm kiếm, sẵn sàng cho sản xuất và dựa trên CMS!