Fresh Framework – Web Framework Cho Deno Với Kiến Trúc Islands

Fresh là web framework thế hệ mới chạy trên nền Deno, được xây dựng dành riêng cho tốc độ, độ tin cậy và sự đơn giản. Với kiến trúc island-based hydration, Fresh không gửi JavaScript xuống trình duyệt trừ khi thực sự cần thiết, mang lại hiệu suất tải trang vượt trội.

Vì Sao Fresh Framework Đáng Chú Ý?

• Island-based client hydration: Chỉ những phần tương tác (islands) mới được hydrate bằng JavaScript, phần còn lại render tĩnh hoàn toàn.
• Zero runtime overhead: Mặc định không có JavaScript nào được gửi đến client. Trang web tải nhanh ngay cả trên thiết bị yếu.
• Không cần cấu hình: File-system routing à la Next.js, tích hợp TypeScript sẵn, không cần config phức tạp.
• Chạy trên Deno: Tận dụng runtime Deno an toàn, hỗ trợ TypeScript native và Deno Deploy cho triển khai edge.
• Preact: Fresh sử dụng Preact cho rendering, nhẹ hơn React gấp 3 lần nhưng giữ được API tương tự.

Bắt Đầu Với Fresh

Tạo dự án Fresh mới chỉ với vài lệnh:

# Cài đặt Deno CLI trước (deno.com)
deno run -Ar jsr:@fresh/init

# Di chuyển vào thư mục dự án
cd fresh-project

# Chạy development server
deno task dev
# Mở http://localhost:5173

Trang web mặc định hiển thị màn hình chào mừng Fresh với một counter widget chứng minh cách islands hoạt động – chỉ phần counter nhỏ đó có JavaScript, phần còn lại hoàn toàn tĩnh.

Kiến Trúc Islands Hoạt Động Như Thế Nào?

Islands architecture là mô hình mà trang web được chia thành các hòn đảo tương tác riêng biệt:

• Server-side rendering: Toàn bộ trang được render trên server, gửi HTML tĩnh đến client.
• Islands (đảo tương tác): Các component cần tương tác (form, dropdown, bộ đếm) được hydrate riêng lẻ bằng JavaScript nhỏ.
• Phần tĩnh: Mọi thứ khác không cần JavaScript, giảm tải đáng kể cho trình duyệt.

Kết quả: Tốc độ tải trang nhanh hơn, điểm Lighthouse cao hơn và trải nghiệm người dùng tốt hơn trên cả thiết bị di động và desktop.

Route Và Pages Trong Fresh

Routing trong Fresh dựa trên cấu trúc thư mục routes/:

fresh-project/
├── routes/
│   ├── index.tsx          # Trang chủ
│   ├── about.tsx          # Trang /about
│   └── blog/
│       ├── index.tsx      # /blog
│       └── [slug].tsx     # /blog/:slug dynamic
├── islands/
│   ├── Counter.tsx        # Island component tương tác
│   └── SearchBar.tsx      # Island component tìm kiếm
├── components/            # Reusable components tĩnh
│   └── Layout.tsx
├── deno.json
└── fresh.gen.ts           # Tự động sinh bởi Fresh

Mỗi island phải có từ islands/ directory. Khi component nằm trong components/, nó được render server-side hoàn toàn, không bao giờ gửi JavaScript xuống client.

Tạo Một Island Component Trong Fresh

Ví dụ island counter widget đơn giản:

// islands/Counter.tsx
import { useState } from "preact/hooks";

export default function Counter({ start = 0 }: { start?: number }) {
  const [count, setCount] = useState(start);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count - 1)}>-1</button>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

Sử dụng island trong page:

// routes/index.tsx
import Counter from "../islands/Counter.tsx";

export default function Home() {
  return (
    <div>
      <h1>Welcome to Fresh</h1>
      <Counter start={0} />
    </div>
  );
}

Chỉ Counter.tsx được hydrate và gửi JavaScript xuống client. Phần còn lại của trang hoàn toàn tĩnh.

Triển Khai Fresh Lên Deno Deploy

Fresh được thiết kế để triển khai liền mạch lên Deno Deploy, nền tảng serverless edge:

1. Đẩy mã nguồn lên GitHub.
2. Tạo project trên Deno Deploy console.
3. Chọn repository GitHub của bạn.
4. Dự án sẽ được deploy lên subdomain your-project.deno.net mà không cần cấu hình thêm.

Deno Deploy phân phối ứng dụng đến các edge location trên toàn cầu, đảm bảo độ trễ thấp cho người dùng ở mọi khu vực.

Fresh So Sánh Với Next.js, Astro, Remix

Fresh Framework Phù Hợp Với Ai?

• Content websites: Blog, tài liệu, trang giới thiệu – cần tốc độ tải tối ưu.
• Web apps với ít tương tác: Dashboard, trang quản trị với vài widget động.
• Developers yêu thích Deno: Muốn toàn bộ stack TypeScript, không cần Node.js.
• SEO-sensitive sites: SSR đầy đủ giúp Google, Bing crawl nội dung dễ dàng.
• Deno Deploy users: Sẵn sàng triển khai lên edge server ngay sau khi code.

Kết Luận

Fresh đại diện cho hướng đi mới trong phát triển web: tối giản, nhanh và tận dụng tối đa Deno. Kiến trúc islands giúp giảm JavaScript xuống mức tối thiểu mà vẫn giữ được tính tương tác cần thiết. Nếu bạn đang tìm kiếm một framework web hiện đại không rắc rối, Fresh là lựa chọn đáng thử nghiệm ngay hôm nay.

Tham khảo thêm: Fresh Documentation và Deno Deploy.