Kalau kamu freelance web developer yang pakai React, pasti familiar dengan perasaan ini: setiap tahun ada framework baru yang katanya "lebih baik" dari yang sebelumnya. Tahun lalu Next.js App Router, sebelumnya Remix, sebelumnya lagi Create React App. Capek, kan?
Tapi kali ini, ada sesuatu yang genuinely menarik. TanStack Start — framework baru dari Tanner Linsley, creator TanStack Query (yang dulu kita kenal sebagai React Query). Dan sebelum kamu mikir "ah, framework baru lagi", mari kita lihat dulu kenapa ini worth your attention.
Problem dengan Framework React Saat Ini
Jujur saja, landscape React framework di 2025 ini agak chaotic. Mari kita breakdown satu per satu.
Next.js dan App Router Complexity
Next.js masih jadi pilihan paling populer, tapi App Router yang diperkenalkan di Next.js 13 membawa kompleksitas baru yang bikin banyak developer frustasi. Caching behavior yang unpredictable, perbedaan Server Components dan Client Components yang membingungkan, dan "magic" yang terlalu banyak sampai sulit di-debug.
Pernah ngalamin data yang harusnya fresh tapi tetap stale? Atau bingung kenapa component tidak re-render padahal state sudah berubah? Kamu tidak sendirian. Bahkan developer senior pun sering struggle dengan App Router caching.
Belum lagi soal vendor lock-in. Meskipun Next.js bisa di-deploy ke mana saja, experience terbaik tetap di Vercel. Self-hosting Next.js itu possible, tapi tidak se-smooth deploy ke Vercel.
Remix dan Ketidakpastian Arah
Remix adalah framework yang bagus dengan filosofi yang solid — web standards, progressive enhancement, dan simplicity. Tapi setelah diakuisisi Shopify di 2022, arahnya jadi kurang jelas. Sekarang Remix sedang merge dengan React Router v7, dan transisi ini membuat sebagian developer wait-and-see.
Bukan berarti Remix jelek — justru sebaliknya. Tapi kalau kamu mau invest waktu belajar framework baru, kamu mau yang trajectory-nya jelas.
Create React App? Sudah Deprecated
Kalau masih ada yang pakai Create React App untuk project baru, ini saatnya move on. CRA sudah officially deprecated dan tidak di-maintain lagi. Vite jadi replacement yang lebih cepat, tapi Vite sendiri bukan full-stack solution — kamu masih perlu setup routing, SSR, dan banyak hal lainnya secara manual.
Apa yang Sebenarnya Dibutuhkan Freelancer?
Sebagai freelance web developer, kebutuhan kita sebenarnya straightforward. Kita butuh framework yang stabil dan predictable karena kita tidak punya waktu untuk debug framework issues di tengah deadline. Learning curve yang reasonable karena kita sering switch antar project dengan tech stack berbeda.
Type-safety jadi semakin penting karena kita tidak selalu punya QA team untuk catch bugs sebelum production. Flexibility untuk deploy ke mana saja karena setiap client punya preferensi hosting yang berbeda. Dan yang paling penting, framework yang tidak terlalu "magic" sehingga ketika ada masalah, kita bisa debug dan fix sendiri.
Enter TanStack Start
Di sinilah TanStack Start masuk. Framework ini dibangun oleh Tanner Linsley, orang yang sama di balik TanStack Query — library data fetching yang dipakai jutaan developer dan sudah terbukti solid selama bertahun-tahun.
Filosofi TanStack Start bisa dirangkum dalam tiga kata: type-safe, no magic, full control. Semua route, parameter, search params — semuanya typed. IDE kamu akan teriak kalau ada typo di path. Tidak ada caching tersembunyi atau behavior yang unpredictable, dan kamu punya kontrol penuh atas apa yang terjadi di aplikasi.
Bayangkan seperti ini. Kalau React ecosystem adalah dunia otomotif, Next.js itu seperti Tesla — canggih dengan banyak fitur otomatis, tapi kalau rusak, susah dibetulkan sendiri karena terlalu banyak yang proprietary. Remix seperti Toyota — reliable dan proven, tapi desainnya mulai terasa old school dan sedang transisi ke model baru.
TanStack Start? Lebih seperti Porsche. Performance-focused, full control untuk driver, modern tapi tidak over-engineered. Dan yang paling penting untuk analogi ini: dashboard-nya type-safe.
Kenapa Sekarang?
Timing TanStack Start sebenarnya tepat. React 19 sudah stable dengan fitur-fitur baru seperti Server Components yang lebih mature. Vite sudah jadi standard de facto untuk build tool. Dan developer mulai lelah dengan "magic" yang terlalu banyak di framework modern.
TanStack Start memanfaatkan momen ini dengan pendekatan yang berbeda: instead of hiding complexity, dia memberikan tools yang membuat complexity itu manageable. Type-safety adalah kuncinya — ketika IDE bisa menangkap error sebelum kamu run code, debugging jadi jauh lebih mudah.
Yang Akan Kita Pelajari
Di artikel series ini, kita akan deep dive ke TanStack Start dari berbagai sudut. Pertama kita akan memahami apa sebenarnya TanStack Start dan bagaimana arsitekturnya bekerja. Kemudian kita explore fitur-fitur unggulannya yang membuat dia berbeda dari framework lain.
Kita juga akan membandingkan secara jujur dengan Next.js, Remix, dan Astro — karena setiap framework punya sweet spot masing-masing. Tentu saja akan ada hands-on tutorial membuat project pertama supaya kamu bisa langsung merasakan developer experience-nya.
Dan yang paling penting untuk kamu sebagai freelancer: kita akan bahas kapan harus dan kapan tidak harus menggunakan TanStack Start. Karena tool terbaik adalah tool yang tepat untuk job yang tepat.
Disclaimer: Ini Beta Software
Sebelum lanjut, perlu dicatat bahwa per Januari 2025, TanStack Start masih dalam status beta. Artinya API mungkin masih berubah dan belum semua fitur complete. Tapi core functionality sudah cukup stable untuk banyak use case, dan mengingat track record Tanner dengan TanStack Query, trajectory-nya sangat promising.
Jadi apakah TanStack Start siap untuk production? Untuk project kecil hingga menengah, absolutely. Untuk enterprise mission-critical? Mungkin tunggu stable release. Tapi untuk belajar dan memahami ke mana arah React development, sekarang adalah waktu yang tepat untuk mulai.
Mari kita mulai dengan memahami apa sebenarnya TanStack Start dan bagaimana dia bekerja di balik layar.
Bagian 2: Apa Itu TanStack Start - Deep Dive
Sekarang mari kita bongkar apa sebenarnya TanStack Start dan bagaimana semua komponen di dalamnya bekerja bersama. Understanding the architecture akan membantu kamu membuat keputusan yang lebih informed tentang kapan dan bagaimana menggunakannya.
Definisi Singkat
TanStack Start adalah full-stack React framework yang type-safe by default, dibangun di atas TanStack Router dengan server capabilities powered by Vinxi dan Nitro. Kalau definisi ini terdengar seperti buzzword soup, jangan khawatir — kita akan breakdown satu per satu.
Arsitektur TanStack Start
TanStack Start bukan monolith yang dibangun dari nol. Sebaliknya, dia adalah komposisi dari beberapa library dan tool terbaik di ekosistemnya masing-masing. Ini sebenarnya kekuatan sekaligus filosofinya: instead of reinventing the wheel, compose proven solutions.
ARSITEKTUR TANSTACK START:
┌─────────────────────────────────────────────────────────────────┐
│ APLIKASI KAMU │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ TanStack Start │ │
│ │ (Full-stack framework layer) │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │ │
│ ┌────────────────────┼────────────────────┐ │
│ ▼ ▼ ▼ │
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ TanStack │ │ Vinxi │ │ Vite │ │
│ │ Router │ │ (Server) │ │ (Bundler) │ │
│ └───────────┘ └───────────┘ └───────────┘ │
│ │ │
│ ▼ │
│ ┌───────────┐ │
│ │ Nitro │ │
│ │ (Runtime) │ │
│ └───────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ React 18/19 │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Mari kita bahas masing-masing komponen.
TanStack Router: The Heart
TanStack Router adalah jantung dari TanStack Start. Ini adalah routing library paling type-safe di ekosistem React saat ini — dan bukan klaim marketing, ini genuinely true.
Apa yang membuat TanStack Router special? Pertama, setiap route path di-generate sebagai TypeScript type. Kalau kamu tulis <Link to="/prodcuts"> (typo), IDE langsung kasih error. Tidak perlu tunggu sampai browser untuk tahu ada yang salah.
Kedua, route parameters otomatis typed. Kalau route kamu /products/$productId, maka params.productId otomatis typed sebagai string. Tidak perlu casting manual atau type assertion.
Ketiga, search params (query string) juga bisa di-validate dan typed. Kamu bisa define schema seperti ?page=1&sort=price dan TanStack Router akan validate sekaligus provide types untuk semuanya.
// Contoh type-safe routing
import { Link } from '@tanstack/react-router'
// IDE akan autocomplete semua valid routes
<Link to="/products/$productId" params={{ productId: '123' }}>
View Product
</Link>
// Error kalau typo atau params salah
<Link to="/prodcuts/$productId"> // ❌ TypeScript error!
Vinxi: The Server Engine
Vinxi adalah meta-framework builder yang berasal dari tim SolidStart (framework untuk SolidJS). Fungsinya adalah menyediakan server capabilities untuk TanStack Start: SSR, streaming, server functions, dan sebagainya.
Kenapa tidak bikin server sendiri? Karena Vinxi sudah solve banyak problem kompleks: bundling server dan client code secara terpisah, handling streaming responses, managing server functions, dan banyak lagi. Instead of reinventing, TanStack Start leverage solusi yang sudah battle-tested.
Vinxi juga framework-agnostic, artinya learnings dan improvements di SolidStart ecosystem juga benefit TanStack Start, dan sebaliknya.
Nitro: The Runtime
Nitro adalah server runtime yang berasal dari Nuxt ecosystem (Vue.js). Ini adalah layer yang membuat TanStack Start bisa di-deploy ke mana saja.
Dengan Nitro, output build TanStack Start bisa jalan di Node.js server tradisional, Vercel serverless, Netlify functions, Cloudflare Workers, AWS Lambda, Deno Deploy, bahkan Bun. Satu codebase, deploy ke 15+ target berbeda tanpa perubahan code.
Untuk freelancer, ini game-changer. Client mau pakai DigitalOcean? Bisa. Client sudah punya AWS setup? Bisa. Client mau coba Cloudflare karena lebih murah? Bisa juga. Kamu tidak perlu bilang "maaf, harus pakai platform X".
Vite: The Build Tool
Vite sudah jadi standard de facto untuk build tool di JavaScript ecosystem. Hot Module Replacement yang instan, build time yang cepat, dan plugin ecosystem yang luas.
TanStack Start pakai Vite untuk development experience yang smooth: perubahan code langsung reflect di browser dalam milliseconds, bukan seconds. Untuk project besar, perbedaan ini sangat terasa.
Filosofi: No Magic, Full Control
Sekarang kamu sudah tahu komponen-komponennya. Tapi yang lebih penting adalah filosofi di balik bagaimana komponen ini bekerja bersama.
TanStack Start menganut prinsip "explicit over implicit". Tidak ada caching tersembunyi yang tiba-tiba bikin data stale. Tidak ada kompilasi ajaib yang transform code kamu jadi sesuatu yang unrecognizable. Setiap behavior bisa di-trace dan di-debug.
Type-safety bukan afterthought yang ditambal kemudian, tapi foundation dari awal. Router di-design supaya TypeScript bisa infer types dengan benar. Server functions di-design supaya input dan output bisa typed end-to-end.
Server-first approach berarti data fetching terjadi di server by default. Tapi tidak ada magic Server Components yang bikin kamu bingung mana yang jalan di server, mana di client. Server function explicitly marked, dan kamu tahu persis apa yang terjadi.
Terakhir, progressive enhancement tetap jadi first-class citizen. Aplikasi tetap functional bahkan sebelum JavaScript load di client. Ini penting untuk SEO dan user experience, terutama di koneksi lambat.
Perbandingan Mental Model
Untuk memahami perbedaannya dengan framework lain, bayangkan seperti ini.
Next.js App Router punya mental model: "Tulis component, kami yang atur sisanya — caching, rendering, bundling". Ini powerful tapi kadang unpredictable karena terlalu banyak yang di-handle secara implicit.
Remix punya mental model: "Web adalah request-response. Loader untuk GET, Action untuk POST. Simple". Ini lebih predictable tapi kadang terasa verbose untuk case yang sebenarnya simple.
TanStack Start punya mental model: "Route dengan loader yang type-safe, component yang render data, server function untuk mutations. Semuanya explicit dan typed". Ini balance antara simplicity dan control.
Status dan Maturity
Per Januari 2025, TanStack Start masih beta. Tapi ini beta yang sudah quite usable. Core features — routing, data loading, server functions, SSR — semuanya working. Yang masih in progress adalah polish, edge cases, dan dokumentasi yang lebih comprehensive.
Mengingat track record Tanner dengan TanStack Query yang sudah dipakai di production oleh ribuan company, confidence level untuk TanStack Start cukup tinggi. Ini bukan hobby project random developer, tapi serious effort dari seseorang yang sudah proven di ecosystem React.
Di bagian selanjutnya, kita akan deep dive ke fitur-fitur unggulan yang membuat TanStack Start genuinely different — bukan hanya "another React framework".
Bagian 3: Fitur Unggulan TanStack Start
Sekarang mari kita explore fitur-fitur yang membuat TanStack Start genuinely special. Bukan sekadar feature list, tapi bagaimana fitur-fitur ini solve real problems yang sering kita hadapi sebagai developer.
Type-Safe Routing: Killer Feature
Ini adalah fitur yang paling sering di-highlight, dan memang layak. Type-safe routing di TanStack Start bukan sekadar "TypeScript support" yang biasa — ini adalah level type-safety yang belum pernah ada di React framework lain.
// app/routes/products/$productId.tsx
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/products/$productId')({
loader: async ({ params }) => {
// params.productId otomatis typed sebagai string ✅
// params.anything akan error ❌
const product = await fetchProduct(params.productId)
return { product }
},
component: ProductPage,
})
function ProductPage() {
// useLoaderData() return type sesuai dengan return loader
const { product } = Route.useLoaderData()
return <div>{product.name}</div> // product fully typed! ✅
}
Yang lebih powerful lagi adalah saat navigation. Setiap <Link> component punya autocomplete untuk semua valid routes di aplikasi kamu.
import { Link } from '@tanstack/react-router'
// IDE autocomplete semua routes yang valid
<Link to="/products/$productId" params={{ productId: '123' }}>
View Product
</Link>
// Typo? TypeScript langsung error
<Link to="/prodcuts/$productId" params={{ productId: '123' }}>
{/* Error: '/prodcuts/$productId' is not a valid route */}
</Link>
// Lupa params? TypeScript juga error
<Link to="/products/$productId">
{/* Error: Missing required param 'productId' */}
</Link>
Untuk freelancer, ini berarti lebih sedikit bug yang lolos ke production. Refactoring jadi lebih aman karena kalau kamu rename route, semua Link yang broken akan langsung ketahuan di IDE.
Server Functions: RPC Style
Server functions di TanStack Start memungkinkan kamu memanggil server-side code dari client seolah-olah memanggil function biasa. Tapi dengan type-safety end-to-end.
// app/server/contact.ts
import { createServerFn } from '@tanstack/start'
import { z } from 'zod'
const contactSchema = z.object({
name: z.string().min(2),
email: z.string().email(),
message: z.string().min(10),
})
// Server function - hanya jalan di server
export const submitContact = createServerFn('POST', async (data: unknown) => {
// Validate input
const validated = contactSchema.parse(data)
// Server-only operations
await db.contacts.create({ data: validated })
await sendEmail({
to: '[email protected]',
subject: 'New Contact Form',
body: validated.message,
})
return { success: true, message: 'Pesan terkirim!' }
})
Di client, panggil seperti function biasa.
// app/routes/contact.tsx
import { submitContact } from '../server/contact'
function ContactForm() {
const [status, setStatus] = useState<string | null>(null)
async function handleSubmit(formData: FormData) {
const result = await submitContact({
name: formData.get('name'),
email: formData.get('email'),
message: formData.get('message'),
})
setStatus(result.message)
}
return (
<form action={handleSubmit}>
{/* form fields */}
</form>
)
}
Tidak ada API route terpisah yang harus di-maintain. Tidak ada fetch call manual. Tidak ada type mismatch antara client dan server. Semuanya connected dan typed.
File-Based Routing
TanStack Start menggunakan file-based routing yang intuitive. Struktur folder langsung mapping ke URL structure.
app/routes/
├── __root.tsx → Layout untuk semua pages
├── index.tsx → /
├── about.tsx → /about
├── contact.tsx → /contact
├── products/
│ ├── index.tsx → /products
│ ├── $productId.tsx → /products/:productId
│ └── $productId/
│ ├── edit.tsx → /products/:productId/edit
│ └── reviews.tsx → /products/:productId/reviews
├── blog/
│ ├── index.tsx → /blog
│ └── $slug.tsx → /blog/:slug
└── _auth/ → Route group (underscore = tidak jadi URL)
├── login.tsx → /login
└── register.tsx → /register
Beberapa convention yang perlu diingat. File index.tsx adalah index route untuk folder tersebut. Prefix $ menandakan dynamic segment seperti $productId atau $slug. Prefix _ menandakan route group yang tidak jadi URL segment, berguna untuk grouping routes yang share layout tanpa menambah nesting di URL.
Built-in Data Loading
Data loading di TanStack Start menggunakan loader pattern yang sudah familiar kalau kamu pernah pakai Remix atau React Router.
export const Route = createFileRoute('/dashboard')({
// Loader jalan di server sebelum component render
loader: async ({ context }) => {
// Parallel fetching untuk performance
const [user, stats, notifications] = await Promise.all([
fetchUser(context.userId),
fetchDashboardStats(),
fetchNotifications(context.userId),
])
return { user, stats, notifications }
},
// Component untuk loading state
pendingComponent: () => <DashboardSkeleton />,
// Component untuk error state
errorComponent: ({ error }) => (
<div className="text-red-500">
Error: {error.message}
</div>
),
component: Dashboard,
})
function Dashboard() {
// Data sudah ready, tidak perlu loading state di sini
const { user, stats, notifications } = Route.useLoaderData()
return (
<div>
<h1>Welcome, {user.name}</h1>
<StatsGrid stats={stats} />
<NotificationList items={notifications} />
</div>
)
}
Data fetching terjadi di server, hasilnya di-serialize dan dikirim ke client bersama HTML. Tidak ada loading spinner untuk initial page load — data sudah ada.
Type-Safe Search Params
Ini fitur yang sering di-overlook tapi sangat powerful. Search params atau query string bisa di-validate dan typed.
import { z } from 'zod'
const productFilters = z.object({
page: z.number().default(1),
sort: z.enum(['price', 'name', 'newest']).default('newest'),
category: z.string().optional(),
minPrice: z.number().optional(),
maxPrice: z.number().optional(),
})
export const Route = createFileRoute('/products')({
// Validate search params dengan schema
validateSearch: productFilters,
loader: async ({ search }) => {
// search.page, search.sort, dll sudah typed!
const products = await fetchProducts({
page: search.page,
sort: search.sort,
category: search.category,
priceRange: [search.minPrice, search.maxPrice],
})
return { products }
},
component: ProductList,
})
function ProductList() {
const { products } = Route.useLoaderData()
const search = Route.useSearch()
const navigate = Route.useNavigate()
return (
<div>
{/* Filter controls */}
<select
value={search.sort}
onChange={(e) => navigate({
search: { ...search, sort: e.target.value }
})}
>
<option value="newest">Terbaru</option>
<option value="price">Harga</option>
<option value="name">Nama</option>
</select>
{/* Pagination */}
<button onClick={() => navigate({
search: { ...search, page: search.page + 1 }
})}>
Next Page
</button>
{/* Product grid */}
<ProductGrid items={products} />
</div>
)
}
URL seperti /products?page=2&sort=price&category=electronics otomatis di-parse dan typed. Tidak perlu manual parsing searchParams.get('page') dan casting ke number.
SSR dan Streaming
TanStack Start mendukung SSR out of the box dengan streaming support. Artinya halaman bisa mulai render dan dikirim ke browser sambil data loading masih berlangsung.
export const Route = createFileRoute('/products')({
loader: async () => {
return {
// Return promises, bukan awaited data
featuredProducts: fetchFeaturedProducts(),
categories: fetchCategories(),
recentProducts: fetchRecentProducts(),
}
},
component: Products,
})
function Products() {
const data = Route.useLoaderData()
return (
<div>
{/* Ini render duluan sambil data lain loading */}
<h1>Our Products</h1>
{/* Suspense boundaries untuk streaming */}
<Suspense fallback={<FeaturedSkeleton />}>
<Await promise={data.featuredProducts}>
{(products) => <FeaturedSection products={products} />}
</Await>
</Suspense>
<Suspense fallback={<CategoriesSkeleton />}>
<Await promise={data.categories}>
{(categories) => <CategoryNav categories={categories} />}
</Await>
</Suspense>
</div>
)
}
Dengan streaming, user tidak perlu menunggu semua data selesai load. Header dan layout bisa muncul duluan, lalu konten muncul progressively. Ini significantly improve perceived performance.
Fitur-fitur ini bukan gimmick — mereka solve real problems yang sering kita hadapi sehari-hari. Di bagian selanjutnya, kita akan bandingkan secara honest dengan framework lain untuk membantu kamu decide apakah TanStack Start cocok untuk kebutuhan kamu.
Bagian 4: Perbandingan dengan Next.js, Remix, dan Framework Lain
Sekarang mari kita bandingkan TanStack Start dengan framework populer lainnya secara honest. Tidak ada framework yang sempurna untuk semua situasi — yang penting adalah memahami trade-off masing-masing.
Comparison Table
┌─────────────────────┬──────────────┬──────────────┬──────────────┬──────────────┐
│ Feature │ TanStack │ Next.js 14 │ Remix v2 │ Astro │
│ │ Start │ (App Router) │ │ │
├─────────────────────┼──────────────┼──────────────┼──────────────┼──────────────┤
│ Type-Safe Routing │ ✅ Native │ ❌ Manual │ ❌ Manual │ ❌ Manual │
├─────────────────────┼──────────────┼──────────────┼──────────────┼──────────────┤
│ Type-Safe Params │ ✅ Native │ ❌ Manual │ ⚠️ Partial │ ❌ Manual │
├─────────────────────┼──────────────┼──────────────┼──────────────┼──────────────┤
│ Search Params Typed │ ✅ Validated │ ❌ Manual │ ❌ Manual │ ❌ Manual │
├─────────────────────┼──────────────┼──────────────┼──────────────┼──────────────┤
│ Server Functions │ ✅ Simple │ ✅ Actions │ ✅ Actions │ ⚠️ Limited │
├─────────────────────┼──────────────┼──────────────┼──────────────┼──────────────┤
│ Deploy Flexibility │ ✅ Anywhere │ ⚠️ Vercel+ │ ✅ Anywhere │ ✅ Anywhere │
├─────────────────────┼──────────────┼──────────────┼──────────────┼──────────────┤
│ Learning Curve │ Medium │ High │ Medium │ Low │
├─────────────────────┼──────────────┼──────────────┼──────────────┼──────────────┤
│ Community Size │ Growing │ Huge │ Medium │ Large │
├─────────────────────┼──────────────┼──────────────┼──────────────┼──────────────┤
│ Maturity │ Beta │ Stable │ Stable │ Stable │
├─────────────────────┼──────────────┼──────────────┼──────────────┼──────────────┤
│ "Magic" Level │ Low │ High │ Medium │ Low │
└─────────────────────┴──────────────┴──────────────┴──────────────┴──────────────┘
TanStack Start vs Next.js
Next.js adalah incumbent — framework React paling populer dengan ecosystem terbesar. Tapi App Router membawa kompleksitas yang membuat banyak developer frustasi.
Caching di Next.js adalah pain point utama. Ada fetch caching, route segment caching, full route cache — dan behavior masing-masing tidak selalu intuitif. Banyak developer menghabiskan waktu debugging kenapa data mereka stale padahal seharusnya fresh.
Server Components vs Client Components juga menambah cognitive load. Kapan pakai 'use client'? Kapan 'use server'? Bagaimana data flow antara keduanya? Mental model ini butuh waktu untuk dikuasai.
TanStack Start mengambil pendekatan berbeda. Tidak ada implicit caching — kalau kamu mau cache, kamu explicitly set up caching. Tidak ada Server Components yang "magic" — server function jelas-jelas jalan di server, component jelas-jelas jalan di client (dengan SSR).
Tapi Next.js punya kelebihan yang tidak bisa diabaikan. Community dan ecosystem-nya massive. Hampir semua tutorial, library, dan tool sudah support Next.js. Kalau stuck, mudah cari solusi di Google atau Stack Overflow. Untuk TanStack Start yang masih baru, resource masih terbatas.
TanStack Start vs Remix
Remix dan TanStack Start sebenarnya punya filosofi yang mirip: web standards, loader/action pattern, progressive enhancement. Perbedaan utamanya ada di type-safety dan trajectory.
Remix routing tidak type-safe by default. Kamu bisa typo di path dan baru ketahuan saat runtime. TanStack Start catch ini di compile time.
Soal trajectory, Remix sedang dalam masa transisi. Merger dengan React Router v7 membuat beberapa developer wait-and-see. Bukan berarti Remix akan hilang — justru akan lebih terintegrasi dengan React Router. Tapi uncertainty ini membuat sebagian developer ragu untuk heavily invest di Remix sekarang.
TanStack Start punya trajectory yang lebih clear: Tanner aktif develop dan punya vision yang jelas untuk framework ini.
TanStack Start vs Astro
Astro adalah pilihan excellent untuk content-heavy websites. Blog, dokumentasi, marketing sites — Astro unbeatable untuk use case ini karena menghasilkan zero JavaScript by default.
Tapi Astro bukan untuk aplikasi dengan banyak interactivity. Kalau kamu butuh complex state management, real-time features, atau heavy client-side logic, Astro bukan tool yang tepat.
TanStack Start lebih cocok untuk web applications: dashboards, admin panels, SaaS products, e-commerce dengan banyak interaksi. Astro untuk websites, TanStack Start untuk web apps.
Kapan Pilih Apa?
Pilih Next.js kalau tim sudah punya expertise Next.js, butuh ecosystem dan community besar, atau enterprise project yang butuh "safe choice". Pilih Remix kalau progressive enhancement adalah prioritas utama dan sudah comfortable dengan React Router patterns.
Pilih TanStack Start kalau type-safety adalah top priority, ingin framework modern tanpa magic, dan comfortable dengan beta software. Pilih Astro kalau membangun content-heavy website dengan minimal JavaScript.
Untuk freelancer yang sering switch project, TanStack Start menarik karena satu framework bisa handle berbagai jenis project — dari landing page sampai complex web app — dengan type-safety yang konsisten.
Bagian 5: Hands-On - Membuat Project Pertama
Cukup teorinya. Sekarang mari kita buat project TanStack Start dari nol supaya kamu bisa langsung merasakan developer experience-nya.
Setup Project
Buka terminal dan jalankan command berikut:
npx create-tsstart@latest my-freelance-portfolio
Ikuti prompt yang muncul, pilih template "basic" untuk memulai. Setelah selesai:
cd my-freelance-portfolio
npm install
npm run dev
Buka browser di http://localhost:3000 dan kamu akan lihat halaman welcome TanStack Start.
Struktur Project
my-freelance-portfolio/
├── app/
│ ├── routes/
│ │ ├── __root.tsx # Root layout
│ │ └── index.tsx # Homepage
│ ├── client.tsx # Client entry
│ ├── router.tsx # Router configuration
│ └── routeTree.gen.ts # Auto-generated route tree
├── public/
├── package.json
├── tsconfig.json
└── app.config.ts # TanStack Start config
File routeTree.gen.ts adalah file yang di-generate otomatis berdasarkan struktur folder routes/. Jangan edit manual — file ini yang memberikan type-safety untuk routing.
Membuat Root Layout
Edit app/routes/__root.tsx untuk membuat layout dasar:
import { createRootRoute, Link, Outlet } from '@tanstack/react-router'
export const Route = createRootRoute({
component: RootLayout,
})
function RootLayout() {
return (
<html lang="id">
<head>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portfolio - Freelance Developer</title>
<script src="<https://cdn.tailwindcss.com>"></script>
</head>
<body className="bg-gray-50 min-h-screen">
<nav className="bg-white shadow-sm">
<div className="max-w-5xl mx-auto px-4 py-4">
<div className="flex items-center justify-between">
<Link to="/" className="text-xl font-bold text-gray-900">
DevPortfolio
</Link>
<div className="flex gap-6">
<Link to="/" className="text-gray-600 hover:text-gray-900">
Home
</Link>
<Link to="/projects" className="text-gray-600 hover:text-gray-900">
Projects
</Link>
<Link to="/contact" className="text-gray-600 hover:text-gray-900">
Contact
</Link>
</div>
</div>
</div>
</nav>
<main>
<Outlet />
</main>
</body>
</html>
)
}
Perhatikan bagaimana <Link> component akan memberikan autocomplete untuk routes yang valid. Coba ketik path yang salah — TypeScript akan langsung error.
Membuat Homepage
Edit app/routes/index.tsx:
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/')({
component: HomePage,
})
function HomePage() {
return (
<div className="max-w-5xl mx-auto px-4 py-16">
<div className="text-center">
<h1 className="text-5xl font-bold text-gray-900 mb-4">
Freelance Web Developer
</h1>
<p className="text-xl text-gray-600 mb-8">
Membangun aplikasi web modern dengan React, Laravel, dan teknologi terkini
</p>
<div className="flex gap-4 justify-center">
<a href="/projects" className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700">
Lihat Portfolio
</a>
<a href="/contact" className="border border-gray-300 px-6 py-3 rounded-lg hover:bg-gray-50">
Hubungi Saya
</a>
</div>
</div>
</div>
)
}
Membuat Dynamic Route dengan Data Loading
Buat folder dan file app/routes/projects/index.tsx:
import { createFileRoute, Link } from '@tanstack/react-router'
// Simulasi fetch dari database/API
async function fetchProjects() {
await new Promise(r => setTimeout(r, 300)) // Simulate network delay
return [
{ id: '1', title: 'E-Commerce Platform', tech: 'Laravel + React', year: 2024 },
{ id: '2', title: 'Company Dashboard', tech: 'Next.js + Prisma', year: 2024 },
{ id: '3', title: 'Booking System', tech: 'TanStack Start', year: 2025 },
]
}
export const Route = createFileRoute('/projects/')({
loader: async () => {
const projects = await fetchProjects()
return { projects }
},
pendingComponent: () => (
<div className="max-w-5xl mx-auto px-4 py-16 text-center">
<div className="animate-pulse">Loading projects...</div>
</div>
),
component: ProjectsPage,
})
function ProjectsPage() {
const { projects } = Route.useLoaderData()
return (
<div className="max-w-5xl mx-auto px-4 py-16">
<h1 className="text-3xl font-bold mb-8">Projects</h1>
<div className="grid md:grid-cols-2 gap-6">
{projects.map((project) => (
<Link
key={project.id}
to="/projects/$projectId"
params={{ projectId: project.id }}
className="block bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition"
>
<h2 className="text-xl font-semibold mb-2">{project.title}</h2>
<p className="text-gray-600">{project.tech}</p>
<p className="text-sm text-gray-400 mt-2">{project.year}</p>
</Link>
))}
</div>
</div>
)
}
Sekarang buat detail page di app/routes/projects/$projectId.tsx:
import { createFileRoute } from '@tanstack/react-router'
async function fetchProject(id: string) {
await new Promise(r => setTimeout(r, 200))
const projects: Record<string, any> = {
'1': {
id: '1',
title: 'E-Commerce Platform',
tech: 'Laravel + React',
description: 'Platform e-commerce lengkap dengan payment gateway Midtrans.',
features: ['Product catalog', 'Shopping cart', 'Payment integration', 'Admin dashboard']
},
'2': {
id: '2',
title: 'Company Dashboard',
tech: 'Next.js + Prisma',
description: 'Dashboard internal untuk monitoring KPI perusahaan.',
features: ['Real-time charts', 'Team management', 'Report generation']
},
'3': {
id: '3',
title: 'Booking System',
tech: 'TanStack Start',
description: 'Sistem reservasi untuk hotel dan villa.',
features: ['Calendar booking', 'Availability check', 'Email notifications']
},
}
return projects[id] || null
}
export const Route = createFileRoute('/projects/$projectId')({
loader: async ({ params }) => {
const project = await fetchProject(params.projectId)
if (!project) throw new Error('Project not found')
return { project }
},
errorComponent: () => (
<div className="max-w-5xl mx-auto px-4 py-16 text-center">
<h1 className="text-2xl font-bold text-red-600">Project tidak ditemukan</h1>
</div>
),
component: ProjectDetail,
})
function ProjectDetail() {
const { project } = Route.useLoaderData()
return (
<div className="max-w-3xl mx-auto px-4 py-16">
<h1 className="text-3xl font-bold mb-2">{project.title}</h1>
<p className="text-blue-600 mb-6">{project.tech}</p>
<p className="text-gray-600 mb-8">{project.description}</p>
<h2 className="text-xl font-semibold mb-4">Features</h2>
<ul className="space-y-2">
{project.features.map((feature: string, i: number) => (
<li key={i} className="flex items-center gap-2">
<span className="text-green-500">✓</span>
{feature}
</li>
))}
</ul>
</div>
)
}
Membuat Contact Form dengan Server Function
Buat app/routes/contact.tsx:
import { createFileRoute } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/start'
import { useState } from 'react'
const submitContact = createServerFn('POST', async (formData: FormData) => {
const name = formData.get('name') as string
const email = formData.get('email') as string
const message = formData.get('message') as string
// Validasi sederhana
if (!name || !email || !message) {
return { success: false, error: 'Semua field harus diisi' }
}
// Di production: simpan ke database, kirim email, dll
console.log('Contact form:', { name, email, message })
return { success: true, message: 'Terima kasih! Pesan Anda telah terkirim.' }
})
export const Route = createFileRoute('/contact')({
component: ContactPage,
})
function ContactPage() {
const [result, setResult] = useState<{ success: boolean; message?: string; error?: string } | null>(null)
const [loading, setLoading] = useState(false)
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault()
setLoading(true)
const formData = new FormData(e.currentTarget)
const response = await submitContact(formData)
setResult(response)
setLoading(false)
if (response.success) {
e.currentTarget.reset()
}
}
return (
<div className="max-w-xl mx-auto px-4 py-16">
<h1 className="text-3xl font-bold mb-8">Contact</h1>
{result && (
<div className={`p-4 rounded-lg mb-6 ${result.success ? 'bg-green-50 text-green-800' : 'bg-red-50 text-red-800'}`}>
{result.success ? result.message : result.error}
</div>
)}
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="block text-sm font-medium mb-1">Nama</label>
<input name="name" required className="w-full border rounded-lg px-4 py-2" />
</div>
<div>
<label className="block text-sm font-medium mb-1">Email</label>
<input name="email" type="email" required className="w-full border rounded-lg px-4 py-2" />
</div>
<div>
<label className="block text-sm font-medium mb-1">Pesan</label>
<textarea name="message" rows={4} required className="w-full border rounded-lg px-4 py-2" />
</div>
<button
type="submit"
disabled={loading}
className="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 disabled:opacity-50"
>
{loading ? 'Mengirim...' : 'Kirim Pesan'}
</button>
</form>
</div>
)
}
Sekarang kamu punya portfolio sederhana dengan type-safe routing, data loading, dan server function. Coba navigasi antar halaman — perhatikan betapa smooth transisinya dan bagaimana IDE memberikan autocomplete untuk setiap route.
Bagian 6: Kenapa TanStack Start Cocok untuk Freelancer
Setelah melihat fitur dan mencoba langsung, sekarang mari kita bahas secara spesifik kenapa TanStack Start bisa jadi pilihan menarik untuk freelance web developer.
Type-Safety Mengurangi Bug Production
Sebagai freelancer, reputasi adalah segalanya. Satu bug di production bisa merusak hubungan dengan client yang sudah dibangun berbulan-bulan. Masalahnya, kita tidak selalu punya waktu atau budget untuk testing yang comprehensive.
Type-safety di TanStack Start menjadi safety net yang powerful. Typo di route path? IDE langsung kasih error. Lupa pass required parameter? TypeScript complain sebelum kamu sempat run. Data dari loader tidak sesuai dengan yang component expect? Compile error.
// Bug yang biasa lolos ke production di framework lain:
<Link href="/prodcuts/123">View</Link> // Typo tidak ketahuan
// Di TanStack Start:
<Link to="/prodcuts/$productId" params={{ productId: '123' }}>
// ❌ TypeScript Error: Route '/prodcuts/$productId' tidak ada
Ini bukan hanya soal convenience — ini soal mengurangi waktu debugging dan meningkatkan kepercayaan client.
Developer Experience yang Produktif
Waktu adalah uang, terutama untuk freelancer. Setiap jam yang dihabiskan untuk setup, debugging, atau fighting with tooling adalah jam yang tidak bisa di-bill.
TanStack Start memberikan DX yang smooth. Autocomplete untuk routes berarti tidak perlu bolak-balik cek file structure. HMR instan berkat Vite berarti feedback loop yang cepat. Error messages yang jelas berarti debugging yang lebih singkat.
Dalam project tipikal, kamu bisa menghemat 2-3 jam per minggu hanya dari tidak perlu debugging routing issues atau type mismatches. Kalikan dengan rate per jam kamu — itu nilai yang signifikan.
Deploy Anywhere Memberikan Flexibility
Setiap client punya preferensi hosting yang berbeda. Ada yang sudah punya AWS setup, ada yang prefer managed platform seperti Vercel, ada yang mau VPS murah di DigitalOcean.
Dengan TanStack Start yang menggunakan Nitro, kamu punya satu codebase yang bisa deploy ke mana saja. Node.js server, Vercel, Netlify, Cloudflare Workers, AWS Lambda — semuanya supported tanpa perubahan code.
Ini berarti kamu tidak perlu menolak project karena client minta platform tertentu. Tidak perlu bilang "maaf, framework yang saya pakai hanya optimal di platform X". Flexibility ini membuka lebih banyak opportunity.
Satu Framework untuk Berbagai Project
Sebagai freelancer, kamu mungkin handle berbagai jenis project: landing page minggu ini, admin dashboard minggu depan, e-commerce bulan berikutnya. Setiap switch framework berarti context switching yang makan waktu.
TanStack Start cukup versatile untuk handle berbagai jenis project. Landing page sederhana? Bisa. Dashboard dengan banyak data fetching? Bisa. E-commerce dengan form yang kompleks? Bisa juga. Satu mental model, satu set of tools, berbagai jenis deliverable.
Ini juga berarti component library yang kamu bangun bisa di-reuse across projects. Button, form, layout — semua bisa jadi asset yang terus memberikan nilai.
Skill yang Transferable
Mungkin kamu khawatir: "Bagaimana kalau TanStack Start tidak take off? Bukankah waktu belajar jadi sia-sia?"
Kabar baiknya, skill yang kamu pelajari di TanStack Start sangat transferable. TanStack Router pattern mirip dengan React Router. Server function concept mirip dengan Next.js Server Actions atau Remix Actions. Type-safe development adalah skill universal yang valuable di mana saja.
Bahkan kalau suatu hari kamu decide untuk tidak pakai TanStack Start, pemahaman tentang type-safe architecture, loader pattern, dan modern React development tetap berguna.
Competitive Advantage
Di pasar freelance yang crowded, diferensiasi penting. Ketika semua orang offer "website dengan Next.js", kamu bisa offer sesuatu yang berbeda: "aplikasi web dengan type-safety end-to-end yang mengurangi bug dan mempercepat development".
Client yang tech-savvy akan appreciate pendekatan ini. Mereka tahu bahwa lebih sedikit bug berarti lebih sedikit maintenance cost. Development yang lebih cepat berarti time-to-market yang lebih singkat.
Tentu, kamu perlu bisa explain value proposition ini dengan cara yang non-technical. Bukan "saya pakai TanStack Start dengan type-safe routing" tapi "aplikasi yang saya bangun punya lebih sedikit error karena banyak bug tertangkap sebelum sampai ke user".
Investment untuk Masa Depan
TanStack ecosystem punya track record yang solid. TanStack Query sudah dipakai di production oleh ribuan company selama bertahun-tahun. TanStack Table, TanStack Virtual — semuanya battle-tested.
TanStack Start dibangun dengan fondasi yang sama: fokus pada DX, type-safety, dan solving real problems. Meskipun masih beta, trajectory-nya sangat promising. Early adopter yang invest waktu sekarang akan punya advantage ketika framework ini mature.
Untuk freelancer yang ingin stay ahead of the curve tanpa betting on technology yang terlalu experimental, TanStack Start menawarkan balance yang menarik: modern dan innovative, tapi dibangun oleh orang yang sudah proven di ecosystem.
Bagian 7: Kapan Harus dan Tidak Harus Menggunakan TanStack Start
Mari kita tutup dengan honest assessment. TanStack Start bukan silver bullet — ada situasi di mana dia shine, dan ada situasi di mana pilihan lain lebih tepat.
Gunakan TanStack Start Ketika
Project baru dari scratch. Kalau kamu memulai project baru tanpa legacy code, TanStack Start adalah pilihan yang excellent. Kamu bisa memanfaatkan type-safety dari awal tanpa perlu migrate atau adapt existing code.
Type-safety adalah prioritas. Kalau kamu atau client sangat peduli dengan code quality dan ingin mengurangi runtime errors, TanStack Start memberikan level type-safety yang tidak dimiliki framework lain. Ini terutama valuable untuk project jangka panjang yang akan di-maintain bertahun-tahun.
Tim kecil atau solo developer. Tanpa QA team yang dedicated, type-safety menjadi safety net yang sangat berharga. IDE bisa catch banyak bug yang biasanya baru ketahuan saat testing manual.
Butuh flexibility deployment. Kalau client belum decide mau hosting di mana, atau kalau kamu sering switch antara berbagai platform, kemampuan deploy anywhere sangat membantu.
Sudah familiar dengan TanStack Query. Kalau kamu sudah pakai TanStack Query, mental model TanStack Start akan terasa familiar. Learning curve jadi lebih landai.
Membangun web applications. Dashboards, admin panels, internal tools, SaaS products — ini adalah sweet spot TanStack Start. Aplikasi dengan banyak interaksi, data fetching, dan forms.
Hindari TanStack Start Ketika
Project yang butuh stability maksimal. TanStack Start masih beta. Untuk mission-critical enterprise project di mana downtime atau breaking changes tidak acceptable, pertimbangkan Next.js atau Remix yang sudah stable.
Tim besar dengan Next.js expertise. Kalau tim sudah productive dengan Next.js dan deadline ketat, switching framework bukan ide bagus. Learning curve plus deadline adalah resep untuk masalah.
Static site sederhana. Untuk blog, dokumentasi, atau marketing site yang mostly static content, Astro lebih cocok. TanStack Start overkill untuk use case ini.
Client explicitly minta "proven technology". Beberapa client, terutama di corporate environment, punya requirement untuk teknologi yang sudah established. Next.js punya brand recognition yang lebih besar. Kadang perception matters.
Legacy project migration. Migrate existing large codebase ke TanStack Start probably tidak worth the effort. Fokus TanStack Start di project baru.
WordPress/CMS replacement. Kalau client butuh CMS yang bisa mereka edit sendiri, TanStack Start bukan solusinya. Gunakan WordPress, Strapi, atau headless CMS yang proper.
Decision Framework
Untuk membantu decision, gunakan framework sederhana ini.
Pertama, apakah ini project baru atau existing? Kalau existing, biasanya lebih baik stick dengan current framework kecuali ada alasan kuat untuk migrate.
Kedua, apakah type-safety penting untuk project ini? Kalau project kecil dengan timeline pendek dan tidak akan di-maintain lama, overhead type-safety mungkin tidak worth it.
Ketiga, bagaimana timeline dan risk tolerance? Timeline ketat dengan low risk tolerance mengarah ke pilihan yang lebih safe seperti Next.js. Timeline fleksibel dengan willingness to experiment cocok untuk TanStack Start.
Keempat, bagaimana skill dan preference tim? Familiarity dengan TanStack ecosystem adalah plus. Tapi kalau tim sangat comfortable dengan framework lain, switching cost perlu dipertimbangkan.
Honest Assessment: Maturity
Per Januari 2025, TanStack Start ada di posisi beta yang cukup mature. Core features working well. Tapi documentation masih berkembang dan edge cases mungkin belum semuanya ter-cover.
Untuk project personal, side projects, atau client yang understand dan accept bahwa ini teknologi yang relatif baru, go ahead. Untuk enterprise dengan strict requirements, mungkin tunggu stable release atau gunakan sebagai experimental pilot project dulu.
Langkah Selanjutnya
Kalau setelah membaca ini kamu tertarik untuk explore lebih lanjut, berikut saran langkah-langkahnya.
Pertama, coba di side project dulu. Buat portfolio site atau internal tool kecil. Rasakan DX-nya, pahami patternsnya, temukan rough edges-nya.
Kedua, ikuti official documentation di tanstack.com/start. Dokumentasi terus improve dan menjadi sumber paling akurat untuk best practices.
Ketiga, join TanStack Discord. Community-nya aktif dan helpful. Banyak early adopter yang share experience dan solutions.
Keempat, siapkan fallback. Untuk client yang butuh safe choice, pastikan kamu juga comfortable dengan Next.js atau framework mainstream lainnya.
Kelima, document learnings kamu. Bisa jadi blog post, video tutorial, atau bahkan course. Early adopter yang share knowledge punya opportunity untuk establish expertise di area baru.
Penutup
TanStack Start adalah framework yang menarik dengan filosofi yang solid. Type-safety as foundation, explicit over implicit, dan built on proven libraries. Untuk freelancer yang ingin modern tech stack dengan DX yang excellent, ini worth considering.
Tapi seperti semua tools, yang penting adalah memilih yang tepat untuk situasi yang tepat. Tidak ada framework yang perfect untuk semua use case. Yang ada adalah understanding trade-offs dan making informed decisions.
Sekarang kamu punya informasi yang cukup untuk decide apakah TanStack Start cocok untuk project kamu berikutnya. Happy coding!
