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

<Meta title='@dxtmisha/vi/nitro-basic/! Giới thiệu về thư viện'/>

# [@dxtmisha/nitro-basic](https://github.com/dxtmisha/dxt-ui/tree/main/packages/nitro-basic)

`@dxtmisha/nitro-basic` là một thư viện tiện ích cơ bản được thiết kế để xây dựng các ứng dụng Server-Side Rendering (SSR) mạnh mẽ bằng Vue 3 và Nitro. Nó cung cấp một bộ công cụ để đồng bộ hóa trạng thái giữa server và client, quản lý định tuyến và đơn giản hóa quy trình phát triển ứng dụng SSR.

## Cài đặt

Để bắt đầu sử dụng thư viện, hãy cài đặt nó qua npm:

```bash
npm i @dxtmisha/nitro-basic
```

## Thư viện này dùng để làm gì?

Phát triển các ứng dụng với SSR (Server-Side Rendering) đòi hỏi sự chú ý đặc biệt đến từng chi tiết: từ việc cô lập trạng thái cho những người dùng khác nhau trên server đến việc ngăn chặn lỗi không khớp khi hydrat hóa (hydration mismatch) trên client.

`@dxtmisha/nitro-basic` xử lý các tác vụ thông thường để cấu hình môi trường Nitro và Vue, cung cấp một cơ chế thống nhất để khởi tạo bộ lưu trữ, API client và định tuyến. Nó đóng vai trò như một cầu nối giữa các khả năng mạnh mẽ của Nitro và tính phản ứng của Vue 3.

## Có gì bên trong?

Thư viện bao gồm các công cụ để giải quyết các tác vụ SSR chính:

**Khởi tạo môi trường** — các hàm `uiCreateServerApp` và `uiCreateClientApp` cung cấp một cách tiêu chuẩn hóa để khởi chạy ứng dụng trong các môi trường khác nhau, tự động cấu hình các plugin và dịch vụ cần thiết.

**Quản lý trạng thái và bộ lưu trữ** — các công cụ để làm việc với bộ lưu trữ server (`initServerStorage`) và cookie (`initCookieStorage`). Chúng đảm bảo rằng dữ liệu nhận được trên server có thể truy cập được bởi các thành phần Vue thông qua cơ chế `provide/inject`.

**Đồng bộ hóa định tuyến** — các tiện ích để tạo và khởi tạo router (`uiCreateSsrRouter`, `initServerRouter`), đảm bảo điều hướng URL chính xác ở phía server và chuyển giao mượt mà cho client.

**Hydrat hóa dữ liệu** — tự động tạo các kịch bản JSON (`initScriptsJson`) để chuyển trạng thái `ServerStorage` và dữ liệu `Api` từ server sang client, loại bỏ các yêu cầu API dư thừa trong quá trình tải trang.

**Tích hợp API** — phương tiện để cấu hình các header và origin của yêu cầu, cho phép sử dụng URL tuyệt đối trong các cuộc gọi phía server và duy trì ủy quyền thông qua chuyển tiếp cookie.

**Nitro Plugins** — các hàm có sẵn để mở rộng khả năng của Nitro, chẳng hạn như lưu trữ đệm phản hồi API phía server.

## Nó dành cho ai?

Thư viện được thiết kế cho các nhà phát triển đang xây dựng giải pháp của họ trên stack Vue 3 + Nitro (hoặc các kiến trúc giống Nuxt) và cần các công cụ cấp thấp nhưng linh hoạt để quản lý vòng đời của một ứng dụng SSR.

## Nguyên tắc

- **An toàn SSR** — tất cả các công cụ được thiết kế để loại bỏ rò rỉ dữ liệu giữa các yêu cầu từ những người dùng khác nhau.
- **Hydrat hóa mượt mà** — giảm thiểu sự khác biệt giữa trạng thái server và client.
- **Tính mô-đun** — khả năng sử dụng cả các hàm tạo ứng dụng toàn diện và các tiện ích khởi tạo nguyên tử riêng lẻ.
- **Tích hợp** — khả năng tương thích sâu với hệ sinh thái `@dxtmisha/functional`.

## Git

[https://github.com/dxtmisha/dxt-ui/tree/main/packages/nitro-basic](https://github.com/dxtmisha/dxt-ui/tree/main/packages/nitro-basic)
