Svelte 5 + SvelteKit 2026: Framework Nhẹ Thách Thức React Cho Web Dev Việt

Tại sao dev Việt nên nhìn lại Svelte ngay lúc này?

Mình đã dùng React hơn 3 năm. Mọi dự án đều bắt đầu bằng npx create-react-app (hoặc Vite), rồi đến Redux, rồi React Query... cái stack cứ phình to dần. Một app dashboard nhỏ mà bundle size lên tới 400KB, khách hàng ở tỉnh mở chậm như 2G.

Svelte 5 + SvelteKit giải quyết đúng cái điểm đau đó. Không phải vì nó "trend", mà vì kiến trúc compiler-first của nó loại bỏ runtime overhead ngay từ đầu. Svelte biên dịch component thành JavaScript thuần, không có Virtual DOM, không có runtime library nặng vài chục KB chỉ để quản lý state.

Svelte compile thẳng ra JS - không cần runtime như React

Bài này mình sẽ đi thẳng vào: runes là gì, SvelteKit làm được gì, migrate từ React tốn bao nhiêu công, và benchmark thực tế so với Next.js. Nếu bạn đang build app cho người dùng Việt Nam - đặc biệt ở thị trường mobile 4G, đây là thứ đáng đọc kỹ.

Runes - cách Svelte 5 viết lại luật chơi reactivity

Nếu bạn từng học Vue 3 Composition API, runes sẽ quen ngay. Còn nếu chỉ biết React hooks, cũng không khó - chỉ cần bỏ qua một số "quirks" bạn đã quen.

Runes là hệ thống reactivity mới trong Svelte 5, dùng ký hiệu $ để đánh dấu state, derived value, và side effect:

<script>
  // Khai báo state reactive
  let count = $state(0);

  // Derived value - tự cập nhật khi count thay đổi
  let doubled = $derived(count * 2);

  // Side effect - chạy khi dependency thay đổi
  $effect(() => {
    console.log(`Count hiện tại: ${count}`);
  });
</script>

<button onclick={() => count++}>
  Đếm: {count} (x2 = {doubled})
</button>

So sánh với React tương đương:

import { useState, useMemo, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  // useMemo để tính derived value
  const doubled = useMemo(() => count * 2, [count]);

  useEffect(() => {
    console.log(`Count hiện tại: ${count}`);
  }, [count]);

  return (
    <button onClick={() => setCount(c => c + 1)}>
      Đếm: {count} (x2 = {doubled})
    </button>
  );
}

Svelte runes: ít boilerplate hơn, dependency tracking tự động

Sự khác biệt lớn nhất: $derived và $effect tự track dependency - bạn không cần khai báo [count] thủ công như useEffect. Svelte biết chính xác cái gì phụ thuộc vào cái gì ở compile time. Điều đó loại bỏ cả class bug phổ biến nhất trong React: quên dependency array.

Một điểm mạnh khác: runes hoạt động ở bất kỳ file .svelte.js nào, không chỉ trong component. Bạn có thể tạo store logic tái dụng giống như custom hook trong React, nhưng đơn giản hơn nhiều.

Islands architecture và SvelteKit - ai phù hợp với ai?

Đây là chỗ mình thấy nhiều người nhầm nhất. Islands architecture là pattern thiết kế trang web với phần lớn là static HTML, chỉ những component cần interactive mới được hydrate JavaScript - gọi là "đảo" (island) tương tác.

SvelteKit không native hỗ trợ islands architecture như Astro. Nhưng SvelteKit có thứ tương đương: bạn có thể mix SSR, SSG, và client-side rendering theo từng route.

// src/routes/blog/+page.js
// Route này pre-render hoàn toàn (static)
export const prerender = true;

// src/routes/dashboard/+page.js  
// Route này render server-side mỗi request
export const ssr = true;
export const prerender = false;

Với approach này, trang blog của bạn có thể hoàn toàn static (0KB JS ship đến user), trong khi dashboard vẫn SSR đầy đủ. Đây là điểm Next.js và SvelteKit đều làm được, nhưng SvelteKit có cú pháp rõ ràng và ít "magic" hơn.

Mỗi route chọn rendering mode riêng - không bị lock vào một kiến trúc

Về performance so sánh giữa approach truyền thống (SPA full JS) và islands/static:

Con số này không phải benchmark của riêng Svelte - đây là kết quả chung khi chuyển từ client-heavy rendering sang static/islands approach. Với SvelteKit, bạn đạt được kết quả tương tự mà không cần rời khỏi một framework.

Nếu dự án của bạn là content-heavy (blog, landing page, trang sản phẩm) thì SvelteKit SSG là lựa chọn rất thực tế. Còn nếu cần islands architecture thực thụ với partial hydration chi tiết hơn, Astro + Svelte component là combo đáng cân nhắc.

Migrate từ React sang Svelte - thực tế tốn gì?

Câu hỏi mình hay gặp nhất: "Migrate có khó không?" Thật ra câu hỏi đúng hơn là: "Migrate từng phần được không?" - và câu trả lời là có.

Bạn không cần rewrite toàn bộ app. SvelteKit cho phép embed Svelte component vào app React hiện tại qua Web Components, hoặc bắt đầu migrate từng page mới sang SvelteKit trong khi giữ nguyên React app.

Bảng đối chiếu concept:

Phần tốn thời gian nhất không phải là học Svelte - mà là đánh giá lại thư viện. Nếu bạn đang dùng react-table, react-hook-form, hay Radix UI, bạn cần tìm alternative hoặc tự wrap. Svelte ecosystem nhỏ hơn React đáng kể.

Migrate dần từng route - không cần Big Bang rewrite

Thực tế mình thấy: team 2-3 người, migrate một app CRUD đơn giản (5-7 pages) mất khoảng 2-3 tuần nếu quen Svelte từ trước, hoặc 4-6 tuần nếu học song song. App phức tạp có nhiều third-party integration thì nhân đôi con số đó lên.

Nếu bạn chưa vững JavaScript thuần, học Svelte sẽ khó hơn vì Svelte ít "magic" hơn React - bạn phải hiểu rõ hơn thứ mình đang làm. Khóa Lập Trình JavaScript Nâng Cao cover closure, reference types và cách JS hoạt động - đây là nền tảng cần thiết trước khi đào sâu bất kỳ framework nào, kể cả Svelte.

Tải bảng đối chiếu đầy đủ tại đây: Bảng đối chiếu React → Svelte

Build PWA với SvelteKit - nhanh hơn bạn nghĩ

PWA (Progressive Web App) là thứ rất thực tế cho thị trường Việt Nam: người dùng không muốn tải app native, nhưng vẫn cần offline support, push notification, và "Add to Home Screen".

SvelteKit tích hợp PWA qua plugin @vite-plugin-pwa. Setup cơ bản:

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
import { VitePWA } from 'vite-plugin-pwa';

export default {
  plugins: [
    sveltekit(),
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'App của tôi',
        short_name: 'App',
        theme_color: '#FF3E00',
        icons: [
          { src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
          { src: '/icon-512.png', sizes: '512x512', type: 'image/png' }
        ]
      },
      workbox: {
        // Cache tất cả route static
        globPatterns: ['**/*.{js,css,html,ico,png,svg}']
      }
    })
  ]
};

PWA SvelteKit: service worker tự generate, offline sẵn sàng

So với Next.js + next-pwa, config này ngắn hơn và ít breaking change hơn. next-pwa có lịch sử maintenance không đều, còn vite-plugin-pwa được update thường xuyên hơn và work tốt với SvelteKit.

Thêm offline indicator để UX tốt hơn:

<!-- src/lib/OfflineIndicator.svelte -->
<script>
  // Track trạng thái mạng
  let isOnline = $state(true);

  $effect(() => {
    // Lắng nghe sự kiện network
    const handleOnline = () => isOnline = true;
    const handleOffline = () => isOnline = false;
    
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);
    
    // Cleanup khi component unmount
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  });
</script>

{#if !isOnline}
  <div class="offline-banner">
    Đang offline - dữ liệu có thể chưa cập nhật
  </div>
{/if}

Chú ý một điểm: PWA hoạt động tốt nhất khi app của bạn có phần lớn là static content. Nếu app cần real-time data liên tục (như chat, live trading), PWA offline cache sẽ ít giá trị hơn.

Benchmark thực tế: SvelteKit vs Next.js

Số liệu benchmark framework luôn phụ thuộc vào use case. Mình không có con số từ một lab độc lập 100% khách quan, nhưng có thể nói rõ về nguyên lý kiến trúc tại sao Svelte thường thắng về bundle size và cold start.

Lý do Svelte nhỏ hơn: React ship runtime ~45KB (gzip) cho mọi app. Svelte compile component thành vanilla JS - không có runtime. Một app CRUD nhỏ với Svelte có thể chỉ 15-30KB JS tổng, trong khi React tương đương ít nhất 60-80KB.

Lý do cold start Next.js chậm hơn trên serverless: Next.js có nhiều code path phức tạp hơn để xử lý App Router, Middleware, Edge Runtime. SvelteKit đơn giản hơn - adapter deploy lên Cloudflare Workers hay Vercel Edge functions khởi động nhanh hơn.

Bundle size là lợi thế rõ nhất của Svelte - đặc biệt ở mạng chậm

Dưới đây là ước tính so sánh cho một app thực tế (landing page + 5 routes CRUD):

Con số này không phải từ một benchmark tool chuẩn hóa - đây là ước tính dựa trên kiến trúc. Kết quả thực tế của bạn sẽ phụ thuộc vào lượng third-party script, ảnh, và cách viết code.

Điểm Next.js thắng rõ: ecosystem. Nếu dự án cần auth phức tạp (NextAuth), CMS integration (Contentlayer, Sanity), hay team đã quen React, Next.js vẫn là lựa chọn an toàn hơn. SvelteKit không phải silver bullet - nó trade ecosystem lấy performance và DX đơn giản hơn.

Tải bảng so sánh đầy đủ: Bảng so sánh SvelteKit vs Next.js

Svelte có phù hợp với dự án Việt Nam không?

Thẳng thắn: phụ thuộc vào bài toán cụ thể.

Svelte/SvelteKit phù hợp khi:

• App cần load nhanh trên mạng 4G yếu (landing page, trang sản phẩm, portal công thông tin)
• Team nhỏ, muốn ít boilerplate, ít abstraction
• Không phụ thuộc nhiều vào thư viện React ecosystem
• Dự án mới, không có technical debt

Không nên chọn Svelte khi:

• Team đã quen React, deadline gấp
• Cần tuyển dụng nhanh (Svelte developer ít hơn React developer đáng kể ở VN)
• Dự án dùng nhiều React-only library (Radix, shadcn/ui, React Native)
• Khách hàng/investor yêu cầu stack "phổ biến" để dễ handover

Chọn framework theo bài toán, không theo trend

Mình thấy pattern hay ở các team Việt: dùng SvelteKit cho marketing site/landing page (nơi performance quan trọng nhất) và Next.js/React cho dashboard/app phức tạp (nơi ecosystem quan trọng hơn). Không phải "all-in" vào một stack.

Nếu bạn đang muốn thử Svelte, cách thực tế nhất là rewrite một micro-project nhỏ: trang blog, landing page, hay internal tool. Không cần migrate toàn bộ hệ thống ngay.

Bước đầu tiên:

1. Đọc SvelteKit Official Tutorial - tài liệu official SvelteKit, có interactive tutorial
2. Build thử trang landing page đơn giản
3. Chạy Lighthouse so sánh với bản React hiện tại của bạn

Nếu nền tảng JavaScript của bạn chưa chắc, khóa JavaScript Pro là điểm khởi đầu tốt - hiểu rõ JS trước khi học framework sẽ giúp bạn học Svelte (và bất kỳ framework nào) nhanh hơn rất nhiều. Còn nếu bạn đã vững React và muốn biết Next.js hoạt động như thế nào trước khi so sánh với SvelteKit, khóa Frontend NextJS sẽ cho bạn cái nhìn đầy đủ từ cả hai phía.

Comment cho mình biết bạn đang build gì và đang cân nhắc stack nào - mình đọc hết.