SvelteKit 3 tạo áp lực lớn lên Next.js với cách tiếp cận đột phá cho RPC

SvelteKit 3 tạo áp lực lớn lên Next.js với cách tiếp cận đột phá cho RPC

Trong hệ sinh thái JavaScript ngày càng phức tạp, Svelte được thiết kế như một lựa chọn đơn giản hơn so với framework front-end React.js, và SvelteKit tiếp nối triết lý đó khi hướng tới việc trở thành một framework back-end tương tự Next.js nhưng ít phiền toái hơn và hỗ trợ nội dung động tốt hơn.

Bản phát hành thử nghiệm (release candidate) của SvelteKit 3.0 mới đây đã giới thiệu một tính năng thử nghiệm có tên là remote functions (hàm từ xa), thay đổi hoàn toàn cách dữ liệu được truyền tới trình duyệt. Đội ngũ phát triển dự án hào hứng tuyên bố trên trang công bố: “Remote functions khiến mọi thứ khác trở nên lỗi thời, bao gồm cả load functions và actions của chính SvelteKit.”

Nguồn gốc của Svelte

Nhà báo người Anh Rich Harris, khi còn là biên tập viên đồ họa tại New York Times, đã phát hành Svelte 1.0 vào năm 2016 như một trình tạo component JavaScript không mang nặng boilerplate như React.js. Ông cần một cách đơn giản hơn để xây dựng các thành phần đồ họa cho các bài viết trực tuyến của NYT.

Khác với React, Svelte biên dịch mã trước thời gian chạy và gửi đến người dùng mà không kèm theo framework cồng kềnh. Việc Svelte xây dựng component từ các thẻ HTML chuẩn cũng giúp giảm tải nhận thức cho nhà phát triển. SvelteKit ra đời từ Svelte để đảm nhận các tác vụ back-end như routing, rendering và tối ưu hóa trang theo cách phù hợp với sự đơn giản vốn có của Svelte.

SvelteKit đã bám sát Next.js một thời gian dài. Một điểm chuẩn gần đây cho thấy hàm Server Side Rendering (SSR) của SvelteKit trả về payload HTML nhỏ hơn ba lần so với Next.js cho cùng một trang sản phẩm — tin tuyệt vời cho các cửa hàng web quan tâm đến hiệu suất.

Truy xuất dữ liệu an toàn về kiểu, không cần làm mới trang

Remote functions cung cấp cách để từng component trên một trang web tự cập nhật dữ liệu từ máy chủ mà không phải làm mới toàn bộ trang. Đây từng là hạn chế lớn khiến lập trình viên phải nghĩ ra đủ mọi cách xoay xở, nhưng các giải pháp đó thường mang tính chắp vá và mất an toàn về kiểu dữ liệu (type safety) trong quá trình xử lý.

“Đây là cách chúng tôi thực hiện RPC,” — Simon Holthausen, nhà phát triển cốt lõi Svelte tại Vercel, giải thích trong podcast Svelte Society.

Về phía máy chủ, SvelteKit đảm nhận các công việc RPC điển hình: xác thực yêu cầu dữ liệu đến, truy vấn cơ sở dữ liệu hoặc nguồn dữ liệu khác và định tuyến dữ liệu tuần tự hóa trở lại component yêu cầu. Remote function — được viết bằng JavaScript hoặc TypeScript và biên dịch trước thành một trình bao bọc RPC nhẹ phía client — thực hiện lệnh gọi fetch đến máy chủ từ chính component đó. Không cần routing đặc biệt hay boilerplate bổ sung.

Phát biểu trên kênh videocast Syntax với tiêu đề đầy hào hứng “SvelteKit đã giải quyết xong vấn đề nạp dữ liệu”, nhà phát triển Scott Tolinski nhấn mạnh: “Bạn không cần phải lo lắng về việc mã này đang chạy ở đâu.”

Ví dụ thực tế: Component footer động

Các host của videocast đưa ra một ví dụ: toàn bộ nội dung của trang web là tĩnh, nhưng footer ở cuối mỗi trang lại cần dữ liệu được cập nhật liên tục. Với remote functions, component footer tự tìm nạp và làm mới dữ liệu máy chủ của riêng nó ngay lập tức. Theo cách truyền thống, việc này đòi hỏi đánh dấu toàn bộ trang là động (tốn kém về tính toán, tải chậm) hoặc yêu cầu lập trình viên viết một route loader từ trên xuống (tốn công sức hơn).

“Ngay trong một component Svelte thông thường, bạn có thể import trực tiếp câu truy vấn hoặc mutation đó như một hàm, rồi gọi hàm đó ngay trong mã của bạn,” — Tolinski giải thích.

So sánh với Next.js và góc nhìn tương lai

Công bằng mà nói, đội ngũ bảo trì Next.js cũng đã giải quyết một phần vấn đề này bằng Server Functions (trước đây gọi là Server Actions), cho phép component phía client gọi trực tiếp các mutation ở phía máy chủ. Tuy nhiên, không giống với remote functions của SvelteKit, Server Functions của Next.js được thiết kế chủ yếu để ghi dữ liệu chứ không phải để tìm nạp hoặc truy vấn dữ liệu.

Rich Harris hiện làm việc tại Vercel — công ty tài trợ cho Svelte nhưng đồng thời cũng sở hữu Next.js. Dù vậy, Vercel vẫn ủng hộ cả hai hướng tiếp cận, mỗi hướng phản ánh “sự hội tụ rộng lớn hơn về các hàm phía máy chủ có kiểu dữ liệu rõ ràng và có thể gọi từ phía client”, theo lời người phát ngôn của Vercel.

Đối với Tolinski, điểm cộng lớn nhất của remote functions chính là sự liền mạch khi tích hợp vào toàn bộ hệ sinh thái Svelte. Anh khẳng định: “Tôi không nói rằng không có hệ thống RPC nào khác làm tốt đến mức này, nhưng nếu muốn tôi sử dụng thì nó phải tốt đến mức đó.”