JavaScript meta framework Astro đã được cập nhật, mang tới cho người dùng những tính năng mới tuyệt vời. Dưới đây là những tính năng mới đáng thử ở Astro 2.5.

AstroJS là một công cụ tuyệt vời dựa trên JavaScript, được dùng để tạo các trang web tĩnh siêu nhanh. Nó cho phép bạn tạo web bằng nhiều framework JavaScript như React, Vue và Svelte. Astro 2.5 mang tới một số tính năng hoàn toàn mới, cụ thể:

Bộ sưu tập dữ liệu

Astro 2.5 giờ hỗ trợ lưu JSON và YAML trong các bộ sưu tập. Kiểu mới: thuộc tính ‘data’ kích hoạt tính năng này. Để minh họa cho điều đó, hãy tạo bộ sưu tập dữ liệu ‘writers’ trong thư mục src/content, nơi file JSON hoặc YAML có thể được thêm vào.

Tiếp theo, cấu hình bộ sưu tập trong src/content/config.ts bằng tiện ích defineCollection và z từ mô đun astro:content và đặt kiểu dữ liệu này.

import { z, defineCollection } from "astro:content";
const writers = defineCollection({
  type: "data",
  schema: z.object({ name: z.string() }),
});

Cuối cùng, xuất đối tượng collection để đăng ký bộ sưu tập.

export const collections = {writers:writers}

Thu nhỏ HTML

Astro 2.5 giới thiệu lựa chọn compressHTML, loại bỏ tất cả khoảng trắng (và ngắt dòng) trong HTML. Những thành phần chỉ được nén một lần bởi trình biên dịch Astro và sau đó là trong suốt quá trình build. Việc này được thực hiện để giảm chi phí hiệu suất.

Kích hoạt lựa chọn trên trong dự án thật dễ dàng. Chỉ cần thêm các dòng sau vào file config. HTML Minification (Thu nhỏ HTML) chỉ hoạt động với các thành phần được viết ở định dạng file .astro.

export default defineConfig({compressHTML:true})

Parallelized Rendering

Kết xuất song song các thành phần là một tính năng được mong đợi từ lâu ở Astro. Trong trường hợp thành phần con ở những sub-tree khác nhau tìm nạp dữ liệu, Astro 2.5 cải thiện thời gian tải bằng cách tìm nạp dữ liệu song song.

Điều này cho phép một thành phần nằm sâu trong cây được hiện mà không bị khóa bởi thành phần tìm nạp dữ liệu cao hơn trong cây. Hiện tại, kết xuất song song không hoạt động với các mảng không đồng bộ array.map.

Astro 2.5 cũng mang tới một nhóm các tính năng thử nghiệm thú vị khác.

Hybrid Rendering

Astro 2.5 giờ cho phép bạn xác định một lựa chọn đầu ra server mới trong file config, ghi đè hành vi được kết xuất trước theo mặc định của SSR.

Để tận dụng hybrid rendering, đặt hybridOutput sang true trong phần thử nghiệm của config và thêm bộ điều hợp.

Làm việc này mặc định sẽ kết xuất trước toàn bộ trang, nhưng bạn có thể chọn hành vi đó bằng cách đặt xuất prerender của bất kỳ route hay trang nào sang false:

export const prerender = false;

Custom Client Directives

Astro 2.5 giới thiệu addClientDirective API để kiểm soát hydrat thành phần bên client bằng các lệnh client:* tùy biến.

Để dùng tính năng này, kích hoạt experimental.customClientDirectives trong file config và giữ các điểm nhập chỉ thị ở mức tối thiểu nhằm tránh bất kỳ phản ứng tiêu cực tới hydrat thành phần.

Một hàm nhập ClientDirective sẽ được xuất từ file chỉ thị client của bạn. Ví dụ, code sau hydrat thành phần trên click đầu tiên ở cửa sổ.

import { ClientDirective } from "astro";
const clickDirective: ClientDirective = (load, opts, el) => {
  window.addEventListener(
    "click",
    async () => {
      const hydrate = await load();
      await hydrate();
    },
    { once: true }
  );
};
export default clickDirective;

Giờ client:click có thể được dùng trong thành phần kèm hỗ trợ nhập đầy đủ.

Cách cài Astro

Astro cung cấp một Command Line Interface (CLI), tên create astro cho bạn bắt đầu. Bạn cần cài NodeJS 16+ và npm trên máy.

npm create astro@latest

Điều này sẽ tạo ra một dự án Astro mới ngay từ đầu. Làm theo hướng dẫn trên màn hình để thiết lập mọi thứ. Tiếp theo, thêm cd vào thư mục dự án, rồi chạy:

npm run dev

Bạn có thể thêm framework như React, bằng astro add. Nếu mọi thứ được cài trực tiếp, bạn có thể mở localhost:3000 trên máy, và bạn sẽ thấy thông báo "Welcome to Astro".

Nếu không thích NPM, bạn có thể chọn các trình quản lý gói JavaScript khác như Yarn và PNPM.

Framework tất cả trong một như Astro khiến quá trình phát triển web nhanh và mượt mà nhất có thể. Nhờ nó, bạn có thể làm việc với bất kỳ framework JavaScript phổ biến mà không gặp rắc rối nào.