Tại sự kiện Vercel Ship 26 ở New York, Vercel và Shopify đã công bố một bước đi táo bạo: tái thiết Hydrogen từ đầu. Mặc dù Hydrogen trước đây đã giúp việc xây dựng các cửa hàng không đầu (headless storefronts) trở nên dễ dàng, nhưng nó lại thiếu đi tính linh hoạt (portability). Giờ đây, hai ông lớn công nghệ này đang đặt cược vào một kỷ nguyên web mở hơn, mang đến một phiên bản Hydrogen hoàn toàn mới. 🌐
Phiên bản Hydrogen được tái tạo này sẽ là mã nguồn mở và không phụ thuộc vào môi trường chạy (runtime agnostic), nghĩa là nó có thể hoạt động ở bất cứ đâu có JavaScript. Các nhà phát triển có thể tự do xây dựng bằng các framework phổ biến như Svelte, Nuxt, Next.js hoặc thậm chí sử dụng framework tùy chỉnh của riêng mình. Điều này hứa hẹn một trải nghiệm phát triển chưa từng có, loại bỏ sự ràng buộc và tối ưu hóa hiệu suất.
Ba Tầng Chiến Lược Mới của Hydrogen 💡
Chiến lược phát triển Hydrogen mới tập trung vào ba tầng chính: Lõi, Giao diện người dùng (Client) và Phía máy chủ (Server).
#### 1. Tầng Lõi (The Core)
Trước đây, các nhà phát triển thường phải tự viết và không chia sẻ mã JavaScript để tương tác với API của Shopify. Giờ đây, tất cả những mã quan trọng này sẽ được tập trung tại một nơi duy nhất.
Hãy lấy ví dụ về hàm formatMoney. Mặc dù web mở đã có Intl.NumberFormat, API của Shopify lại trả về một loại dữ liệu tùy chỉnh là MoneyV2 với số tiền được tuần tự hóa dưới dạng chuỗi. Với tầng Lõi mới, bạn không còn phải tự tay viết hay duy trì "mã kết nối" (glue code) rườm rà đó nữa. Khi API thay đổi, việc nâng cấp sẽ trở nên vô cùng đơn giản.
Việc tập trung hóa tầng lõi giúp chúng ta khắc phục lỗi chỉ một lần, đồng thời cung cấp các cải tiến cho mọi người, giúp các nhà phát triển tập trung vào việc tạo ra giá trị thực sự.
#### 2. Tầng Giao diện Người dùng (The Client)
Việc hiển thị dữ liệu mà tầng lõi trả về luôn đi kèm với những quyết định lặp đi lặp lại, điển hình như trạng thái giỏ hàng (cart state). Bất kỳ ai từng xây dựng ứng dụng thương mại điện tử đều phải viết một phiên bản mã cho phần này – mỗi lần một mã khác nhau, nhưng đều theo đuổi cùng một mục tiêu.
Với Hydrogen mới, tầng Giao diện người dùng sẽ đảm nhiệm việc xử lý giỏ hàng. Quản lý trạng thái giờ đây chỉ còn là một thao tác import đơn giản. 🛒
Việc tập trung hóa tầng này giúp bạn nhận được các phương pháp hay nhất hoàn toàn miễn phí, từ đó có thể dành thời gian cho những phần thực sự thuộc về sự sáng tạo của mình. Hiện tại, nó đã có sẵn cho React trên nhánh xem trước của Hydrogen, và sẽ sớm hỗ trợ thêm nhiều framework khác.
#### 3. Tầng Máy chủ (The Server)
Các nhà phát triển cần quyền truy cập toàn diện (full-stack access) để xây dựng các cửa hàng trực tuyến có thể mở rộng mà không ảnh hưởng đến hiệu suất. Nội dung tĩnh cần được phục vụ ngay lập tức từ CDN, trong khi dữ liệu động như thông tin tồn kho được truyền tải theo thời gian thực.
Cộng đồng mã nguồn mở đã giải quyết vấn đề này với các framework như Next.js, Nuxt và SvelteKit: khả năng toàn diện mà không bị khóa vào một môi trường chạy độc quyền. Chẳng hạn, cửa hàng của bạn có thể lưu vào bộ nhớ cache các truy vấn sản phẩm với khả năng xác thực lại theo yêu cầu (on-demand revalidation). Bạn viết truy vấn GraphQL, Hydrogen cung cấp cho bạn một client an toàn kiểu dữ liệu, Next.js xử lý việc lưu trữ cache, và bạn có được một framework full-stack cùng với Shopify API không đầu mà không cần bất kỳ mã kết nối nào. ✨
Shopify đã hỗ trợ các framework này thông qua kênh bán hàng Headless của mình, nhưng cho đến nay, mỗi chúng ta đều phải tự viết các ràng buộc riêng cho cùng một hợp đồng API. Ở tầng này, giải pháp là hướng dẫn, chứ không phải là thêm mã. Cả con người và các công cụ đều cần biết cách sử dụng những gì các framework này đã có, thay vì phải phát minh lại cho Shopify. Những hướng dẫn đó sẽ được cung cấp dưới dạng tài liệu, mẫu và kỹ năng.
Vercel.shop và Tương Lai 🔄
Trước Hydrogen, Vercel đã xây dựng vercel.shop, mẫu riêng của họ cho thương mại điện tử "agentic". Nó giúp việc sử dụng Next.js và Shopify không đầu trở nên dễ dàng hơn.
Giờ đây, Vercel sẽ tích hợp tất cả những gì đã học được từ việc xây dựng vercel.shop vào các tầng Client và Server của Hydrogen. Khi Hydrogen trở nên ổn định, vercel.shop sẽ áp dụng nó và trở thành tài liệu tham khảo để xây dựng các cửa hàng trực tuyến với Hydrogen và Next.js.
Hướng Tới Một Tương Lai Tốt Đẹp Hơn 🎯
Mục tiêu của Vercel rất đơn giản: xây dựng một web tốt hơn, cho tất cả mọi người. Với Hydrogen, điều đó có nghĩa là mang lại trải nghiệm nhà phát triển tốt nhất mà không bị khóa vào một môi trường chạy, framework hay nền tảng cụ thể nào.
Chúng tôi đang xây dựng điều này một cách công khai. Hãy theo dõi chúng tôi trên GitHub: hãy dùng thử, phân nhánh nó và giúp định hình những gì sẽ đến tiếp theo! 🤝