Sharing my Learning and Experience Building Tanstack Faster With Tanstack Start & Cloudflare

In this talk, I’ll share what I learned while building tanstack-faster, a high-performance e-commerce template powered by TanStack Start, TanStack Router, TanStack Query, and the Cloudflare edge ecosystem, inspired by NextFaster.

I’ll walk through the architectural decisions, caching strategies, image optimization techniques, and intelligent preloading patterns that help real-world applications feel fast without driving up infrastructure costs.

This session is for engineers who genuinely care about the performance of their full-stack applications.

Problem Space

Next.js is currently the most widely adopted full-stack React framework. While it works well for many use cases, it is increasingly becoming bloated and over-generalized, especially when performance, cost, and control matter.

In this talk, I want to explore TanStack Start as a modern alternative that does not compromise on either speed or developer experience and Control, and show how developers can:

• deliver instant navigations and content-rich pages,

• manage complex data flows and caching across client and edge servers,

• optimize heavy media like images,

• keep global infrastructure costs predictable and low.

Most starter templates stop at scaffolding. tanstack-faster focuses on integrated performance patterns using type-safe full-stack React, advanced data strategies, and edge-first economics.

What You’ll Demonstrate

Real Architecture Overview

A walkthrough of the complete stack:

• TanStack Start for full-stack SSR and streaming

• TanStack Router for type-safe routing and intelligent preloading

• TanStack Query for client-side caching and state orchestration

• Cloudflare Workers, KV, D1, and R2 for edge compute, caching, databases, and asset storage

Advanced Performance Techniques

Concrete techniques used in the project:

Image Optimization

• Cloudflare Image Transformations with dynamic width and quality strategies

• Intent-based preloading (hover / touchstart) with an LRU cache to avoid memory leaks

Preloading

• Leveraging TanStack Router’s preload APIs to remove data waterfalls and make navigations feel instant

Multi-Level Caching

• Cloudflare edge cache → Cloudflare KV → browser cache via TanStack Query

• Designing cache layers to balance performance, correctness, and cost

Cloudflare Edge Stack in Action

How Cloudflare enables the architecture:

• Workers for global SSR and routing

• D1 as a low-latency, SQLite-compatible edge database

• R2 for cost-effective object storage

• KV for hot data caching at the edge

• A composable, performance-first architecture for full-stack React apps

• Practical patterns for image optimization and multi-layer caching

• Lesser-known TanStack Start features that directly improve performance

• A realistic understanding of how to deploy globally on the edge without overspending

• End-to-end application performance with strong TypeScript guarantees

• Modern caching and preloading strategies that scale

• Real edge deployment insights beyond marketing slides

• Balancing performance engineering with developer ergonomics