Posted inDevelopment

Triển khai SvelteKit lên Cloudflare Pages: Full-stack Web ‘siêu tốc’ với chi phí $0

Development tutorial - IT technology blog
Development tutorial - IT technology blog

Vì sao mình chọn SvelteKit và Cloudflare Pages thay vì Next.js?

Sau nửa năm thực chiến với các dự án từ landing page đến dashboard, mình nhận ra Next.js đôi khi quá cồng kềnh cho những nhu cầu tinh gọn. SvelteKit thực sự là một lựa chọn thay thế đáng giá. Thay vì dùng Virtual DOM, Svelte biên dịch code ngay khi build, giúp bundle size giảm đáng kể. Một ứng dụng SvelteKit cơ bản chỉ nặng khoảng 15-20KB, trong khi với React/Next.js con số này thường trên 70KB.

Khi kết hợp với Cloudflare Pages, bạn sẽ sở hữu một ứng dụng full-stack chạy trên hạ tầng Edge Computing toàn cầu. Hệ thống này hỗ trợ SSR mượt mà nhưng gần như không tốn phí cho các dự án vừa và nhỏ. Trải nghiệm thực tế cho thấy tốc độ phản hồi (TTFB) của SvelteKit trên Cloudflare thường nhanh hơn 30-40% so với hosting truyền thống.

Hai khái niệm then chốt bạn cần biết

1. SvelteKit Adapter

SvelteKit dùng cơ chế “Adapter” để thích ứng với từng môi trường server. Để chạy trên Cloudflare Pages, chúng ta cần @sveltejs/adapter-cloudflare. Công cụ này sẽ biến code của bạn thành các Cloudflare Workers, vận hành tại các node mạng gần người dùng nhất.

2. SSR tại Edge (Edge Functions)

Thông thường, SSR cần server Node.js chạy 24/7. Với Cloudflare, logic backend (như truy vấn API, load dữ liệu) chạy trực tiếp trên hạ tầng Edge. Điều này triệt tiêu độ trễ vật lý do khoảng cách giữa server và người dùng.

Các bước triển khai thực tế

Bước 1: Khởi tạo dự án

Mở terminal và tạo project mới. Mình ưu tiên chọn Skeleton project để cấu trúc code gọn gàng, dễ kiểm soát từ đầu.

npm create svelte@latest my-awesome-app
cd my-awesome-app
npm install

Đừng quên chọn TypeScript để code sạch và tránh lỗi vặt. Kiểm tra thành quả ở local bằng lệnh:

npm run dev -- --open

Bước 2: Cài đặt Adapter Cloudflare

Mặc định SvelteKit dùng adapter-auto, nhưng để tối ưu nhất, hãy chuyển sang bản chuyên biệt cho Cloudflare:

npm i -D @sveltejs/adapter-cloudflare

Tiếp theo, hãy cập nhật file svelte.config.js như sau:

import adapter from '@sveltejs/adapter-cloudflare';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: vitePreprocess(),
	kit: {
		adapter: adapter()
	}
};

export default config;

Bước 3: Tạo API Endpoint đầu tiên

SvelteKit cho phép viết frontend và backend song song. Thử tạo file src/routes/api/hello/+server.ts để kiểm tra tính năng SSR:

import { json } from '@sveltejs/kit';

export const GET = async () => {
    return json({
        message: "Chào mừng bạn đến với SvelteKit trên Cloudflare!",
        timestamp: new Date().toISOString()
    });
};

Nếu cần kiểm tra các cấu trúc JSON phức tạp, bạn có thể dùng toolcraft.app để format nhanh. Công cụ này khá tiện vì không cần cài thêm extension trình duyệt.

Bước 4: Đưa lên Cloudflare Pages

Quy trình đẩy code rất đơn giản thông qua GitHub. Bạn chỉ cần thực hiện 5 bước:

  1. Push code lên repository GitHub cá nhân.
  2. Tại Dashboard Cloudflare, vào Workers & Pages > Create application > Pages.
  3. Kết nối với tài khoản GitHub và chọn đúng repo.
  4. Phần Build settings, chọn Framework preset là SvelteKit. Các thông số còn lại Cloudflare sẽ tự điền chuẩn xác.
  5. Nhấn Save and Deploy.

Chỉ sau khoảng 60-90 giây, ứng dụng của bạn sẽ online với tên miền .pages.dev miễn phí.

Vài lưu ý “xương máu” để tránh bug

Dù ngon bổ rẻ, Cloudflare Pages vẫn có những giới hạn đặc thù mà bạn cần lưu ý:

  • Hạn chế Node.js APIs: Môi trường V8 isolate của Cloudflare không hỗ trợ fs hay path. Hãy ưu tiên các thư viện chuẩn Web (Web Standards).
  • Quản lý biến môi trường: Đừng chỉ để API Key trong file .env local. Bạn phải khai báo chúng trong Dashboard Cloudflare (Settings > Functions > Environment variables).
  • Giới hạn gói miễn phí: Script của mỗi worker không được quá 1MB sau khi nén. Với app SvelteKit thông thường, giới hạn này rất dư dả, trừ khi bạn nhúng quá nhiều thư viện nặng ở backend.

Lời kết

SvelteKit và Cloudflare Pages là bộ đôi hoàn hảo cho những ai thích sự nhanh, gọn và hiệu quả. Việc chuyển đổi từ các framework nặng nề sang SvelteKit có thể hơi lạ lẫm lúc đầu. Tuy nhiên, khi thấy điểm Performance trên Lighthouse đạt 100 tuyệt đối, bạn sẽ thấy mọi nỗ lực đều xứng đáng. Hãy thử deploy dự án tiếp theo của bạn ngay hôm nay!

Share:
Tags: