+ {/* Top Navigation Bar */}
+
+
+
+
+
setSidebarOpen(!sidebarOpen)}
+ className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
+ aria-label="Toggle navigation menu"
+ >
+
+ {sidebarOpen ? (
+
+
+
+
TanStack RSC Examples
+
+
+
+
+
+
+ {/* Sidebar Overlay */}
+ {sidebarOpen && (
+
setSidebarOpen(false)}
+ />
+ )}
+
+ {/* Sidebar */}
+
+
+ {navItems.map((item) => (
+ {item.label}
+ {item.description}
+
+ ))}
+
+
+
+ {/* Main Content */}
+
+
+
+
+ );
+}
diff --git a/rsbuild/tanstack-start/src/e-Commerce/components/AddToCartButton.tsx b/rsbuild/tanstack-start/src/e-Commerce/components/AddToCartButton.tsx
new file mode 100644
index 00000000..33d494a9
--- /dev/null
+++ b/rsbuild/tanstack-start/src/e-Commerce/components/AddToCartButton.tsx
@@ -0,0 +1,80 @@
+import { useState } from 'react';
+import { useCartStore } from '~/e-Commerce/store/cartStore';
+
+// Product info passed from parent
+const product = {
+ id: 'tanstack-ukulele',
+ name: 'TanStack Ukulele',
+ price: 149.99,
+ image: '/example-ukelele-tanstack.jpg',
+};
+
+export function AddToCartButton() {
+ const [quantity, setQuantity] = useState(1);
+ const [added, setAdded] = useState(false);
+ const [favorite, setFavorite] = useState(false);
+ const addItem = useCartStore((state) => state.addItem);
+
+ const handleAddToCart = () => {
+ // Add item(s) to cart
+ for (let i = 0; i < quantity; i++) {
+ addItem(product);
+ }
+ setAdded(true);
+ setQuantity(1); // Reset quantity after adding
+ setTimeout(() => setAdded(false), 2000);
+ };
+
+ return (
+
+ {/* Quantity Selector */}
+
+
Quantity:
+
+ setQuantity(Math.max(1, quantity - 1))}
+ className="px-3 py-2 hover:bg-gray-100 transition-colors"
+ >
+ -
+
+
+ {quantity}
+
+ setQuantity(quantity + 1)}
+ className="px-3 py-2 hover:bg-gray-100 transition-colors"
+ >
+ +
+
+
+
+
+ {/* Action Buttons */}
+
+
+ {added ? '✓ Added to Bag!' : `Add to Bag${quantity > 1 ? ` (${quantity})` : ''}`}
+
+
+ setFavorite(!favorite)}
+ className={`px-4 py-3 rounded-lg border-2 transition-all ${
+ favorite
+ ? 'border-red-500 bg-red-50 text-red-500'
+ : 'border-gray-300 hover:border-gray-400'
+ }`}
+ aria-label={favorite ? 'Remove from favorites' : 'Add to favorites'}
+ >
+ {favorite ? '❤️' : '🤍'}
+
+
+
+ {/* Info text */}
+
Free shipping on orders over $100
+
+ );
+}
diff --git a/rsbuild/tanstack-start/src/e-Commerce/components/AlsoBoughtCarousel.tsx b/rsbuild/tanstack-start/src/e-Commerce/components/AlsoBoughtCarousel.tsx
new file mode 100644
index 00000000..f437579c
--- /dev/null
+++ b/rsbuild/tanstack-start/src/e-Commerce/components/AlsoBoughtCarousel.tsx
@@ -0,0 +1,83 @@
+import { useRef } from 'react';
+import type { AlsoBoughtProduct } from '~/e-Commerce/server-functions';
+
+interface AlsoBoughtCarouselProps {
+ products: Array
;
+}
+
+export function AlsoBoughtCarousel({ products }: AlsoBoughtCarouselProps) {
+ const scrollRef = useRef(null);
+
+ const scroll = (direction: 'left' | 'right') => {
+ if (scrollRef.current) {
+ const scrollAmount = 300;
+ scrollRef.current.scrollBy({
+ left: direction === 'left' ? -scrollAmount : scrollAmount,
+ behavior: 'smooth',
+ });
+ }
+ };
+
+ return (
+
+
+ {/* Left scroll button */}
+
scroll('left')}
+ className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white/90 hover:bg-white shadow-lg rounded-full p-2 transition-all"
+ aria-label="Scroll left"
+ >
+
+
+
+
+ {/* Scrollable container */}
+
+ {products.map((product) => (
+
+
+
+
{product.name}
+
${product.price}
+
+
+ ))}
+
+
+ {/* Right scroll button */}
+
scroll('right')}
+ className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white/90 hover:bg-white shadow-lg rounded-full p-2 transition-all"
+ aria-label="Scroll right"
+ >
+
+
+
+
+
{
+ const encoder = new TextEncoder();
+ return new ReadableStream({
+ start(controller) {
+ controller.enqueue(encoder.encode(payload));
+ controller.close();
+ },
+ });
+}
+
+// Format relative time
+function formatRelativeTime(receivedAt: number): string {
+ const seconds = Math.floor((Date.now() - receivedAt) / 1000);
+ if (seconds < 1) return 'just now';
+ if (seconds === 1) return '1 second ago';
+ return `${seconds} seconds ago`;
+}
+
+const MAX_COMMENTS = 10;
+
+export function StreamingComments() {
+ const [comments, setComments] = useState>([]);
+ const [isStreaming, setIsStreaming] = useState(false);
+ const [, setTick] = useState(0); // Force re-render for relative time updates
+ const hasStartedRef = useRef(false);
+
+ // Update relative times every second
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setTick((t) => t + 1);
+ }, 1000);
+ return () => clearInterval(interval);
+ }, []);
+
+ // Auto-start streaming on mount
+ useEffect(() => {
+ if (hasStartedRef.current) return;
+ hasStartedRef.current = true;
+
+ const startStream = async () => {
+ setIsStreaming(true);
+
+ try {
+ for await (const { id, payload } of await streamComments()) {
+ // Decode the RSC payload
+ const stream = payloadToStream(payload);
+ const element = await createFromReadableStream(stream);
+
+ const entry: CommentEntry = {
+ id,
+ element: element as React.ReactNode,
+ receivedAt: Date.now(),
+ };
+
+ // Add to comments, keeping newest at top, capped at MAX_COMMENTS
+ setComments((prev) => [entry, ...prev].slice(0, MAX_COMMENTS));
+ }
+ } catch (error) {
+ console.error('Streaming error:', error);
+ } finally {
+ setIsStreaming(false);
+ }
+ };
+
+ startStream();
+ }, []);
+
+ return (
+
+ {isStreaming && (
+
+
+
Streaming live reviews...
+
+ )}
+
+
+ {comments.length === 0 ? (
+
+ ) : (
+ comments.map((comment) => (
+
+ {/* The RSC element */}
+ {comment.element}
+ {/* Client-side relative time */}
+
+ received {formatRelativeTime(comment.receivedAt)}
+
+
+ ))
+ )}
+
+
+ {comments.length > 0 && (
+
+ Showing {comments.length} of {MAX_COMMENTS} reviews (newest first)
+
+ )}
+
= [
+ {
+ id: 'guitar-flowers',
+ name: 'Floral Guitar',
+ price: 299.99,
+ image: '/example-guitar-flowers.jpg',
+ },
+ {
+ id: 'guitar-motherboard',
+ name: 'Circuit Guitar',
+ price: 349.99,
+ image: '/example-guitar-motherboard.jpg',
+ },
+ {
+ id: 'guitar-racing',
+ name: 'Racing Guitar',
+ price: 279.99,
+ image: '/example-guitar-racing.jpg',
+ },
+ {
+ id: 'guitar-steamer-trunk',
+ name: 'Vintage Guitar',
+ price: 399.99,
+ image: '/example-guitar-steamer-trunk.jpg',
+ },
+ {
+ id: 'guitar-superhero',
+ name: 'Hero Guitar',
+ price: 329.99,
+ image: '/example-guitar-superhero.jpg',
+ },
+];
+
+// ============================================
+// Product Page Server Function
+// ============================================
+
+export const getProductPage = createServerFn().handler(async () => {
+ console.log('[Server] Rendering ProductPage composite');
+
+ const src = await createCompositeComponent(
+ (props: {
+ children?: React.ReactNode;
+ renderAlsoBought?: (data: { products: Array }) => React.ReactNode;
+ }) => (
+
+ {/* Product Hero Section */}
+
+ {/* Product Image */}
+
+
+
+
+ {/* Product Details */}
+
+
{mainProduct.name}
+
{mainProduct.description}
+
${mainProduct.price}
+
+ {/* CTA Slot (client component) */}
+
{props.children}
+
+
+
+ {/* Also Bought Section */}
+
+
+ Customers who bought this also bought
+
+
+ {props.renderAlsoBought?.({ products: alsoBoughtProducts })}
+
+
+
+
+
{author}
+
+ {Array.from({ length: rating }).map((_, i) => (
+ ⭐
+ ))}
+
+
+
{text}
+
+ Posted: {new Date(timestamp).toLocaleTimeString()}
+
+
): Promise {
+ const reader = stream.getReader();
+ const chunks: Array = [];
+ const decoder = new TextDecoder();
+
+ while (true) {
+ const { done, value } = await reader.read();
+ if (done) break;
+ chunks.push(decoder.decode(value, { stream: true }));
+ }
+
+ return chunks.join('');
+}
+
+function sleep(ms: number) {
+ return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+// Async generator that streams comment RSCs
+export const streamComments = createServerFn().handler(async function* () {
+ for (let i = 0; i < comments.length; i++) {
+ await sleep(2000); // Wait 2 seconds between comments
+
+ const comment = comments[i];
+ console.log(`[Server] Rendering comment from ${comment.author}`);
+
+ const stream = await renderToReadableStream(
+ ;
+ totalItems: number;
+ totalPrice: number;
+ addItem: (item: Omit) => void;
+ removeItem: (id: string) => void;
+ updateQuantity: (id: string, quantity: number) => void;
+ clearCart: () => void;
+}
+
+export const useCartStore = create((set, get) => ({
+ items: [],
+ totalItems: 0,
+ totalPrice: 0,
+
+ addItem: (item) => {
+ const { items } = get();
+ const existingItem = items.find((i) => i.id === item.id);
+
+ if (existingItem) {
+ set({
+ items: items.map((i) => (i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i)),
+ totalItems: get().totalItems + 1,
+ totalPrice: get().totalPrice + item.price,
+ });
+ } else {
+ set({
+ items: [...items, { ...item, quantity: 1 }],
+ totalItems: get().totalItems + 1,
+ totalPrice: get().totalPrice + item.price,
+ });
+ }
+ },
+
+ removeItem: (id) => {
+ const { items } = get();
+ const item = items.find((i) => i.id === id);
+ if (item) {
+ set({
+ items: items.filter((i) => i.id !== id),
+ totalItems: get().totalItems - item.quantity,
+ totalPrice: get().totalPrice - item.price * item.quantity,
+ });
+ }
+ },
+
+ updateQuantity: (id, quantity) => {
+ const { items } = get();
+ const item = items.find((i) => i.id === id);
+ if (item) {
+ const diff = quantity - item.quantity;
+ set({
+ items: items.map((i) => (i.id === id ? { ...i, quantity } : i)),
+ totalItems: get().totalItems + diff,
+ totalPrice: get().totalPrice + item.price * diff,
+ });
+ }
+ },
+
+ clearCart: () => {
+ set({
+ items: [],
+ totalItems: 0,
+ totalPrice: 0,
+ });
+ },
+}));
diff --git a/rsbuild/tanstack-start/src/home/server-functions.tsx b/rsbuild/tanstack-start/src/home/server-functions.tsx
new file mode 100644
index 00000000..271f02a8
--- /dev/null
+++ b/rsbuild/tanstack-start/src/home/server-functions.tsx
@@ -0,0 +1,93 @@
+import { createServerFn } from '@tanstack/react-start';
+import { createCompositeComponent } from '@tanstack/react-start/rsc';
+
+export interface DemoInfo {
+ title: string;
+ description: string;
+ path: string;
+ features: Array;
+ color: string;
+}
+
+const demos: Array = [
+ {
+ title: 'eCommerce Composite Demo',
+ description:
+ 'A product page built with composite server components. Shows how to combine server-rendered layouts with client-interactive elements like add-to-cart buttons and carousels.',
+ path: '/e-commerce',
+ features: [
+ 'Composite RSC pattern',
+ 'Zustand cart state',
+ 'Streaming comments',
+ 'Also bought carousel',
+ ],
+ color: 'from-purple-500 to-indigo-600',
+ },
+ {
+ title: 'Pokemon RSC Demo',
+ description:
+ 'Demonstrates async server components that fetch their own data. The Pokemon list is fetched and rendered entirely on the server.',
+ path: '/pokemon-rsc',
+ features: ['Async server components', 'Server-side data fetching', 'renderServerComponent API'],
+ color: 'from-amber-500 to-orange-500',
+ },
+ {
+ title: 'Low-Level RSC API Demo',
+ description:
+ "Explore TanStack Start's low-level Flight stream APIs including renderToReadableStream, createFromReadableStream, and createFromFetch.",
+ path: '/low-level-api',
+ features: [
+ 'Direct Flight streams',
+ 'Parallel streaming',
+ 'Nested Suspense',
+ 'IndexedDB caching',
+ 'HTTP streaming ticker',
+ ],
+ color: 'from-cyan-500 to-blue-600',
+ },
+];
+
+// Server function to get the home page composite
+export const getHomePage = createServerFn().handler(async () => {
+ console.log('[Server] Rendering HomePage composite');
+
+ const src = await createCompositeComponent(
+ (props: { renderDemoCard?: (data: { demo: DemoInfo }) => React.ReactNode }) => (
+
+
+ {/* Hero Section */}
+
+
+ React Server Components Examples
+
+
+ Explore different patterns and APIs for building applications with React Server
+ Components in TanStack Start.
+
+
+
+ {/* Demo Cards */}
+
+ {demos.map((demo) => (
+
{props.renderDemoCard?.({ demo })}
+ ))}
+
+
+ {/* Quick Info */}
+
+
About These Examples
+
+ These examples demonstrate various React Server Component patterns available in
+ TanStack Start. Server components are rendered on the server and sent to the client as
+ a Flight stream. Client components handle interactivity and state management. The
+ visual indicators in the footer show which parts are server-rendered (blue) vs
+ client-interactive (green).
+
+
+
+
+
+
{title}
+
{description}
+
{children}
+
+ );
+}
diff --git a/rsbuild/tanstack-start/src/low-level/components/dexie-cache/DexieCacheDemo.tsx b/rsbuild/tanstack-start/src/low-level/components/dexie-cache/DexieCacheDemo.tsx
new file mode 100644
index 00000000..c8d9eaa9
--- /dev/null
+++ b/rsbuild/tanstack-start/src/low-level/components/dexie-cache/DexieCacheDemo.tsx
@@ -0,0 +1,185 @@
+import { useCallback, useEffect, useState } from 'react';
+import { createFromReadableStream } from '@tanstack/react-start/rsc';
+
+import { db } from '../../db';
+import { getCounterRscPayload } from './server-functions';
+
+// Convert string payload back to ReadableStream
+function payloadToStream(payload: string): ReadableStream {
+ const encoder = new TextEncoder();
+ return new ReadableStream({
+ start(controller) {
+ controller.enqueue(encoder.encode(payload));
+ controller.close();
+ },
+ });
+}
+
+export function DexieCacheDemo() {
+ const [counter, setCounter] = useState(0);
+ const [result, setResult] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [source, setSource] = useState<'cache' | 'server' | null>(null);
+ const [cacheStats, setCacheStats] = useState({ count: 0, size: 0 });
+ const [loadTime, setLoadTime] = useState(null);
+
+ // Load cache stats on mount and after operations
+ const updateCacheStats = useCallback(async () => {
+ const entries = await db.cache.toArray();
+ const totalSize = entries.reduce((sum, e) => sum + e.payload.length, 0);
+ setCacheStats({ count: entries.length, size: totalSize });
+ }, []);
+
+ const loadRsc = useCallback(
+ async (count: number) => {
+ setLoading(true);
+ setSource(null);
+ setLoadTime(null);
+ const startTime = performance.now();
+
+ try {
+ const cacheKey = `counter-${count}`;
+
+ // Check if cached in Dexie
+ const cached = await db.cache.get(cacheKey);
+
+ if (cached) {
+ // Load from cache
+ console.log(`[Client] Cache HIT for counter: ${count}`);
+ const stream = payloadToStream(cached.payload);
+ const element = await createFromReadableStream(stream);
+ setResult(element as React.ReactNode);
+ setSource('cache');
+ } else {
+ // Fetch from server
+ console.log(`[Client] Cache MISS for counter: ${count}`);
+ const { payload } = await getCounterRscPayload({ data: { count } });
+
+ // Store in Dexie
+ await db.cache.put({
+ id: cacheKey,
+ payload,
+ createdAt: Date.now(),
+ });
+
+ // Decode and render
+ const stream = payloadToStream(payload);
+ const element = await createFromReadableStream(stream);
+ setResult(element as React.ReactNode);
+ setSource('server');
+ await updateCacheStats();
+ }
+
+ setLoadTime(performance.now() - startTime);
+ } catch (error) {
+ console.error('Error loading RSC:', error);
+ } finally {
+ setLoading(false);
+ }
+ },
+ [updateCacheStats],
+ );
+
+ // Auto-load RSC when counter changes
+ useEffect(() => {
+ loadRsc(counter);
+ }, [counter, loadRsc]);
+
+ // Load cache stats on mount
+ useEffect(() => {
+ updateCacheStats();
+ }, [updateCacheStats]);
+
+ const clearCache = useCallback(async () => {
+ await db.cache.clear();
+ await updateCacheStats();
+ setResult(null);
+ setSource(null);
+ setLoadTime(null);
+ }, [updateCacheStats]);
+
+ return (
+
+ {/* Counter controls */}
+
+
setCounter((c) => Math.max(0, c - 1))}
+ disabled={loading}
+ className="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 disabled:opacity-50 transition-colors font-bold"
+ >
+ -
+
+
{counter}
+
setCounter((c) => c + 1)}
+ disabled={loading}
+ className="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 disabled:opacity-50 transition-colors font-bold"
+ >
+ +
+
+
+ Clear Cache
+
+
+
+ {/* Cache stats */}
+
+
+ Cached entries: {' '}
+ {cacheStats.count}
+
+
+ Cache size: {' '}
+ {(cacheStats.size / 1024).toFixed(2)} KB
+
+
+
+ {/* Source indicator */}
+ {loading ? (
+
+ ) : (
+ source && (
+
+
+
+ {source === 'cache' ? 'Loaded from Dexie cache' : 'Fetched from server'}
+
+ {loadTime !== null && (
+
({loadTime.toFixed(1)}ms)
+ )}
+
+ )
+ )}
+
+ {/* Result */}
+ {result && (
+
+
RSC for Counter #{counter}:
+ {result}
+
+ )}
+
+ {/* How it works */}
+
+ How it works: When you change the counter, the app automatically checks
+ Dexie (IndexedDB) for a cached Flight payload. If found, it decodes the cached string
+ directly. If not found, it fetches from the server, stores the payload in Dexie, then
+ decodes it. Each counter value gets its own cache entry with unique server-generated data.
+
+
+
+
+
Counter #{count}
+
Theme: {color.name}
+
+
+
{randomValue}
+
Random Value
+
+
+
Generated: {timestamp}
+
= [];
+ const decoder = new TextDecoder();
+
+ while (true) {
+ const { done, value } = await reader.read();
+ if (done) break;
+ chunks.push(decoder.decode(value, { stream: true }));
+ }
+
+ const payload = chunks.join('');
+ console.log(`[Server] Flight payload size: ${payload.length} bytes`);
+
+ return { payload, count: data.count };
+ });
diff --git a/rsbuild/tanstack-start/src/low-level/components/direct-flight/DirectFlightStreamDemo.tsx b/rsbuild/tanstack-start/src/low-level/components/direct-flight/DirectFlightStreamDemo.tsx
new file mode 100644
index 00000000..4ab75123
--- /dev/null
+++ b/rsbuild/tanstack-start/src/low-level/components/direct-flight/DirectFlightStreamDemo.tsx
@@ -0,0 +1,52 @@
+import { useCallback, useState } from 'react';
+import { createFromReadableStream } from '@tanstack/react-start/rsc';
+
+import { getFlightStreamDirect } from './server-functions';
+
+export function DirectFlightStreamDemo() {
+ const [result, setResult] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [streamInfo, setStreamInfo] = useState('');
+
+ const loadStream = useCallback(async () => {
+ setLoading(true);
+ setStreamInfo('Fetching Flight stream from server function...');
+
+ try {
+ const stream = await getFlightStreamDirect();
+ setStreamInfo('Decoding Flight stream with createFromReadableStream...');
+
+ // Use createFromReadableStream to decode the Flight stream
+ const element = await createFromReadableStream(stream);
+ setResult(element as React.ReactNode);
+ setStreamInfo('Stream decoded successfully!');
+ } catch (error) {
+ setStreamInfo(`Error: ${error}`);
+ } finally {
+ setLoading(false);
+ }
+ }, []);
+
+ return (
+
+
+ {loading ? 'Loading...' : 'Load Flight Stream'}
+
+
+ {streamInfo && (
+
{streamInfo}
+ )}
+
+ {result && (
+
+
Server-Rendered Content:
+ {result}
+
+ )}
+
+
Hello, {name}!
+
Rendered on the server at: {timestamp}
+
(null);
+ const [loading, setLoading] = useState(false);
+
+ const loadFromApi = useCallback(async () => {
+ setLoading(true);
+ try {
+ // Use createFromFetch to decode a Flight stream from a fetch response
+ const element = await createFromFetch(fetch('/api/rsc'));
+ setResult(element as React.ReactNode);
+ } catch (error) {
+ console.error('Error fetching RSC:', error);
+ } finally {
+ setLoading(false);
+ }
+ }, []);
+
+ return (
+
+
+ {loading ? 'Fetching...' : 'Fetch from /api/rsc'}
+
+
+ {result && (
+
+
API Route Response:
+ {result}
+
+ )}
+
(null);
+ const [loading, setLoading] = useState(false);
+
+ const loadNested = useCallback(async () => {
+ setLoading(true);
+ try {
+ const stream = await getNestedServerComponent();
+ const element = await createFromReadableStream(stream);
+ setResult(element as React.ReactNode);
+ } catch (error) {
+ console.error('Error:', error);
+ } finally {
+ setLoading(false);
+ }
+ }, []);
+
+ return (
+
+
+ {loading ? 'Loading...' : 'Load Nested Components'}
+
+
+ {result && (
+
+
+ Nested Server Components with Suspense:
+
+
Loading... }>{result}
+
+ 
+