Railway "chia tay" Next.js: Thời gian build giảm từ hơn 10 phút xuống dưới 2 phút

Railway, nền tảng triển khai ứng dụng đám mây phổ biến, đã thực hiện một bước đi táo bạo: loại bỏ hoàn toàn Next.js khỏi frontend sản xuất của họ. Hiện tại, bảng điều khiển (dashboard), canvas và cả trang chủ railway.com đều đang chạy trên bộ đôi Vite và TanStack Router. Đáng chú ý, quá trình di chuyển này chỉ được thực hiện trong hai Pull Request (PR) và đảm bảo tuyệt đối không có thời gian chết (zero downtime).

Next.js từng phục vụ Railway rất tốt, giúp đưa trang web từ con số 0 lên ứng dụng phục vụ hàng triệu người dùng mỗi tháng. Tuy nhiên, khi sản phẩm phát triển, framework này không còn là lựa chọn tối ưu nữa.

Môi trường làm việc phát triển phần mềm

Thách thức về hiệu suất và kiến trúc

Vấn đề lớn nhất mà đội ngũ Railway gặp phải là thời gian biên dịch (build time). Thời gian build frontend đã tăng vọt lên hơn 10 phút, trong đó có 6 phút chỉ dành riêng cho Next.js, chủ yếu bị mắc kẹt ở bước "tối ưu hóa trang cuối cùng". Đối với một đội ngũ phát triển (ship code) nhiều lần mỗi ngày, việc chờ đợi 10 phút để xem kết quả không chỉ là phiền toái mà còn là một khoản "thuế" đắt đỏ đối với tốc độ lặp lại.

Ngoài ra, kiến trúc của Railway thiên về client-side. Dashboard là một giao diện giàu trạng thái (stateful), canvas hoạt động theo thời gian thực và Websockets được sử dụng khắp nơi. Các nguyên thủy hướng về máy chủ (server-first) của Next.js không được Railway sử dụng nhiều. Thay vào đó, họ phải xây dựng các lớp trừu tượng (abstractions) của riêng mình trên Pages Router để hỗ trợ bố cục (layouts) và định tuyến, điều mà framework không xử lý theo cách họ cần.

Tại sao chọn TanStack Start + Vite?

Đội ngũ Railway muốn một bộ công nghệ phù hợp với cách họ thực sự xây dựng ứng dụng: tường minh, ưu tiên client-side và nhanh chóng khi lặp lại. TanStack Start + Vite đã thuyết phục họ nhờ những ưu điểm sau:

• Định tuyến an toàn kiểu (Type-safe routing) ngay lập tức: Các tham số route và search params được suy luận tự động, tính năng autocomplete hoạt động trên toàn bộ cây định tuyến.
• Bố cục hạng nhất (First-class layouts): Các tuyến bố cục không đường dẫn (pathless layout routes) đã thay thế tất cả các giải pháp thay thế trước đó bằng một thứ có thể kết hợp và dễ dự đoán.
• Vòng lặp phát triển cực nhanh: HMR (Hot Module Replacement) tức thì và thời gian khởi động gần như bằng không, giúp xóa nhòa khoảng cách giữa việc sửa code và nhìn thấy kết quả.
• SSR chỉ nơi cần thiết: Chỉ sử dụng Server-side Rendering cho các trang marketing, nhật ký thay đổi (changelog) và tuyển dụng. Phần còn lại chạy hoàn toàn client-side.
• Mô hình tường minh: TanStack dựa ít hơn vào "phép thuật" của framework và trao nhiều quyền kiểm soát hơn cho nhà phát triển về cách mọi thứ hoạt động bên dưới.

Di chuyển trong hai Pull Request

Sau khi đưa ra quyết định, quá trình di chuyển đã được thực hiện nhanh chóng. Việc di chuyển một frontend sản xuất phục vụ hàng triệu người dùng với hơn 200 tuyến đường thường mất hàng tháng để chạy song song và chuyển đổi dần dần. Tuy nhiên, Railway đã hoàn thành trong hai PR:

PR 1: Thay thế mọi thứ đặc thù của Next.js như next/image, next/head, next/router bằng API trình duyệt gốc hoặc các giải pháp thay thế không phụ thuộc vào framework. PR này không thay đổi bản chất framework mà chỉ loại bỏ sự phụ thuộc.

PR 2: Thay đổi hoàn toàn framework. Hơn 200 tuyến đường đã được di chuyển. Đội ngũ đã trích xuất mọi thứ không liên quan đến định tuyến từ các tệp trang thành các thành phần React riêng lẻ, sau đó tạo tất cả các tuyến từ cây trang gốc. Họ cũng thêm Nitro làm lớp máy chủ và thay thế next.config.js bằng cấu hình Nitro, hợp nhất các chuyển hướng, tiêu đề bảo mật và quy tắc caching vào một nơi.

Quá trình triển khai và kiểm thử mã nguồn

Những đánh đổi cần chấp nhận

Tất nhiên, việc đổi mới không phải không có cái giá phải trả:

• Tối ưu hóa hình ảnh tích hợp: Railway đã thay thế next/image bằng thẻ <img> tiêu chuẩn và sử dụng tối ưu hóa hình ảnh của Fastly tại lớp biên (edge).
• Một phần hệ sinh thái: Các công cụ như next-seo và next-sitemap đã được thay thế bằng các giải pháp nội bộ tương đương.
• Độ trưởng thành: TanStack Start vẫn còn khá mới và có thể có những góc cạnh chưa hoàn thiện. Tuy nhiên, Railway tin tưởng vào hướng đi của dự án này.

Kết quả và Tương lai

Hiện tại, frontend của Railway đang chạy trên chính nền tảng của họ. Fastly phục vụ phần lớn lưu lượng truy cập trực tiếp từ edge. Các trang marketing được lưu trong bộ nhớ đệm, trong khi các trang động sử dụng ISR khi cần thiết. Mô hình tài sản của Vite hoạt động rất hiệu quả: mỗi module nhận được chunk băm nội dung riêng, do đó việc thay đổi một tính năng cụ thể chỉ làm vô hiệu hóa chunk đó.

Nhờ sự thay đổi này, thời gian build đã giảm từ hơn 10 phút xuống dưới 2 phút. Máy chủ phát triển khởi động tức thì và các thay đổi định tuyến được kiểm tra kiểu ngay tại ranh giới. Railway tin rằng tốc độ lặp lại trên frontend là yếu tố quan trọng nhất hiện nay, và Vite + TanStack là công cụ giúp họ hướng tới một tương lai nơi việc triển khai các thay đổi frontend diễn ra gần như tức thì.