Chinh phục 50 triệu người dùng: Bài học kiến trúc từ việc mở rộng Quran.com

Mở rộng quy mô một ứng dụng web để phục vụ 50 triệu người dùng mỗi tháng không chỉ là một thách thức kỹ thuật — mà thực chất là một bài toán kiến trúc. Tại Quran.com, một trong những tài liệu Hồi giáo được truy cập nhiều nhất thế giới, tôi đã dẫn dắt nỗ lực kỹ thuật frontend, đưa nền tảng từ trạng thái quá tải đến việc phục vụ ổn định hàng chục triệu người dùng trên toàn cầu.

Dưới đây là những bài học tôi rút ra được.

Đặt nền móng đúng đắn: Next.js và ISR

Khi gia nhập đội ngũ, Quran.com đang chạy dưới dạng một ứng dụng đơn trang (SPA) React với hiển thị phía máy khách (client-side rendering). Mỗi lần tải trang đều đánh vào máy chủ, và mọi người dùng đều phải trải qua thời gian chờ "first paint" chậm chạp. Giải pháp là di chuyển hoàn toàn sang Next.js với Tạo tĩnh gia tăng (Incremental Static Regeneration - ISR).

ISR cho phép bạn tạo trước (pre-render) các trang tại thời điểm xây dựng và xác thực lại chúng trong nền theo lịch trình. Với những nội dung như các trang Surah — vốn hiếm khi thay đổi — chúng tôi đặt thời gian xác thực lại là 3600 giây (1 giờ). Điều này có nghĩa là hầu hết người dùng sẽ nhận được HTML đã được tạo trước ngay lập tức thay vì chờ máy chủ thực thi.

Kết quả: Thời gian nhận byte đầu tiên (Time to First Byte - TTFB) giảm hơn 70% đối với người dùng tại Châu Á và Trung Đông, nơi lưu lượng truy cập của chúng tôi cao nhất.

Edge Caching: Lớp bảo vệ thứ hai

ISR một mình là chưa đủ. Chúng tôi đã lồng lớp Cloudflare lên phía trước Vercel, được cấu hình để lưu cache các trang do ISR tạo ra tại biên mạng CDN (CDN edge). Người dùng tại Riyadh, Karachi, Jakarta — bất cứ nơi đâu họ đang ở — giờ đây đều được phục vụ từ một nút mạng (node) ở gần họ.

Cấu hình giúp điều này trở nên hiện thực:

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/surah/:id*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, s-maxage=3600, stale-while-revalidate=86400'
          }
        ]
      }
    ]
  }
}

Header stale-while-revalidate là chìa khóa. Nó báo cho CDN biết: hãy phục vụ phiên bản đã lưu cache ngay lập tức, và xác thực lại trong nền. Người dùng không bao giờ phải chờ đợi.

Kết quả: Tỷ lệ truy cập cache của CDN tăng từ khoảng 40% lên 92%.

Tối ưu hóa Bundle và Code Splitting

Một ứng dụng với 50 triệu người dùng không thể chi trả cho các gói JavaScript cồng kềnh. Chúng tôi đã kiểm toán mọi dependency và áp dụng chia mã (code splitting) một cách triệt để:

• Nhập động (dynamic imports) cho các thành phần nặng (trình phát âm thanh, trình xem bản dịch).
• Chia mã dựa trên tuyến đường thông qua định tuyến động của Next.js.
• Chuyển tùy chọn người dùng (chủ đề, cài đặt ngôn ngữ) sang trạng thái phía máy khách để tránh làm vô hiệu hóa cache (cache busting) trên mọi yêu cầu được cá nhân hóa.

Kết quả: Kích thước gói JS ban đầu giảm khoảng 45%.

Điều mà mở rộng quy mô thực sự dạy cho bạn

Bài học lớn nhất khi làm việc ở quy mô này là: các quyết định kiến trúc trông có vẻ là sự tối ưu hóa trước thời điểm thường lại là những quyết định quan trọng nhất.

ISR không phải là một mẹo về hiệu suất — nó là một chiến lược khả năng mở rộng. Với 50 triệu người dùng, mỗi mili-giây bạn cắt giảm khỏi con đường quan trọng đều được cộng dồn. Một cải tiến 100ms ở TTFB đồng nghĩa với việc hàng triệu người dùng mỗi ngày tải trang nhanh hơn, tương tác nhiều hơn và quay lại thường xuyên hơn.

Nếu bạn đang xây dựng một ứng dụng Next.js nhiều nội dung, đừng đợi đến khi gặp vấn đề về quy mô mới bắt đầu nghĩ đến ISR và edge caching. Hãy xây dựng nó đúng ngay từ lần đầu tiên.

Tổng quan về Công nghệ sử dụng

• Framework: Next.js 14 (App Router, ISR)
• CDN: Cloudflare
• Triển khai: Vercel
• Quản lý trạng thái: React Query + Zustand
• Ngôn ngữ: TypeScript toàn bộ

Nếu bạn có câu hỏi về việc mở rộng quy mô Next.js trong môi trường sản xuất hoặc muốn trao đổi về kiến trúc, hãy liên hệ tại zunain.com.