Xây dựng website siêu nhanh với Remix, Cloudflare và Upstash Redis

Khi phát triển website hoặc web app, không ai muốn dành hàng giờ chỉ cho tối ưu tốc độ. Vấn đề là website nhanh cực kỳ quan trọng và hiệu suất thường là yếu tố quyết định thành công. Web framework như Remix Run được tạo với mục tiêu tối ưu hiệu suất web trong khi giữ cấu hình tối thiểu ("zero-config"). Ngày nay, có hàng chục framework giúp bạn đạt tốc độ cao.

Thật không may, thời gian tải website tốt nhất ít ích cho chúng ta trừ khi cơ sở dữ liệu ứng dụng cũng nhanh như chớp.

Hôm nay, chúng ta sẽ xem cách đạt tốc độ tải website tuyệt vời và kết hợp với hiệu suất cơ sở dữ liệu đỉnh cao của Upstash Redis Global Databases.

Tại sao cần Global Databases?

Hầu hết mọi người dùng Content Delivery Network (CDN) khi triển khai website trực tuyến. CDN là mạng lưới máy chủ toàn cầu. Vì file website có thể được cache và phục vụ từ vị trí địa lý gần client nhất, CDN mang lại độ trễ thấp đáng kể so với hệ thống máy chủ đơn lẻ. Điều này đảm bảo website tải nhanh khắp thế giới. Khi nói về Global Databases của Upstash, cùng khái niệm CDN áp dụng cho Cơ sở dữ liệu Redis. Với global databases, các replica cơ sở dữ liệu được phân phối trên nhiều khu vực khắp thế giới. Bây giờ, client được định tuyến đến khu vực gần nhất và trải nghiệm độ trễ lên tới < 10ms.

Bắt đầu

Bây giờ tôi đã hứa nhiều, hãy xem toàn bộ hoạt động như thế nào trong thực tế.

Chúng ta sẽ xây dựng gì

Chúng ta sẽ xây dựng web app với Remix Run dùng Upstash Redis Global Databases và triển khai trên Cloudflare Workers.

Cloudflare Workers có lợi thế triển khai toàn cầu, tương tự CDN. Nghĩa là server-side rendering của Remix app xảy ra gần client nhất có thể, dẫn đến độ trễ tối thiểu. Kết hợp với Global Databases của Upstash, đây là thiết lập lý tưởng về mặt hiệu suất.

Thiết lập Remix

Đi đến thư mục bạn chọn và chạy

npx create-remix@latest

Bạn sẽ được chào đón bằng dialog hướng dẫn thiết lập app Remix Run.

Đảm bảo chọn Cloudflare Workers làm deployment target. Trong hướng dẫn này tôi sẽ tiến hành với app JavaScript nhưng bạn tự do chọn TypeScript. Thiết lập nên trông tương tự:

R E M I X - v1.2.3 💿 Welcome to Remix! Let's get you set up with a new project.
? Where would you like to create your app? upstash-remix
? Where do you want to deploy? Choose Remix if you're unsure, it's easy to change deployment targets. Cloudflare Workers
? TypeScript or JavaScript? JavaScript
? Do you want me to run `npm install`? Yes

Sau khi cài đặt xong, mở thư mục mới tạo trong code editor.

Tạo Upstash Redis Global Database

Đối với Upstash Redis Global Database, vào https://upstash.com/ và đăng nhập hoặc tạo tài khoản. Trong console, nhấp "Create Database", nhập tên và chọn "Global" làm loại database. Cuối cùng nhấp "Create" và đợi database tạo xong. Bây giờ sao chép UPSTASH_REDIS_REST_TOKEN và UPSTASH_REDIS_REST_URL.

Trong dự án, tạo file .env ở root dự án và thêm cả hai biến như này:

UPSTASH_REDIS_REST_TOKEN=
UPSTASH_REDIS_REST_URL=

Để tương tác với database, cài gói npm @upstash/redis với npm install @upstash/redis.

Viết ứng dụng Remix Run

Bây giờ database đã thiết lập, mở file app/routes/index.jsx, xóa boilerplate và nhập mã sau:

// app/routes/index.jsx
import { json, redirect, useLoaderData } from "remix";
import redis from "../utils/redis.server";
export const loader = async () => {
    const start = new Date();
    const count = await redis.get("counter");
    return json({ count, loadingTime: new Date() - start });
};
export const action = async () => {
    await redis.incr("counter");
    return redirect("/");
};
export default function Index() {
    const { count, loadingTime } = useLoaderData();
    return (
        
            Record speeds with Remix on Cloudflare and Upstash Redis
            The button below was clicked {count} times already.
            
                
            
             It took {loadingTime} ms to read the number of button clicks from{" "} Upstash Redis{" "}  Global Database  . 
        
    );
}

Ngoài ra, tạo file app/utils/redis.server.js với

// app/utils/redis.server.js
import { Redis } from "@upstash/redis/cloudflare";
export default Redis.fromEnv();

Điều này làm hai việc. Hãy xem cả hai.

1. Server-side rendering dữ liệu với `useLoaderData`

Trong return statement ở cuối, chúng ta có giao diện người dùng đơn giản hiển thị

một biến counter tên count và
một biến tên loadingTime.

Nếu nhìn xa hơn một chút, chúng ta thấy hai biến đó đến từ hook useLoaderData(). Hook đặc thù Remix Run này dùng cùng với hàm loader ở đầu. Ở đó, chúng ta đọc key counter từ database, đo thời gian mất và trả cả hai cho hàm useLoaderData(). Hàm loader sẽ chạy mỗi lần load app Remix Run, nên mỗi khi ai đó request website, nó sẽ đọc giá trị counter hiện tại, server-side render website và gửi lại client.

2. Tăng biến counter khi ai đó nhấp nút "Click me!".

Remix Run cho phép xây dựng form rất dễ. Trong JSX, bạn tìm thấy tag <form/> submit request POST đến /?index khi ai đó nhấp nút submit. Điều tuyệt vời với Remix Run là chúng ta chỉ cần thêm hàm action vào file và sẽ có tương tác frontend-backend sẵn sàng mà không cần tạo API tường minh. Trong hàm action, chúng ta chỉ tăng counter và báo client reload website để phản ánh thay đổi.

🥳 Bạn đã sẵn sàng

Chạy cục bộ

Bây giờ, bạn có thể muốn xem những gì bạn vừa tạo. Để làm vậy, chạy npm run dev và xem app trong trình duyệt.

Nhấp nút "Click me!" và xem count tăng
Nhìn thời gian load đo được. Ở Đức, tôi thường thấy độ trễ < 20ms nhưng hãy chuẩn bị cắt giảm một nửa khi triển khai lên Cloudflare.

Triển khai lên Cloudflare

Hãy tiến tới tốc độ tối đa với Cloudflare và đạt độ trễ đơn vị miligiây!

Trước hết, nếu chưa, cài Cloudflare Workers CLI Wrangler như mô tả trong tài liệu: https://developers.cloudflare.com/workers/cli-wrangler/install-update/. Đảm bảo xác thực CLI cũng.

Nếu chưa có tài khoản, tạo tài khoản Cloudflare tại đây và sau khi xác thực email với Cloudflare, vào dashboard và thiết lập subdomain Cloudflare Workers tùy chỉnh miễn phí.

Đừng quên đặt secret từ .env cho Cloudflare qua

wrangler secret put UPSTASH_REDIS_REST_TOKEN ...
wrangler secret put UPSTASH_REDIS_REST_URL ...

Khi xong, bạn có thể triển khai app:

npm run deploy

Wrangler sẽ cho link đến app sau khi triển khai xong. Mở nó và xem app nhanh như thế nào.

Liên kết

Xem ví dụ triển khai trên https://remix-cloudflare-workers.soenkep.workers.dev/.

Xem toàn bộ mã (không có biến môi trường) tại: https://github.com/zunkelty/upstash-remix-run.