Fluid Compute giải quyết vấn đề gì
Vercel Fluid Compute, đã GA vào năm 2025, là nền tảng thực thi thế hệ mới tích hợp runtime vốn chia thành "Serverless Functions" và "Edge Functions". Serverless truyền thống có chi phí idle nặng nề theo mô hình "1 request = 1 container", trong khi Edge Functions bị hạn chế bởi giới hạn kích thước code 50MB và ràng buộc tương thích Node.js. Fluid Compute áp dụng mô hình "multi-tenant concurrency" trong đó một instance xử lý nhiều request đồng thời, và loại thời gian chờ I/O ra khỏi đối tượng tính phí. Kết quả là, có thể đạt được sự kết hợp của các đặc tính vốn là đánh đổi truyền thống: vừa duy trì kết nối DB vừa nhận được độ trễ gần edge.
Tính đến tháng 4 năm 2026, tùy chọn runtime trong `next.config.ts` có 3 lựa chọn: "nodejs" / "edge" / "fluid". Mặc định của Next.js 16 là "fluid", và các route dưới `/app` chạy trên Fluid trừ khi ghi rõ `export const runtime = "edge"`. Edge Functions thu hẹp ứng dụng vào việc kết thúc WebSocket và API có độ trễ cực thấp, và cuộc tranh luận lựa chọn vốn là "edge hay Lambda" đã chuyển sang "Fluid đủ hay cần Edge".
Rendering Edge RSC trong Next.js 16
Next.js 16 có thể tạo output streaming của React Server Components (RSC) tại PoP. Cụ thể, nó non đồng bộ flush HTML và RSC payload theo từng ranh giới Suspense, rút ngắn TTFB xuống khoảng 40ms. Điều quan trọng là việc đặt data fetch. RSC có thể viết fetch hoàn thành phía server, nhưng nguyên tắc sắt là tránh kết nối trực tiếp với DB origin và xen vào tầng cache edge như Vercel Data Cache (trước đây là Request Memoization) hoặc Hyperdrive / PlanetScale Boost.
RSC chạy trên Edge Runtime có các hạn chế. Không thể sử dụng `fs` / `net` / `child_process` của Node.js, và mã hóa thông qua Web Crypto API. Nhờ edge-compatible adapter được bổ sung cuối năm 2025, Prisma 6 và Drizzle ORM hoạt động nguyên vẹn, nhưng Sequelize và TypeORM vẫn được khuyến nghị Fluid. Kiến trúc phân công vai trò "RSC là Edge, ghi DB là Fluid" là giải pháp chuẩn năm 2026.
```typescript // app/products/[id]/page.tsx export const runtime = "edge"; export const revalidate = 60; export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) { const { id } = await params; const product = await fetch(`${process.env.EDGE_API}/products/${id}`, { next: { revalidate: 60, tags: [`product-${id}`] }, }).then((r) => r.json()); return ( <> <ProductHeader product={product} /> <Suspense fallback={<ReviewsSkeleton />}> <ProductReviews id={id} /> </Suspense> </> ); } ```
Streaming SSR và Partial Prerendering (PPR)
PPR là tính năng được giới thiệu thử nghiệm trong Next.js 14, stable hóa trong 15 và kích hoạt mặc định trong 16, phân phối "shell tĩnh + điền động" bằng hybrid giữa build time và runtime. Trả ngay khung HTML được tạo tại build time từ PoP, đồng thời để phần dành riêng cho người dùng (icon giỏ hàng, sản phẩm được đề xuất) như ranh giới Suspense và flush theo sau từ server. Điều này cho phép vừa duy trì tỷ lệ hit CDN vừa đạt được personalization.
Cạm bẫy trong triển khai là "khoảnh khắc tham chiếu `cookies()` hay `headers()`, toàn bộ tree đó trở thành động". Nếu vô tình gọi `headers()` trong layout, shell tĩnh của PPR sẽ không được tạo và bị hạ cấp xuống full SSR mỗi lần. Nên định kỳ kiểm tra tỷ lệ "Static (prerendered)" và "Dynamic (on-demand)" trong log đầu ra của `next build` và phát hiện trong CI khi tỷ lệ tĩnh giảm.
Edge Config và CDN-Backed Feature Flag
Edge Config là "JSON store được tối ưu hóa cho đọc" do Vercel cung cấp, có thể đọc trong vòng dưới 1ms từ Edge Runtime. Thay vì sử dụng SaaS như LaunchDarkly hay Statsig, việc xây dựng hạ tầng feature flag nội bộ bằng Edge Config + Vercel Flags SDK đã trở thành giải pháp thực tế năm 2026. Ghi qua management API truyền đến tất cả region trong vài giây, và đọc không phát sinh network RTT vì được nhúng vào Isolate của runtime.
Flags SDK xử lý A/B test và đánh giá flag bằng cùng một API, và khớp identity giữa RSC và client component. Cụ thể, cố định user ID vào cookie trong middleware, đánh giá `flag("new-checkout").bucket(userId)` trong RSC và truyền kết quả đến component con dưới dạng searchParams. Điều này hiện thực trải nghiệm kiểu SPA "variant được quyết định phía server ở lần truy cập đầu tiên được duy trì sau các chuyển trang" hoàn toàn tại edge.
```typescript import { flag } from "@vercel/flags/next"; import { get } from "@vercel/edge-config"; export const newCheckout = flag<boolean>({ key: "new-checkout", async decide({ entities }) { const config = await get<{ rollout: number }>("new-checkout"); const userId = entities?.user?.id ?? "anon"; return hash(userId) % 100 < (config?.rollout ?? 0); }, }); ```
Giới hạn kích thước Edge Config đã được mở rộng đến 512KB / store, 10 stores / project (cuối năm 2025). Trong thực tế, việc lưu trữ các giá trị cấu hình cần cập nhật theo thứ tự từ giây đến phút như "định nghĩa flag", "bảng giá", "từ cấm theo vùng" là trường hợp sử dụng chính, và không phù hợp với dữ liệu cập nhật tần suất cao như profile người dùng. Những dữ liệu đó được phân biệt sử dụng KV hoặc Redis.
Observability và Sourcemaps
Fluid Compute hỗ trợ chuẩn auto-instrumentation OpenTelemetry và chỉ cần import gói `@vercel/otel` là trace đã chảy đến Datadog / Honeycomb / Grafana Cloud. Khi gọi `fetch` trong RSC, span tự động được cắt, và Web Vitals (LCP / INP / CLS) được thu thập như RUM trên stream riêng. Từ năm 2026, nhờ Vercel Observability Plus, có thể upload sourcemap sản xuất một cách an toàn và giải quyết stack trace bằng số dòng TypeScript.
Việc vận hành error budget là tiêu chuẩn để định nghĩa SLO bằng ngôn ngữ truy vấn của Vercel Monitoring (VQL) và đẩy burn rate alert đến Slack / PagerDuty. Khi xếp cạnh nhau trên cùng một dashboard: p99 latency của Edge Functions, concurrent invocations của Fluid và hit rate của Data Cache, bạn có thể phát hiện sớm sự sụt giảm tỷ lệ tĩnh của PPR hay tăng cache miss. Cuộc cạnh tranh ở edge không chỉ là "tốc độ" mà còn là "tốc độ không thay đổi".