TanStack Start কী? সম্পূর্ণ টেকনিক্যাল ডিপ-ডাইভ (বাংলা)

👋 ১. Introduction

আপনি যদি ইতিমধ্যে React দিয়ে ছোটখাটো কিছু তৈরি করেছেন — যেমন একটা Todo App, একটা Counter App, বা Vite দিয়ে বানানো কোনো simple project — তাহলে আপনি জানেন React কী কাজ করে।

কিন্তু একটা সময় আসে যখন প্রশ্ন জাগে:

"শুধু React দিয়ে UI তো বানানো যাচ্ছে, কিন্তু Routing কীভাবে হবে? Server-এর সাথে কথা বলব কীভাবে? Data কোথা থেকে আসবে? SEO-friendly page কীভাবে বানাব? এগুলো সব একসাথে manage করার কোনো সহজ উপায় আছে কি?"

এই প্রশ্নগুলোর উত্তর খুঁজতে গিয়েই আমরা TanStack Start-এর সাথে পরিচিত হবো। এই Episode শুধু একটি পরিচিতিমূলক লেখা নয় — এটি একটি সম্পূর্ণ mental-model + technical deep-dive। লক্ষ্য হলো, এই একটি Episode পড়ার পরে আপনি যেন শুধু "TanStack Start কী" তা না জেনে, বরং কেন এবং কীভাবে এটি ভেতরে ভেতরে কাজ করে — সেটাও বুঝে যান।

এই Episode শেষে আপনি নিচের বিষয়গুলোতে confidently কথা বলতে পারবেন:

CSR, SSR, Streaming SSR এবং Hydration-এর মধ্যে পার্থক্য এবং প্রতিটির trade-off
File-based Routing আসলে ভেতরে কী তৈরি করে (Route Tree)
Server Function কীভাবে "network boundary" তৈরি করে এবং কেন এটি নিরাপদ
একটি request Browser থেকে বের হয়ে Server ঘুরে আবার Browser-এ ফিরে আসা পর্যন্ত পুরো যাত্রা
Official "start-basic" example-এর প্রতিটি লাইন কেন এবং কীভাবে দরকার

এই লেখায় আমরা শুধুমাত্র official documentation-এ উল্লেখিত এবং সাধারণভাবে পরিচিত concept-গুলো নিয়ে আলোচনা করব। যেখানে exact syntax version-ভেদে পরিবর্তিত হতে পারে, সেখানে আমরা সেটিকে "সরলীকৃত / conceptual উদাহরণ" হিসেবে চিহ্নিত করব, যাতে কোনো ভুল ধারণা তৈরি না হয়।

⚙️ ২. আগে বুঝি: একটি React application সাধারণত কীভাবে কাজ করে?

TanStack Start বোঝার আগে, একটি সাধারণ React application (যেমন Vite দিয়ে বানানো) কীভাবে কাজ করে সেটা গভীরভাবে বোঝা দরকার। কারণ TanStack Start যে সমস্যাগুলো সমাধান করে, সেগুলো এখান থেকেই আসে।

একটি সাধারণ Vite + React app-এ যা ঘটে

Browser request করে → index.html ↓ index.html একটি খালি <div id="root"></div> নিয়ে আসে ↓ Browser তারপর JavaScript bundle (main.js) download করে ↓ JavaScript চলে, React সেই bundle থেকে UI তৈরি করে ↓ তারপরই ব্যবহারকারী প্রথমবার real content দেখতে পায়

এই পুরো প্রক্রিয়াটার একটি নাম আছে: CSR (Client-Side Rendering)।

Client-Side Rendering (CSR)

ইংরেজি term: Client-Side Rendering (CSR)
সহজ বাংলায়: Server শুধু একটা প্রায়-খালি HTML file পাঠায়। আসল UI তৈরি হয় Browser (Client)-এর ভিতরে, JavaScript চলার পরে।
উদাহরণ: একটি সাধারণ npm create vite@latest দিয়ে বানানো React app এভাবেই কাজ করে।

এই request-টা সময়ের সাথে ঠিক কী কী ধাপে যায়?

একটু গভীরে গিয়ে দেখা যাক, CSR-এ ব্যবহারকারীর জন্য সময় (timeline) ঠিক কীভাবে কাটে। এখানে দুটি গুরুত্বপূর্ণ মেট্রিক আছে — TTFB (Time To First Byte) এবং TTI (Time To Interactive)।

TTFB (Time To First Byte)
Browser request পাঠানোর পর প্রথম byte response হিসেবে ফিরে আসতে যে সময় লাগে।

TTI (Time To Interactive)
পুরো page ব্যবহারকারীর জন্য সম্পূর্ণভাবে interactive (ক্লিক করা, টাইপ করা ইত্যাদি করা যায়) হতে যে সময় লাগে।

CSR টাইমলাইন (approximately): 0ms ────► Request পাঠানো হলো 50ms ────► TTFB: প্রায়-খালি HTML পৌঁছালো (কিছুই দেখা যাচ্ছে না) 300ms ────► JS bundle download শুরু ও শেষ 450ms ────► React JS execute হলো, UI তৈরি হলো 450ms ────► TTI: এখন প্রথমবার ব্যবহারকারী কিছু দেখল এবং interact করতে পারল সমস্যা: 0ms থেকে 450ms পর্যন্ত ব্যবহারকারী একটা ফাঁকা সাদা পাতা দেখছিল।

Waterfall সমস্যা (Request Waterfall)

CSR-এ আরেকটি গুরুত্বপূর্ণ সমস্যা হলো data fetching waterfall। এটি ঘটে যখন data আনার জন্য component প্রথমে render হতে হয়, তারপর useEffect-এর ভিতরে fetch call হয়, তারপর data আসার পর আবার re-render হয়।

১. Component render হলো (data ছাড়া) → Loading spinner দেখাল ২. useEffect চলল → fetch("/api/data") শুরু হলো ৩. Network এ সময় লাগল (latency) ৪. Data ফিরে এলো → setState হলো ৫. আবার render হলো → এবার real content দেখা গেল এই পুরো প্রক্রিয়াটা "render → fetch → render" নামে পরিচিত, যেখানে data আসার আগ পর্যন্ত ব্যবহারকারী কিছুই দেখতে পায় না।

এই সমস্যা যখন একাধিক nested component-এ ঘটে (একটার data অন্যটার উপর নির্ভরশীল), তখন একে waterfall বলা হয় — কারণ একটার পর একটা request ধারাবাহিকভাবে (sequentially) হতে থাকে, parallel-এ নয়।

এই ধরনের application-এর সীমাবদ্ধতা

এই approach সহজ, কিন্তু কিছু বাস্তব সমস্যা তৈরি করে:

Routing নিজে থেকে হয় না — আলাদা library (যেমন React Router) লাগে।
Data loading এর জন্য component mount হওয়ার পরে আলাদা করে fetch করতে হয়, যার ফলে loading spinner দেখা যায় এবং waterfall সমস্যা হয়।
Server-এর সাথে সরাসরি, নিরাপদ ভাবে কথা বলার কোনো built-in উপায় থাকে না — আলাদা backend API লাগে।
প্রথমবার page load হতে বেশি সময় লাগতে পারে, কারণ প্রথমে JavaScript download ও execute হতে হয়।
SEO-র ক্ষেত্রে সমস্যা হতে পারে, কারণ search engine crawler যদি JavaScript ভালোভাবে execute না করে, তাহলে সে শুধু খালি HTML দেখতে পাবে।

এই সীমাবদ্ধতাগুলো সমাধানের জন্যই full-stack framework ধারণাটি জনপ্রিয় হয়েছে — এবং TanStack Start এমনই একটি framework।

⚛️ ৩. React নিজে কী দেয়?

TanStack Start-এর জায়গা ঠিকমতো বুঝতে হলে, প্রথমে এটা স্পষ্ট থাকা দরকার — React নিজে ঠিক কী দেয়, আর কী দেয় না।

React একটি library, framework নয়।

ইংরেজি term: Component
সহজ বাংলায়: React আমাদের ছোট ছোট, reusable UI অংশ (Component) দিয়ে interface বানানোর উপায় দেয়। যেমন একটা Button, একটা Card, একটা Navbar — এগুলো সবই component।
উদাহরণ:

function Welcome() { return <h3>Welcome Home!!!</h3> }

Virtual DOM এবং Reconciliation — একটু গভীরে

React কীভাবে UI আপডেট করে সেটা বোঝা গুরুত্বপূর্ণ, কারণ SSR/Hydration বুঝতে এটা কাজে লাগবে।

Virtual DOM
সহজ বাংলায়: Real browser DOM-কে সরাসরি বারবার পরিবর্তন করা ব্যয়বহুল (expensive)। তাই React একটি হালকা, in-memory "নকল" DOM structure রাখে, যাকে Virtual DOM বলা হয়। State পরিবর্তন হলে React প্রথমে নতুন একটি Virtual DOM তৈরি করে, পুরোনোটার সাথে তুলনা করে, এবং শুধুমাত্র যেটুকু পরিবর্তন হয়েছে সেটুকুই real DOM-এ আপডেট করে।

Reconciliation
পুরোনো ও নতুন Virtual DOM-এর মধ্যে তুলনা করে ন্যূনতম পরিবর্তন খুঁজে বের করার এই প্রক্রিয়াকে Reconciliation বলা হয়।

React মূলত যা দেয়:

UI-কে Component হিসেবে ভাঙার উপায়
State এবং UI-এর মধ্যে sync রাখার উপায় (Virtual DOM + Reconciliation)
Data পরিবর্তন হলে UI automatically update হওয়ার mechanism

React যা দেয় না: built-in Routing, built-in Server, built-in Data loading system, বা built-in SSR। এই কাজগুলোর জন্য আলাদা tool বা framework দরকার হয়। React শুধু "UI তৈরির ভাষা" দেয়, কিন্তু সেই UI কীভাবে, কোথায়, কখন render হবে — সেই সিদ্ধান্তগুলো React নিজে নেয় না।

React ↓ UI Components (state ↔ UI sync করার নিয়ম)

এখানেই TanStack-এর মতো framework/library-গুলোর প্রয়োজন দেখা দেয় — যেগুলো React-কে ঘিরে বাকি জিনিসগুলো যোগ করে।

🧰 ৪. TanStack কী?

অনেকে প্রথমে ভাবেন TanStack মানেই বুঝি একটা framework। আসলে তা নয়।

TanStack হলো একটি organization/project family-এর নাম, যেটি বেশ কিছু আলাদা আলাদা, headless (UI-বিহীন, শুধু logic-based) library তৈরি করে — যেমন data fetching-এর জন্য, table বানানোর জন্য, routing-এর জন্য, form handle করার জন্য।

Headless library
সহজ বাংলায়: এমন একটি library যা শুধু logic এবং state management দেয়, কিন্তু নিজের কোনো fixed visual style/UI চাপিয়ে দেয় না। Developer নিজের মতো করে UI বানাতে পারেন, library শুধু পেছনের কাজ (data, state, calculation) সামলায়।

TanStack-এর কিছু পরিচিত প্রজেক্ট

Library	কাজ কী
TanStack Query	Server data fetch এবং caching manage করা
TanStack Table	জটিল table/data-grid বানানো
TanStack Router	Type-safe routing পরিচালনা করা
TanStack Start	TanStack Router-এর উপর ভিত্তি করে বানানো full-stack framework

গুরুত্বপূর্ণ পয়েন্ট: TanStack Start একটি আলাদা, standalone জিনিস নয় — এটি TanStack Router-এর উপর build করা একটি full-stack layer। তাই TanStack Start বুঝতে হলে TanStack Router-এর ভূমিকা বোঝা জরুরি (আমরা এটা ৮ নম্বর অংশে গভীরভাবে দেখব)।

🚀 ৫. TanStack Start কী?

সহজভাবে বললে:

TanStack Start হলো একটি full-stack React framework, যা TanStack Router-এর উপর ভিত্তি করে তৈরি। এটি Routing, Server-side logic, Data loading এবং Rendering (SSR সহ) — এই সবগুলোকে একসাথে, একটি সুসংগত (coherent) উপায়ে পরিচালনা করার জন্য বানানো হয়েছে।

"Meta-framework" ধারণাটি

ইংরেজি term: Meta-framework
সহজ বাংলায়: React নিজে একটি library। কিন্তু একটি সম্পূর্ণ application বানাতে React-এর সাথে আরও অনেক কিছু লাগে — Routing, Bundler configuration, Server, Data loading strategy। যে framework এই সবকিছু একসাথে জুড়ে দিয়ে React-এর উপর একটি সম্পূর্ণ কাঠামো তৈরি করে, তাকে "meta-framework" বলা হয়। TanStack Start এমনই একটি meta-framework — এটি React-কে প্রতিস্থাপন করে না, বরং React-কে ঘিরে বাকি সবকিছু সংগঠিত করে।

Isomorphic / Universal Application

ইংরেজি term: Isomorphic (বা Universal) Application
সহজ বাংলায়: এমন একটি application যেখানে একই codebase-এর কিছু অংশ Server-এ চলে, আবার কিছু অংশ Client (Browser)-এ চলে — অথচ ভাষা এবং অনেক ক্ষেত্রে একই function/component দুই জায়গাতেই কাজ করতে পারে। TanStack Start এই ধরনের একটি isomorphic কাঠামো তৈরি করে, যেখানে একটি Route component প্রথমে Server-এ render হয়, পরে Client-এ hydrate হয়ে "একই" component হিসেবে চলতে থাকে।

এখানে Full-stack শব্দটার মানেও স্পষ্টভাবে বোঝা জরুরি।

Full-stack

ইংরেজি term: Full-stack
সহজ বাংলায়: শুধু UI (frontend/Client) নয়, বরং Server-side অংশও একই project-এর মধ্যে, একই codebase-এ লেখা এবং manage করা যায়।
উদাহরণ: একটি সাধারণ React + Vite app শুধু frontend তৈরি করে; সেটির জন্য আলাদা একটি backend (Express/Node ইত্যাদি) লাগে। TanStack Start-এ Routing এবং কিছু Server-side logic একই project-এর ভিতরে লেখা সম্ভব।

TanStack Start কোন কোন টুলের উপর দাঁড়িয়ে আছে?

TanStack Start একা কাজ করে না — এটি বেশ কিছু পরিচিত টুলের সমন্বয়ে গঠিত একটি স্তরায়িত (layered) architecture। ধারণাগতভাবে এটি এভাবে সাজানো যায়:

Vite (Build tool: bundling, dev server, HMR) + TanStack Router (Routing + Type-safety + Data loading contract) + Server rendering / deployment layer (SSR, Server Function execution) ↓ TanStack Start (এই সবকিছুকে একসাথে জুড়ে দেওয়া একটি coherent framework)

এর মানে হলো, TanStack Start শেখার সময় আপনি একই সাথে Vite-এর build process, Router-এর routing model, এবং server-side rendering-এর ধারণাগুলোও নতুনভাবে দেখতে পাবেন — এগুলো আলাদা আলাদা না থেকে একসাথে কাজ করে।

TanStack Start-এর মূল উদ্দেশ্যটা একটি বাক্যে ধরা যায়:

React দিয়ে শুধু "UI বানানো"-কে "একটি সম্পূর্ণ Web Application বানানো"-তে রূপান্তর করা — যেখানে Routing, Data loading, এবং Server-side logic সবকিছু একসাথে, একটি ecosystem-এর মধ্যে কাজ করে।

⚖️ ৬. TanStack Start বনাম সাধারণ React/Vite application

এখন দুটোকে পাশাপাশি রেখে পার্থক্যটা স্পষ্ট করা যাক।

🧩 সাধারণ React + Vite Application

✓ শুধু frontend/UI তৈরি করে
✓ Routing-এর জন্য আলাদা library লাগে
✓ Data সাধারণত client-এ fetch করা হয়
✓ Server-side logic-এর জন্য আলাদা backend দরকার
✓ Rendering সাধারণত CSR (Client-Side Rendering)

🏗️ TanStack Start Application

✓ Frontend এবং কিছু Server-side অংশ একই project-এ
✓ Routing built-in (TanStack Router ভিত্তিক)
✓ Route-এর সাথে যুক্ত Data loading-এর mechanism আছে
✓ Server Function-এর মাধ্যমে server-side logic লেখা যায়
✓ SSR সহ rendering সম্ভব

একটি তুলনামূলক টেবিল

বিষয়	React + Vite (সাধারণ)	TanStack Start
Routing	আলাদা library প্রয়োজন	Built-in (TanStack Router)
Rendering	মূলত CSR	SSR + CSR + Streaming উভয়ই সম্ভব
Server-side logic	আলাদা backend প্রয়োজন	Server Function দিয়ে একই project-এ সম্ভব
Data loading	Component mount হওয়ার পর fetch (waterfall ঝুঁকি)	Route-level loader দিয়ে পরিচালিত (render-এর আগে data প্রস্তুত)
প্রাথমিক HTML	প্রায় খালি (`<div id="root">`)	Server-এ render হওয়া content-সহ HTML (SSR সক্রিয় থাকলে)
Type-safety (Route params, search params)	Library-নির্ভর, সাধারণত manual	TanStack Router দিয়ে TypeScript inference সহ
Project ধরন	শুধু Frontend	Full-stack

এর মানে এই নয় যে সাধারণ React + Vite app "খারাপ"। ছোট, purely frontend প্রজেক্টের জন্য সেটাই যথেষ্ট। TanStack Start দরকার হয় তখন, যখন Routing, Data, এবং Server-side logic — সবকিছু একসাথে, সুসংগঠিত উপায়ে দরকার হয়।

🧱 ৭. TanStack Start-এর major building blocks

TanStack Start আসলে কয়েকটি অংশ একসাথে জোড়া দিয়ে কাজ করে। প্রতিটি অংশের একটি নির্দিষ্ট দায়িত্ব আছে।

TanStack Router ↓ Routing (কোন URL-এ কোন component দেখাবে) TanStack Start ↓ Routing + Server + Data + Rendering ↓ Full-stack Web Application

প্রতিটি অংশ গভীরভাবে

Route
ইংরেজি term: Route
সহজ বাংলায়: একটি নির্দিষ্ট URL-এর সাথে যুক্ত একটি "page" বা view। যেমন /, /about, /blog/1 — প্রতিটি একটি আলাদা Route।

File-based routing
ইংরেজি term: File-based routing
সহজ বাংলায়: Route তৈরি করার জন্য আলাদা config লেখার বদলে, src/routes/ ফোল্ডারের ভিতরে file তৈরি করলেই সেটা automatically একটি Route হয়ে যায়। File-এর নাম এবং অবস্থান (path) থেকেই URL structure বোঝা যায়।
উদাহরণ: src/routes/index.tsx ফাইলটি / path-এর Route তৈরি করে।

Server ও Client
ইংরেজি term: Server / Client
সহজ বাংলায়: Server হলো সেই মেশিন/প্রক্রিয়া যেখানে code চলে এবং response তৈরি করে পাঠায়। Client হলো ব্যবহারকারীর Browser, যেখানে সেই response দেখানো হয় এবং পরবর্তী interaction হয়।

SSR (Server-Side Rendering)
ইংরেজি term: SSR
সহজ বাংলায়: UI-টা প্রথমে Server-এ HTML হিসেবে তৈরি হয়ে যায়, তারপর Browser-এ পাঠানো হয়। ফলে ব্যবহারকারী দ্রুত content দেখতে পায়, JavaScript সম্পূর্ণ load হওয়ার আগেই।

Hydration
ইংরেজি term: Hydration
সহজ বাংলায়: Server থেকে পাঠানো "static" HTML-কে Browser-এ React "সচল" (interactive) করে তোলে — অর্থাৎ event handler, state ইত্যাদি যুক্ত করে। এই প্রক্রিয়াটাই Hydration।

Data Loading — গভীরভাবে ও একটি conceptual উদাহরণ

ইংরেজি term: Data loading (Route Loader)
সহজ বাংলায়: একটি Route render হওয়ার আগে বা সময়ে প্রয়োজনীয় data নিয়ে আসার প্রক্রিয়া। TanStack Start-এ এটি Route-এর সাথে সরাসরি যুক্ত করা যায় (loader নামের একটি configuration-এর মাধ্যমে), যাতে component render হওয়ার আগেই data প্রস্তুত থাকে — অংশ ২-এ আলোচিত "waterfall" সমস্যা অনেকটাই কমে যায়।

// এটি একটি সরলীকৃত conceptual উদাহরণ, // route-level data loading এর ধারণা বোঝানোর জন্য export const Route = createFileRoute('/posts')({ loader: async () => { const posts = await fetchPosts() return posts }, component: PostsPage, }) function PostsPage() { const posts = Route.useLoaderData() return ( <ul> {posts.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> ) }

লক্ষ্য করুন — এখানে data আনার কাজটি component render হওয়ার আগেই শুরু হয়ে যায় (Route match হওয়ার সাথে সাথে)। এর ফলে component-কে আর "প্রথমে খালি render, তারপর fetch, তারপর আবার render" — এই চক্র পার হতে হয় না।

Server Function — গভীরভাবে ও একটি conceptual উদাহরণ

ইংরেজি term: Server Function
সহজ বাংলায়: এমন একটি function, যেটা লেখা হয় একই codebase-এ, কিন্তু আসলে চলে Server-এ। Client থেকে এটি call করা গেলেও, এর ভিতরের code কখনো Browser-এ পাঠানো হয় না — যেমন database access বা secret key ব্যবহার এখানে নিরাপদে করা যায়।

// এটি একটি সরলীকৃত conceptual উদাহরণ, // Server Function এর ধারণা বোঝানোর জন্য const getServerTime = createServerFn({ method: 'GET' }).handler(async () => { // এই কোড শুধুমাত্র Server-এ চলে return { time: new Date().toISOString() } })

পরবর্তী অংশ ১৩-এ আমরা দেখব, Server Function ঠিক কীভাবে "network boundary" তৈরি করে — অর্থাৎ, কীভাবে Client থেকে call করা একটা সাধারণ function আসলে পর্দার আড়ালে একটা network request-এ রূপান্তরিত হয়ে যায়।

🧭 ৮. TanStack Router-এর ভূমিকা

আগেই বলা হয়েছে — TanStack Start, TanStack Router-এর উপর তৈরি। তাই এই সম্পর্কটা আরও গভীরভাবে বোঝা দরকার।

TanStack Router মূলত একটি type-safe routing library। এর কাজ হলো — কোন URL-এ ব্যবহারকারী গেলে কোন component দেখানো হবে, সেটা ঠিক করা। এর সাথে এটি Route-level data loading-এর mechanism-ও দেয়।

Route Tree — Routing-এর ভেতরের কাঠামো

যখন আপনি src/routes/ ফোল্ডারে একাধিক file তৈরি করেন, TanStack Router সবগুলো file মিলিয়ে একটি একক কাঠামো তৈরি করে, যাকে বলা হয় Route Tree।

ইংরেজি term: Route Tree
সহজ বাংলায়: সব Route মিলিয়ে তৈরি হওয়া একটি গাছের মতো (tree) কাঠামো, যেখানে একটি Root Route-এর নিচে বাকি সব Route এবং তাদের nested (child) Route-গুলো সাজানো থাকে। এই Tree-এর মাধ্যমেই Router বুঝতে পারে কোন URL-এর জন্য কোন Route (এবং কোন কোন nested layout) ব্যবহার করতে হবে।

Nested Routes এবং Layout

বাস্তব application-এ প্রায়ই দেখা যায় — একটি Navbar বা Sidebar সব page-এ একই থাকে, শুধু মাঝের content পাল্টায়। এই ধরনের কাঠামো তৈরি করতে ব্যবহৃত হয় Nested Route / Layout Route।

Root Route (__root.tsx) │ (Navbar, Footer এখানে থাকে সবসময়) │ ├── index.tsx → "/" ├── about.tsx → "/about" └── posts/ ├── index.tsx → "/posts" └── $postId.tsx → "/posts/:postId"

Outlet
সহজ বাংলায়: Parent Route-এর ভিতরে একটি বিশেষ জায়গা, যেখানে matched child Route-এর component render হয়ে বসে। যেমন Root Route-এ Navbar-এর নিচে একটি <Outlet /> থাকলে, সেখানে বর্তমান URL অনুযায়ী index.tsx বা about.tsx-এর content দেখানো হবে।

Type-safety — কেন এটা গুরুত্বপূর্ণ

ইংরেজি term: Type-safe routing
সহজ বাংলায়: TanStack Router, TypeScript-এর সাহায্যে Route path, URL parameter, এবং search parameter-গুলোর সঠিক type automatically বুঝে নিতে পারে। এর ফলে, ভুল path-এ Link দিলে বা ভুল নামে parameter ব্যবহার করলে, code চালানোর আগেই editor/compiler সেটা ধরিয়ে দেয়।

TanStack Start এই Router-কে ভিত্তি (foundation) হিসেবে ব্যবহার করে, এবং তার উপরে আরও কিছু জিনিস যোগ করে:

Server-এ code চালানোর ক্ষমতা (Server Function)
SSR (Server-Side Rendering) সহ page render করার ক্ষমতা
একটি সম্পূর্ণ full-stack project structure/deployment মডেল

TanStack Router → শুধু Routing + Route Tree + Type-safety পরিচালনা করে + Server-side ক্ষমতা, SSR, Deployment মডেল ↓ TanStack Start → একটি সম্পূর্ণ Full-stack Framework

সহজ কথায়: TanStack Router যদি হয় "কোন page কখন, কোন layout-এর ভিতরে দেখাবে" ঠিক করার নিয়ম, তাহলে TanStack Start হলো সেই নিয়মের উপর দাঁড় করানো একটি সম্পূর্ণ application কাঠামো — যেখানে Server, Data, এবং Rendering সবকিছু একসাথে যুক্ত হয়।

🎬 ৯. Rendering মডেল ডিপ-ডাইভ: CSR vs SSR vs Streaming vs Hydration

এই অংশটি এই পুরো Episode-এর সবচেয়ে গুরুত্বপূর্ণ, গভীর অংশ। কারণ TanStack Start-এর আসল শক্তি বোঝা যায় rendering model বোঝার মাধ্যমে।

CSR আরেকবার — Baseline হিসেবে

অংশ ২-এ আমরা CSR দেখেছি। সংক্ষেপে: Server শুধু খালি HTML পাঠায়, বাকি সব কাজ Browser-এ হয়।

SSR — Server আগে থেকেই HTML বানিয়ে দেয়

SSR টাইমলাইন (approximately): 0ms ────► Request পাঠানো হলো 100ms ────► Server-এ React component render হলো (HTML string তৈরি) 150ms ────► TTFB + সম্পূর্ণ content-সহ HTML Browser-এ পৌঁছালো 150ms ────► ব্যবহারকারী তখনই real content দেখতে পেল (এখনো ক্লিক করা যাবে না) 400ms ────► JS bundle download + execute সম্পন্ন হলো 400ms ────► Hydration সম্পন্ন → এখন page সম্পূর্ণ interactive (TTI) লক্ষ্য করুন: ব্যবহারকারী অনেক আগেই (150ms) content দেখতে পাচ্ছে, যদিও পুরোপুরি "interactive" হতে এখনও কিছুটা সময় লাগছে (400ms)।

মূল পার্থক্য: CSR-এ ব্যবহারকারী কিছু না দেখেই অপেক্ষা করে যতক্ষণ না JS চলে। SSR-এ ব্যবহারকারী প্রথমেই content দেখতে পায়, এবং তারপর ধীরে ধীরে page interactive হয়ে ওঠে।

Hydration আরও গভীরভাবে

Hydration শুধু "JavaScript যোগ করা" নয় — এটি একটি নির্দিষ্ট প্রক্রিয়া, যেখানে React Server থেকে পাঠানো HTML-কে স্ক্র্যাচ থেকে আবার না বানিয়ে, বিদ্যমান HTML structure-এর সাথে নিজের Virtual DOM-কে "মিলিয়ে নেয়" (match/reconcile করে), তারপর event listener যুক্ত করে।

Server-rendered HTML (static, non-interactive) ↓ Browser download করল React JS bundle execute হলো ↓ React বিদ্যমান HTML-এর সাথে নিজের component tree মিলিয়ে দেখল ("এটা কি একই কাঠামো?") ↓ মিলে গেলে → শুধু event listener যুক্ত হলো (দ্রুত) না মিললে → warning/mismatch, এবং React কিছু অংশ পুনরায় render করতে পারে (ধীর ও অনাকাঙ্ক্ষিত) ↓ Page সম্পূর্ণ interactive

এই কারণেই SSR ব্যবহার করার সময় খেয়াল রাখতে হয়, Server-এ render হওয়া HTML এবং Client-এ প্রথমবার render হতে যাওয়া output যেন একই রকম থাকে — একে Hydration mismatch এড়ানো বলা হয়।

Streaming SSR — একধাপ এগিয়ে

ইংরেজি term: Streaming SSR
সহজ বাংলায়: সাধারণ SSR-এ পুরো page-এর HTML সম্পূর্ণভাবে তৈরি না হওয়া পর্যন্ত Browser কিছুই পায় না। Streaming SSR-এ Server, HTML-এর যে অংশ প্রস্তুত হয়ে যায়, সেটুকু সাথে সাথেই পাঠাতে শুরু করে, বাকি অংশ (যেমন ধীর কোনো data-নির্ভর section) পরে "stream" করে পাঠায়। ফলে ব্যবহারকারী পুরো page তৈরি হওয়ার জন্য অপেক্ষা না করেই দ্রুততম অংশগুলো আগে দেখতে পায়।

সাধারণ SSR: [ ................ পুরো HTML তৈরি হওয়া পর্যন্ত অপেক্ষা ................ ] → পাঠানো হলো Streaming SSR: [ Header + দ্রুত অংশ পাঠানো হলো ] → [ ধীর অংশ প্রস্তুত হলে সেটাও পাঠানো হলো ] → সম্পূর্ণ

একনজরে চার rendering model

Model	প্রথম content কখন দেখা যায়	মূল সুবিধা	মূল সীমাবদ্ধতা
CSR	JS execute হওয়ার পরে	Server logic সহজ, static hosting সম্ভব	প্রথম load ধীর, SEO ঝুঁকি
SSR	Server response আসার সাথে সাথে	দ্রুত প্রথম content, ভালো SEO	Server-এ প্রতি request-এ render খরচ
Streaming SSR	প্রস্তুত অংশ সাথে সাথে, বাকিটা ধাপে ধাপে	ধীর data থাকলেও পুরো page আটকে থাকে না	বাস্তবায়ন জটিলতা কিছুটা বেশি
Hydration	(এটি একটি model নয়, একটি ধাপ)	Static HTML-কে interactive করে তোলে	Mismatch হলে সমস্যা হতে পারে

TanStack Start এই rendering কৌশলগুলো (SSR, প্রয়োজনে Streaming, এবং Hydration) ব্যবহার করার একটি কাঠামোগত উপায় দেয়, যাতে Developer-কে এগুলো একেবারে শূন্য থেকে নিজে বানাতে না হয়।

📦 ১০. Official Start Basic example

এবার আমরা TanStack-এর official documentation-এ থাকা সবচেয়ে সহজ উদাহরণটি দেখব। এটি "start-basic" example হিসেবে পরিচিত।

রেফারেন্স:
https://tanstack.com/start/latest/docs/framework/react/examples/start-basic

এই example-এ একটি খুবই ছোট Route রয়েছে, যেটি /src/routes/index.tsx নামের ফাইলে লেখা। এটাই একটি TanStack Start project-এর সবচেয়ে ছোট, প্রথম building block দেখায়: একটি single Route।

ফাইলের content নিচে দেওয়া হলো:

import { createFileRoute } from '@tanstack/react-router' export const Route = createFileRoute('/')({ component: Home, }) function Home() { return ( <div className="p-2"> <h3>Welcome Home!!!</h3> </div> ) }

এই code-টা দেখতে খুব সাধারণ React code-এর মতোই মনে হচ্ছে — এবং আসলে সেটাই ঠিক। TanStack Start-এ একটা Route মূলত একটা normal React component-ই, শুধু এটি একটি বিশেষ উপায়ে (createFileRoute) Routing system-এর সাথে যুক্ত করা।

🔍 ১১. Code walkthrough (লাইন ধরে ধরে)

এবার লাইন ধরে ধরে বুঝি এই ছোট্ট code-এ কী হচ্ছে।

লাইন ১: Import

import { createFileRoute } from '@tanstack/react-router'

createFileRoute একটি function, যা @tanstack/react-router package থেকে আসে। এর কাজ হলো একটি নির্দিষ্ট file-কে একটি Route হিসেবে define/register করা। এই function-টি আসলে একটি factory function — অর্থাৎ এটি নিজে কনফিগারেশন নেয় এবং একটি নতুন Route object তৈরি করে ফেরত দেয়।

লাইন ৩-৫: Route define করা

export const Route = createFileRoute('/')({ component: Home, })

createFileRoute('/') — এখানে '/' বলছে যে এই file, root URL (/) এর সাথে যুক্ত। লক্ষ্য করুন, এখানে দুটি ধাপে function call হচ্ছে: createFileRoute('/') প্রথমে path নেয়, তারপর সেটি একটি নতুন function ফেরত দেয়, যেটি আবার configuration object ({ component: Home }) নেয়। এই প্যাটার্নটিকে বলা হয় curried function — এভাবে path এবং config আলাদা করে দিলে TypeScript প্রতিটি Route-এর path অনুযায়ী সঠিক type infer করতে পারে।

{ component: Home } — এখানে বলা হচ্ছে, এই Route render হলে Home নামের component-টি দেখানো হবে।

export const Route = ... — এই Route object-টি export করা হচ্ছে, যাতে TanStack Router (এবং এর file-based routing generator) এটিকে চিনতে ও Route Tree-এ যুক্ত করতে পারে।

লাইন ৭-১৩: সাধারণ React Component

function Home() { return ( <div className="p-2"> <h3>Welcome Home!!!</h3> </div> ) }

এই Home function-টি আর দশটা সাধারণ React component-এর মতোই। এখানে কোনো বিশেষ syntax নেই — শুধু JSX return করা হচ্ছে। এখানেই মূল ধারণাটা স্পষ্ট হয়: TanStack Start-এ Route মানে হলো একটি normal React component, যেটাকে createFileRoute দিয়ে একটি path-এর সাথে যুক্ত করা হয়েছে।

এই Component টা কি Server-এ চলে, নাকি Client-এ?

উত্তর হলো: দুটোতেই। প্রথমে এটি Server-এ চলে HTML string তৈরি করার জন্য (SSR)। তারপর একই component code Browser-এ পাঠানো হয় এবং সেখানে আবার "চলে" Hydration-এর সময়, যাতে page interactive হয়ে ওঠে। এটাই অংশ ৫-এ আলোচিত "Isomorphic" ধারণার বাস্তব উদাহরণ।

🧠 ১২. Request Lifecycle: Browser থেকে Server, Server থেকে ফিরে আসা পর্যন্ত পুরো যাত্রা

এই অংশে আমরা একটি একক request-এর সম্পূর্ণ জীবনচক্র (lifecycle) ধাপে ধাপে দেখব — যখন ব্যবহারকারী / এই URL-এ যায়।

১. Browser একটি request পাঠায়: GET /

২. Server (TanStack Start-এর server entry) request-টি গ্রহণ করে।

৩. Server, TanStack Router-এর Route Tree-তে খুঁজে দেখে কোন Route / path-এর সাথে মেলে। এখানে সেটি src/routes/index.tsx।

৪. যদি এই Route-এ কোনো loader থাকে, Server প্রথমে সেটি চালিয়ে প্রয়োজনীয় data সংগ্রহ করে।

৫. Data (যদি থাকে) এবং matched component (Home) ব্যবহার করে Server, React-কে HTML string-এ render করতে বলে।

৬. এই HTML, প্রয়োজনীয় <script> ট্যাগসহ (যেগুলো JS bundle download করবে) Browser-এ পাঠানো হয়।

৭. Browser সাথে সাথেই এই HTML দেখাতে পারে — ব্যবহারকারী এখন content দেখছে।

৮. পাশাপাশি Browser, JS bundle download করতে থাকে।

৯. JS bundle load ও execute হলে, React সেই বিদ্যমান HTML-এর সাথে নিজের component tree মিলিয়ে Hydration সম্পন্ন করে।

১০. এখন page সম্পূর্ণ interactive — ব্যবহারকারী ক্লিক করতে, টাইপ করতে পারে।

Browser → URL: "/" ↓ Server → TanStack Router: Route Tree-তে "/" match করা হলো ↓ Matched Route → src/routes/index.tsx ↓ (যদি থাকে) loader চলল → data সংগ্রহ হলো ↓ Server → component (Home) + data দিয়ে HTML render করল (SSR) ↓ Browser → HTML পেল, সাথে সাথেই দেখাল ↓ Browser → JS bundle download করল ↓ React → বিদ্যমান HTML-এর সাথে মিলিয়ে Hydration করল ↓ Page সম্পূর্ণ Interactive (TTI)

Client-side Navigation-এর সময় কী পাল্টায়?

উপরের পুরো flow-টা হয় "প্রথমবার" page load হওয়ার সময় (hard navigation)। কিন্তু একবার page hydrate হয়ে গেলে, ব্যবহারকারী যদি একটি Link-এ ক্লিক করে অন্য একটি Route-এ যায়, তখন পুরো page আবার Server থেকে load করতে হয় না।

Client-side Navigation
সহজ বাংলায়: Hydration সম্পন্ন হওয়ার পরে, TanStack Router নিজেই নতুন URL-এর জন্য প্রয়োজনীয় component এবং data (loader-এর মাধ্যমে) নিয়ে আসে এবং শুধুমাত্র পরিবর্তিত অংশ পুনরায় render করে — সম্পূর্ণ HTML page আবার Server থেকে না এনেই। এটি একটি SPA (Single Page Application)-এর মতো অভিজ্ঞতা দেয়, কিন্তু প্রথম load-এ SSR-এর সুবিধা বজায় থাকে।

🔐 ১৩. Server Function ভেতরে ভেতরে কীভাবে কাজ করে?

Server Function এই পুরো framework-এর সবচেয়ে চমকপ্রদ (কিন্তু প্রায়ই ভুল বোঝা) অংশগুলোর একটি। চলুন এটি গভীরভাবে বুঝি।

একটি স্বাভাবিক প্রশ্ন

"আমি তো Client-side component থেকে সরাসরি একটা function call করছি। তাহলে এটা কীভাবে Server-এ চলে? এটা কি জাদু?"

না, জাদু নয় — এটি একটি build-time transformation। যখন আপনি একটি Server Function define করেন, বিল্ড টুল (bundler) এটিকে চিহ্নিত করে রাখে এবং দুই ভাবে ভাগ করে দেয়:

লেখার সময় (আপনি যা লেখেন): const getServerTime = createServerFn(...).handler(async () => { return { time: new Date().toISOString() } }) // Component-এর ভিতরে সরাসরি call করা হচ্ছে: const result = await getServerTime() বিল্ড টুল যা আসলে তৈরি করে (conceptually): ┌───────────────── Server bundle ─────────────────┐ │ getServerTime-এর আসল logic (handler) │ │ এখানে database access, secret ইত্যাদি নিরাপদ │ └───────────────────────────────────────────────────┘ ┌───────────────── Client bundle ─────────────────┐ │ getServerTime-এর "stub" (প্রতিনিধি) ভার্সন │ │ যেটি আসলে শুধু একটা network request পাঠায় │ │ Server-এর নির্দিষ্ট endpoint-এ │ └───────────────────────────────────────────────────┘

ইংরেজি term: Network boundary
সহজ বাংলায়: Server Function define করার মাধ্যমে আপনি আসলে Client এবং Server-এর মাঝে একটি স্পষ্ট "সীমানা" তৈরি করে দিচ্ছেন। এই সীমানার ওপারে (Server) যা থাকে, তা কখনো Client bundle-এ পাঠানো হয় না। Client শুধু জানে "এই ঠিকানায় request পাঠালে এই ধরনের response পাওয়া যাবে" — বাস্তবায়ন (implementation) সম্পূর্ণ লুকানো থাকে।

কেন এটা গুরুত্বপূর্ণ?

নিরাপত্তা: Database password, API secret key, বা internal business logic কখনো Browser-এ পাঠানো হয় না, কারণ সেই code Client bundle-এ থাকেই না।
Developer experience: Client এবং Server-এর জন্য আলাদা project/repo/API contract বানাতে হয় না — একই function import করে ব্যবহার করা যায়, framework নিজেই বাকি কাজ (network call তৈরি করা) সামলায়।
Type-safety: যেহেতু Server Function-এর input/output TypeScript দিয়ে typed, তাই Client থেকে call করার সময়েও সঠিক type পাওয়া যায় — আলাদা API schema লেখার দরকার হয় না।

সংক্ষেপে: Server Function দেখতে একটি সাধারণ JavaScript function-এর মতো, কিন্তু আচরণ করে একটি Client-Server API call-এর মতো। এটি "RPC (Remote Procedure Call)" ধারণার একটি আধুনিক, developer-friendly রূপ।

🚧 ১৪. Beginner-দের সাধারণ ভুল ধারণা এবং সেগুলোর সমাধান

এই পর্যায়ে অনেক beginner কয়েকটি সাধারণ ভুল ধারণায় পড়েন। আগে থেকেই এগুলো পরিষ্কার করে নেওয়া ভালো।

ভুল ধারণা	বাস্তবতা
"TanStack Start মানে React বাদ দিয়ে নতুন কিছু শেখা"	না। TanStack Start-এর Component-গুলো সাধারণ React component-ই। React-এর জ্ঞান পুরোপুরি কাজে লাগে।
"SSR মানে page সবসময় দ্রুত হবে"	SSR প্রথম content দেখানোর সময় কমায়, কিন্তু Server-এ render করার নিজস্ব খরচ (CPU, latency) আছে। সঠিক ব্যবহার না হলে ধীরও হতে পারে।
"Server Function মানে আমাকে আলাদা backend server চালাতে হবে"	না, একই project-এর মধ্যেই Server Function চলে; deploy করার সময় এটি framework-এর server layer-এর অংশ হিসেবেই চলে।
"File-based routing মানে config লেখা যাবে না"	File-এর গঠনই মূল config, কিন্তু প্রয়োজনে Route-এর ভিতরে loader, error handling ইত্যাদি configure করা যায়।
"Hydration মানে page আবার নতুন করে render হওয়া"	না, Hydration-এ existing HTML নতুন করে তৈরি হয় না — React শুধু তার সাথে "মিলিয়ে নেয়" এবং event listener যুক্ত করে।

🎯 ১৫. Beginner হিসেবে কোন concepts কোন ক্রমে শিখতে হবে?

পুরো TanStack Start একবারে শেখার চেষ্টা করলে বিভ্রান্ত হওয়া স্বাভাবিক। তাই একটা ধারাবাহিক order মেনে চলা ভালো।

ক্রম	বিষয়	কেন গুরুত্বপূর্ণ
১	Component ও JSX (React basics)	এটা না জানলে কোনো Route কোড বোঝা যাবে না
২	File-based Routing ও Route Tree	কীভাবে file → URL হয়ে যায়, এবং nested layout কীভাবে কাজ করে সেটা বোঝা দরকার
৩	Route ও `createFileRoute`	প্রতিটি page আসলে কীভাবে define হয়
৪	Data loading (Route loader)	Component render হওয়ার আগে data কীভাবে আনতে হয়, waterfall কীভাবে এড়ানো যায়
৫	Server Function ও Network boundary	Server-side logic কীভাবে নিরাপদে লেখা যায়
৬	SSR, Streaming SSR ও Hydration	Page কীভাবে Server থেকে Client-এ চলে আসে এবং interactive হয়
৭	Client-side Navigation	প্রথম load-এর পরে কীভাবে SPA-এর মতো দ্রুত navigation হয়

এই সিরিজ ঠিক এই ধারাবাহিকতা মেনেই এগোবে — একটার পর একটা concept, ছোট ছোট example ও গভীর ব্যাখ্যা সহ।

🛠️ ১৬. এই সিরিজে আমরা কী কী তৈরি করব?

এই Bangla সিরিজে আমরা ধাপে ধাপে একটি TanStack Start project তৈরি ও বোঝার চেষ্টা করব। মূল লক্ষ্য থাকবে:

একটি TanStack Start project তৈরি করা (পরবর্তী Episode থেকে শুরু)
একাধিক Route, Nested Layout ও File-based routing structure বোঝা
Route-level Data loading ব্যবহার করা
Server Function দিয়ে server-side logic লেখা এবং network boundary বাস্তবে দেখা
SSR, Streaming এবং Hydration বাস্তবে কীভাবে কাজ করে সেটা network tab-এ দেখে দেখে যাচাই করা
ধীরে ধীরে একটি ছোট, বাস্তব full-stack application তৈরি করা

প্রতিটি Episode-এ আমরা শুধু একটি নতুন ধারণা যোগ করব — যাতে কোনো ধাপে গিয়ে বিভ্রান্ত না হতে হয়, কিন্তু প্রতিটি ধারণা এতটাই গভীরভাবে ব্যাখ্যা করা হবে যাতে আপনি সেই বিষয়ে confidently কথা বলতে এবং কাজ করতে পারেন।

✅ ১৭. Conclusion

এই Episode-এ আমরা যা গভীরভাবে শিখলাম:

✓ React নিজে শুধু UI Component তৈরি করার একটি library, framework নয় — Virtual DOM ও Reconciliation এর মাধ্যমে এটি UI আপডেট করে
✓ CSR-এর সীমাবদ্ধতা: ধীর প্রথম load এবং data fetching waterfall
✓ TanStack একটি project family, যার মধ্যে Query, Table, Router, Start ইত্যাদি আছে
✓ TanStack Start একটি full-stack, isomorphic meta-framework, যা TanStack Router-এর উপর তৈরি
✓ TanStack Start, Routing + Server + Data + Rendering — সব একসাথে পরিচালনা করে
✓ Route Tree, Nested Route এবং Outlet কীভাবে layout তৈরি করে
✓ CSR, SSR, Streaming SSR এবং Hydration-এর মধ্যে সঠিক পার্থক্য এবং timeline
✓ Official "start-basic" example-এ createFileRoute('/') দিয়ে কীভাবে root Route তৈরি হয়, লাইন ধরে ধরে
✓ একটি request কীভাবে Browser থেকে Server ঘুরে আবার Browser-এ ফিরে আসে (সম্পূর্ণ lifecycle)
✓ Server Function কীভাবে build-time-এ Client/Server-এর মধ্যে একটি নিরাপদ network boundary তৈরি করে
✓ Beginner-দের সাধারণ কিছু ভুল ধারণা এবং তার সঠিক ব্যাখ্যা

এই মানসিক মডেল (mental model) এবং টেকনিক্যাল ভিত্তি নিয়ে এখন আমরা পরবর্তী ধাপে যেতে প্রস্তুত — নিজে হাতে একটি TanStack Start project তৈরি করা।

➡️ ১৮. Next Episode

পরবর্তী Episode: "TanStack Start Project তৈরি করা — প্রথম Application"

পরের পর্বে আমরা হাতে-কলমে একটি নতুন TanStack Start project সেটআপ করব, project structure দেখব, এবং প্রথম Route চালিয়ে দেখব — সাথে দেখব Network tab-এ SSR response ঠিক কেমন দেখতে হয়।

⬅ পূর্ববর্তী Episode (এটিই প্রথম পর্ব) পরবর্তী Episode: Project তৈরি করা ➡

TanStack Start কী?

📑 বিষয়বস্তু