TanStack Start — Khi Next.js không còn là lựa chọn mặc định

Mình nhớ rõ cái cảm giác năm 2020 khi ai đó hỏi "nên dùng gì để build app React" — câu trả lời luôn là "cứ Next.js đi, không sai đâu". Nhanh, đơn giản, convention rõ ràng. Nhưng giờ đây, mỗi lần upgrade Next.js, mình lại có cảm giác như đang học một framework hoàn toàn mới. Caching thay đổi, mental model đảo ngược, directive mới xuất hiện liên tục. Và mình biết mình không phải người duy nhất cảm thấy vậy.

Chuyện gì đang xảy ra với Next.js?

Kể từ Next.js 13, mọi thứ bắt đầu rung lắc. React Server Components (RSC) được giới thiệu cùng App Router, và framework bắt đầu thay đổi các giả định nền tảng một cách liên tục.

Next.js 14 nói: "Mọi thứ được cache mặc định." Bạn phải học cách opt-out.

Next.js 15 quay xe 180 độ: "Không gì được cache mặc định." Bạn phải học cách opt-in.

Rồi thêm 'use client', 'use server', 'use cache' — ba directive mà bạn phải hiểu rõ ranh giới giữa chúng, nếu không thì hydration error sẽ chào đón bạn.

JavaScript

1// Next.js 15 - Phải khai báo caching rõ ràng
2'use cache'
3
4export async function getData() {
5  const data = await fetch('/api/data')
6  return data
7}

Theo kinh nghiệm của mình, việc Vercel phải publish một bài hướng dẫn có tên "Ten Common Mistakes with the Next.js App Router" đã nói lên tất cả. Khi framework cần một bài viết chính thức để liệt kê 10 lỗi phổ biến mà dev hay mắc, đó là dấu hiệu cho thấy developer experience đang có vấn đề.

A split-screen comparison diagram: left side shows Next.js 13, 14, 15 as stacked layers with conflicting arrows representing changing caching strategies and mental models, right side shows a clean single-layer architecture with consistent patterns, dark background with orange and blue accent colors, flat modern design

TanStack Start — Tay chơi mới nhưng không phải tay mơ

Nếu bạn đã từng dùng TanStack Query (React Query), TanStack Table, hay TanStack Router, bạn biết team này ship library chất lượng thế nào. Họ không build framework để chạy theo trend — họ build tool mà developer thực sự cần.

TanStack Start vừa ra v1, được xây trên hai nền tảng cực kỳ vững:

TanStack Router — routing layer với type safety đến từng parameter
Vite — build tool đã trở thành industry standard

Điều mình thấy hay là triết lý thiết kế hoàn toàn khác Next.js. Thay vì "server-first, opt-in client", TanStack Start chọn hướng "client-first, selective SSR". Nghe có vẻ đi ngược xu hướng, nhưng thực tế nó phản ánh đúng cách phần lớn chúng ta build app: interactive trước, SSR khi cần.

JavaScript

1// Muốn SPA thuần? Tắt SSR đi
2export const Route = createFileRoute('/dashboard')({
3  ssr: false,
4  component: DashboardComponent,
5})
6
7// Cần SEO? Bật SSR cho route đó
8export const Route = createFileRoute('/products')({
9  ssr: true,
10  loader: async () => fetchProducts(),
11  component: ProductsComponent,
12})

Bạn thấy không? Không có magic, không có convention ẩn. Mỗi route bạn quyết định rõ ràng nó render thế nào. Mình thích cái sự minh bạch này.

A clean technical diagram showing TanStack Start architecture: Vite as the build layer at the bottom, TanStack Router in the middle handling route definitions, and components at the top with arrows showing SSR and CSR paths branching from each route, using a dark background with green and cyan accent colors, modern flat design style

Type Safety — Điểm khác biệt lớn nhất

Đây là thứ mà khi dùng rồi, bạn không muốn quay lại.

TanStack Start generate một file routeTree.gen.ts chứa toàn bộ type information của routing. Nghĩa là nếu bạn đổi tên parameter từ $id thành $slug, mọi chỗ link đến route đó sẽ báo lỗi ngay lúc build — không phải lúc user click vào broken link trên production.

So sánh nhanh:

JavaScript

1// Next.js - Link chỉ là string, không ai check giúp bạn
2<Link href={`/products/${productId}`}>View Product</Link>
3
4// TanStack Start - TypeScript sẽ la nếu params sai
5navigate({ to: '/products/$id', params: { id: productId } })

Với Next.js, bạn typo /produtcs/ thay vì /products/ — chỉ biết khi test thủ công hoặc user report bug. Với TanStack Start, TypeScript bắt ngay. Theo kinh nghiệm của mình, riêng feature này đã tiết kiệm không biết bao nhiêu giờ debug routing issues.

An illustration showing type safety in routing: on the left a code editor with red squiggly underlines on incorrect route parameters and TypeScript error tooltip, on the right the same code with correct parameters showing green checkmarks, split by a vertical divider, dark code editor theme with syntax highlighting

Data Fetching — Isomorphic thay vì Server-only

Next.js 15 dùng Async Server Components — data chỉ fetch được trên server. Nếu client cần data đó cho interaction tiếp theo, bạn phải setup streaming hoặc re-fetch.

TanStack Start dùng isomorphic loaders: cùng một đoạn code chạy trên server lần đầu (cho SEO, performance), rồi chạy trên client cho các navigation tiếp theo. Không cần duplicate logic, không cần nghĩ "đoạn này chạy ở đâu".

Và vì TanStack Start được build bởi cùng team làm TanStack Query, việc tích hợp data fetching, caching, và invalidation cực kỳ mượt. Không có cái kiểu "cache bất ngờ" hay "data cũ không biết từ đâu ra" như mình từng gặp với Next.js.

Khi nào nên chọn cái nào?

Mình không phải kiểu dev "framework X tệ, framework Y tốt". Mỗi tool có context phù hợp:

Chọn Next.js khi:

Build content-heavy site (blog, marketing, e-commerce catalog)
Team đã có kinh nghiệm và codebase Next.js lớn
Cần ecosystem plugin và integration rộng lớn
Deploy trên Vercel và muốn tận dụng tối đa platform

Chọn TanStack Start khi:

Build interactive app (dashboard, SaaS, internal tool)
Cần type safety mạnh mẽ xuyên suốt routing và data layer
Muốn kiểm soát rõ ràng SSR vs CSR từng route
Thích Vite và không muốn phụ thuộc vào một platform cụ thể

A decision flowchart for choosing between Next.js and TanStack Start: starting from project type at top, branching into content-heavy vs interactive app, then sub-branches for team experience, deployment needs, and type safety requirements, each path ending at either Next.js or TanStack Start recommendation, clean white background with blue and purple node colors, modern flowchart style

Những điều cần lưu ý

TanStack Start mới ra v1, nên ecosystem chưa thể so sánh với Next.js. Middleware, authentication patterns, deployment guides — những thứ này Next.js đã có sẵn hàng trăm tutorial và example. Với TanStack Start, bạn sẽ phải tự mò nhiều hơn, ít nhất là trong giai đoạn đầu.

Community cũng nhỏ hơn đáng kể. Khi gặp bug lạ lúc 2 giờ sáng, khả năng tìm thấy câu trả lời trên Stack Overflow cho TanStack Start thấp hơn nhiều so với Next.js.

Nhưng điều mình thấy promising là tốc độ phát triển của TanStack ecosystem. Từ beta đến v1, mọi thứ hoạt động smooth một cách đáng ngạc nhiên. Và cái community tuy nhỏ nhưng chất lượng — toàn những dev biết mình đang làm gì.

Đây không phải cuộc chiến framework

Cuối cùng, điều quan trọng nhất không phải là Next.js hay TanStack Start "thắng". Điều quan trọng là chúng ta có lựa chọn.

Năm năm qua, Next.js gần như là monopoly trong thế giới full-stack React. Monopoly không bao giờ tốt cho developer. Sự xuất hiện của TanStack Start, cùng với Remix và các framework khác, buộc mọi bên phải cải thiện.

Mình đã thử build một side project với TanStack Start, và cảm giác đó giống như lần đầu dùng React sau jQuery — mọi thứ suddenly make sense. Không phải vì nó hoàn hảo, mà vì nó tôn trọng mental model của mình thay vì bắt mình phải học lại cách nghĩ.

Nếu bạn đang frustrated với Next.js, đừng chỉ complain — hãy thử TanStack Start một buổi chiều cuối tuần. Có thể nó sẽ phù hợp, có thể không. Nhưng ít nhất bạn sẽ biết mình có lựa chọn.