Svelte 5 + SvelteKit: Framework nhẹ hơn React mà dev Việt nên thử năm 2026

Svelte 5 là gì và tại sao nó đang gây chú ý?

Mình từng nghĩ React là thứ duy nhất đáng học cho frontend. Rồi thử Svelte 5 một buổi tối - và mình bắt đầu đặt câu hỏi nghiêm túc hơn.

Svelte không phải framework mới toanh. Nhưng Svelte 5, ra mắt ổn định với hệ thống runes ($state, $derived, $effect), đã thay đổi đáng kể cách bạn viết code reactive. Thay vì import writable từ store hay dùng useState hook, bạn chỉ cần:

// Svelte 5 - khai báo state với rune
let count = $state(0);
let doubled = $derived(count * 2);

Gọn. Không boilerplate. Compiler xử lý phần còn lại.

Svelte compile thành JS thuần - không runtime nặng như React

Điểm khác biệt lớn nhất: Svelte không dùng Virtual DOM. Thay vì tạo một cây DOM ảo rồi diff với DOM thật (cách React hoạt động), Svelte compiler phân tích code lúc build và tạo ra JavaScript cập nhật DOM trực tiếp. Kết quả? Bundle nhỏ hơn, runtime ít hơn, trang tải nhanh hơn - điều quan trọng với người dùng Việt Nam trên mạng di động.

Hiện tại, phiên bản ổn định là Svelte 5.x và SvelteKit 2.x (đang chuẩn bị cho SvelteKit 3). Không có "Svelte 6" nào được phát hành tính đến giữa 2026 - nếu bạn đọc bài nào nói Svelte 6 có tính năng X, hãy kiểm tra lại nguồn.

Runes - cơ chế state management mới thay đổi cách viết code

Nếu bạn đã quen React hooks, runes của Svelte 5 sẽ vừa quen vừa lạ - theo hướng tốt hơn.

Vấn đề với hooks là chúng chỉ hoạt động trong component. Muốn share state, bạn phải dùng Context, Redux, Zustand, hay bất kỳ thư viện state management nào. Với Svelte 5, runes hoạt động ở bất kỳ file .svelte.ts nào:

// store.svelte.ts - share state giữa nhiều component
export const cartCount = $state(0);
export const cartTotal = $derived(cartCount * 50000);

// Component A
import { cartCount } from './store.svelte.ts';
cartCount++; // cập nhật trực tiếp, reactive

// Component B tự động re-render khi cartCount thay đổi

Runes hoạt động ngoài component - không cần thư viện state ngoài

Ba runes chính bạn cần biết:

• $state: khai báo reactive variable, tương đương useState nhưng không cần setter riêng
• $derived: tính giá trị từ state khác, tự cập nhật khi dependency thay đổi (như useMemo)
• $effect: chạy side effect khi state thay đổi (như useEffect)

Sự khác biệt thực tế? Với React, một feature giỏ hàng đơn giản có thể cần useState + useReducer + Context + custom hook. Với Svelte 5, một file .svelte.ts với vài $state là đủ. Code ngắn hơn không phải lúc nào cũng là tốt - nhưng trong trường hợp này, ít abstraction hơn đồng nghĩa với ít bug hơn và dễ debug hơn.

SvelteKit 2.x - full-stack framework so sánh với Next.js

Svelte một mình không đủ để build ứng dụng thực tế. SvelteKit là phần bổ sung đó - và nó cạnh tranh trực tiếp với Next.js.

Kiến trúc cơ bản giống nhau: file-based routing, SSR sẵn có, API routes. Nhưng có vài điểm SvelteKit làm tốt hơn theo mình.

Remote functions là tính năng mình thích nhất. Bạn gọi hàm server từ component client như gọi hàm local:

// +page.server.ts
export async function getProducts() {
  const data = await db.query('SELECT * FROM products');
  return data; // tự động serialize, không cần tạo API endpoint
}

// +page.svelte
import { getProducts } from './+page.server.ts';
const products = await getProducts(); // SvelteKit xử lý phần còn lại

SvelteKit giúp gọi hàm server như hàm local - không cần viết API thủ công

Adapters là điểm mạnh khác. Deploy lên Vercel, Netlify, Cloudflare Workers, hay bare Node chỉ cần đổi adapter trong config - không cần sửa code app. adapter-vercel hiện đã hỗ trợ Node 24.

So sánh nhanh với Next.js:

Trade-off thật sự: ecosystem Svelte còn nhỏ hơn React nhiều. Nếu bạn cần thư viện UI đặc thù, chart library, hay integration phức tạp, React có nhiều lựa chọn hơn. Svelte phù hợp nhất khi bạn build từ đầu và muốn kiểm soát trực tiếp.

SvelteKit 3 đang đến - những thay đổi cần biết

SvelteKit 3 chưa ra mắt chính thức, nhưng cập nhật tháng 7/2026 đã giới thiệu các preview để dọn đường.

Thay đổi lớn nhất: gộp config vào vite.config.js. Thay vì maintain cả svelte.config.js lẫn vite.config.js, bạn sẽ chỉ cần một file:

// vite.config.js (SvelteKit 3 style)
import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';

export default defineConfig({
  plugins: [
    sveltekit({
      // Cấu hình SvelteKit trực tiếp ở đây
      adapter: adapterVercel(),
      routes: customRouteConfig
    })
  ]
});

Một file config thay hai - giảm độ phức tạp khi setup project mới

Thay đổi thứ hai: explicit environment variables. Thay vì import từ $env/static/private hay $env/dynamic/public, bạn khai báo tất cả biến môi trường ở một chỗ. Mục tiêu là giảm lỗi "biến này accessible ở đâu" - vấn đề mình đã gặp không ít lần khi build.

Còn có cải thiện cho {const ...} tag trong template và type-check TypeScript tốt hơn với Language Tools. Nhỏ nhưng hữu ích nếu bạn dùng TypeScript nghiêm túc.

Nếu bạn đang bắt đầu project mới với SvelteKit, mình khuyên viết code theo kiểu Svelte 5 + Kit 2.x hiện tại - migration lên Kit 3 sẽ không quá đau đầu vì các thay đổi chủ yếu là config, không phải API cốt lõi. Tài liệu chính thức tại tài liệu SvelteKit chính thức là nguồn đáng tin nhất để theo dõi tiến trình.

Svelte có phù hợp với dev Việt không?

Câu trả lời phụ thuộc vào bạn đang build cái gì.

Svelte 5 + SvelteKit phù hợp nhất khi:

• Build dashboard, SaaS, hay e-commerce cần hiệu năng tốt trên mobile (bundle nhỏ = tải nhanh trên 4G Việt Nam)
• Team nhỏ (1-3 người), muốn move fast mà không bị boilerplate kéo chậm
• Bạn đã biết JavaScript cơ bản và muốn học framework thứ hai sau React

Svelte phù hợp nhất cho team nhỏ cần tốc độ, không phải dự án enterprise phức tạp

Không phù hợp khi:

• Dự án cần nhiều thư viện UI (Material UI, Ant Design chưa có bản Svelte tốt)
• Team đã quen React và deadline gấp - switching cost không đáng
• Cần tuyển dev dễ (pool React developer ở Việt Nam lớn hơn nhiều)

Thật ra Svelte: 88% satisfaction and 88% retention ratio vs React: lower satisfaction and retention (State of JS 2024) (State of JS 2024) trong khảo sát State of JS 2024 cho thấy Svelte có tỉ lệ satisfaction cao hơn React. Nhưng satisfaction cao không có nghĩa là phù hợp cho mọi dự án.

Nếu bạn muốn thử, điểm bắt đầu tốt nhất là biết vững JavaScript trước - mình nghĩ mọi framework đều dạy bạn tư duy, nhưng JS mới là nền tảng. Khóa Lập Trình JavaScript Nâng Cao của F8 cover closure, prototype, và các concept mà Svelte compiler dựa vào, nên nếu bạn chưa chắc JS, học đó trước rồi thử Svelte sẽ dễ hơn nhiều.

Bước thực tế để thử ngay:

1. Chạy npx sv create my-app để tạo project SvelteKit mới
2. Thử viết lại một component React đơn giản bằng Svelte 5 (form, counter, fetched list)
3. So sánh bundle size với npm run build - con số thường khá thuyết phục

Drop comment nếu bạn đã thử Svelte và muốn chia sẻ experience.