import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/vi/functional-basic/Classes/ApiHydration - Giảm tải dữ liệu API'/>

# Lớp ApiHydration

Một lớp để thu thập dữ liệu API cho việc "hydrat hóa" (hydration) phía máy khách trong quá trình SSR (Server-Side Rendering). Nó cho phép máy chủ ghi lại các phản hồi API trong lần render đầu tiên và chuyển chúng đến máy khách, ngăn chặn các yêu cầu mạng dư thừa khi ứng dụng khởi tạo trong trình duyệt.

> `ApiHydration` là một **lớp bổ trợ** (auxiliary class), được thiết kế để quản lý dữ liệu SSR. Trong hầu hết các trường hợp, bạn nên tương tác với việc hydrat hóa thông qua đối tượng `Api` toàn cục bằng các phương thức như `Api.getHydrationScript()`.

## Các tính năng chính

- **Tối ưu hóa SSR** — giảm số lượng yêu cầu sau khi tải trang bằng cách sử dụng lại dữ liệu từ phía máy chủ.
- **Thu thập dữ liệu** — tự động thu thập các phản hồi API thành công được đánh dấu để sử dụng toàn cục.
- **Nhúng HTML** — tạo một thẻ `<script>` an toàn với dữ liệu đã được JSON-serial hóa để nhúng vào tài liệu.
- **Đồng bộ hóa máy khách** — cho phép `ApiResponse` tự động tải dữ liệu đã hydrat hóa ở phía máy khách.

## Các phương thức

### Hành động

#### `toClient`

Lưu phản hồi API để hydrat hóa phía máy khách. Phương thức này chỉ thực thi trên máy chủ và chỉ dành cho các yêu cầu đã đặt `global` là true.

**Tham số:**
- `apiFetch: ApiFetch` — Cấu hình yêu cầu API.
- `response: T` — Dữ liệu phản hồi sẽ được chuyển đến máy khách.

#### `toString`

Trả về chuỗi đại diện cho dữ liệu hydrat hóa đã thu thập, được bọc trong một thẻ `<script>` an toàn với ID duy nhất.

**Trả về:** `string` — Thẻ script HTML đã được định dạng.

### Cấu hình

- `initResponse(response: ApiResponse): void` — Khởi tạo thực thể `ApiResponse` với dữ liệu hydrat hóa nếu đang chạy trong môi trường DOM.

## Các kiểu dữ liệu

#### `ApiHydrationList`
Danh sách các phản hồi API đã thu thập để hydrat hóa.
- `path: string` — Đường dẫn endpoint API.
- `method: ApiMethodItem` — Phương thức HTTP đã sử dụng.
- `request: any` — Dữ liệu yêu cầu.
- `response: any` — Dữ liệu phản hồi từ máy chủ.

## Hướng dẫn: Cơ chế Hydrat hóa

Các quy tắc và điều kiện sau đây xác định cách hệ thống hydrat hóa thu thập và chuyển dữ liệu giữa máy chủ và trình duyệt:

- **Cờ toàn cục** — chỉ các yêu cầu có thuộc tính `global` được đặt thành `true` mới được ghi lại để hydrat hóa.
- **Xử lý tự động** — cờ `global` được tự động đặt thành `true` cho tất cả các yêu cầu `GET`. Các phương thức khác yêu cầu bật thủ công.
- **Thực thi phía máy chủ** — việc thu thập dữ liệu chỉ xảy ra ở phía máy chủ (nơi `isDomRuntime()` trả về false).
