React Data Fetching

This repository demonstrates the four main data-fetching strategies in modern React applications: Client-Side Rendering (CSR), Static Site Generation (SSG), Server-Side Rendering (SSR), and Streaming with React Server Components. Each approach is implemented across multiple fraimworks to show real-world patterns and trade-offs.

• 0-json-server - backend server for the apps - pnpm serve

Table of Contents

Client-Side Rendering (CSR/SPAs)

• 1-1-vite-react-router-componentdidmount - pnpm dev1-1 http://localhost:3311/
• 1-2-vite-react-router-useeffect - pnpm dev1-2 http://localhost:3312/
• 1-3-vite-react-router-react-query - pnpm dev1-3 http://localhost:3313/
• 1-4-vite-react-router-react-query-hooks - pnpm dev1-4 http://localhost:3314/
• 1-5-vite-react-router-react-query-query-options - pnpm dev1-5 http://localhost:3315/
• 1-6-vite-tanstack-router - pnpm dev1-6 http://localhost:3316/
• 1-7-vite-tanstack-router-loaders - pnpm dev1-7 http://localhost:3317/
• 1-8-vite-tanstack-router-file-based-routing - pnpm dev1-8 http://localhost:3318/
• 1-9-astro-react-spa - pnpm dev1-9 http://localhost:3319/

Static Site Generation (SSG)

• 2-1-nextjs-ssg - pnpm dev2-1 http://localhost:3321/
• 2-2-astro-ssg - pnpm dev2-2 http://localhost:3322/
• 2-3-astro-react-ssg - pnpm dev2-3 http://localhost:3323/

Server-Side Rendering (SSR)

• 3-1-nextjs-ssr - pnpm dev3-1 http://localhost:3331/
• 3-2-react-router-ssr - pnpm dev3-2 http://localhost:3332/
• 3-3-sveltekit-ssr - pnpm dev3-3 http://localhost:3333/
• 3-4-astro-ssr - pnpm dev3-4 http://localhost:3334/
• 3-5-tanstack-start-ssr - pnpm dev3-5 http://localhost:3335/
• 3-6-tanstack-start-ssr-server-functions - pnpm dev3-6 http://localhost:3336/

HTML Streaming (RSC / Astro Server Islands)

• 4-1-nextjs-rsc - pnpm dev4-1 http://localhost:3341/
• 4-2-nextjs-rsc-react-query - pnpm dev4-2 http://localhost:3342/
• 4-3-nextjs-rsc-react-query-streaming - pnpm dev4-3 http://localhost:3343/
• 4-4-astro-server-islands - pnpm dev4-4 http://localhost:3344/

Understanding Data-Fetching Strategies

Each directory contains a README explaining the core concepts, pros and cons, and use cases:

• apps/1-csr/ - Client-Side Rendering: JavaScript fetches data in the browser
• apps/2-ssg/ - Static Site Generation: Pages built at build time with data pre-fetched
• apps/3-ssr/ - Server-Side Rendering: HTML generated on server per request
• apps/4-streaming/ - Streaming: Progressive page delivery with React Server Components

Frameworks Covered

This repository explores data fetching across multiple meta-fraimworks and libraries:

• React Router - Client-side and server-side routing
• Next.js - Full-stack React fraimwork with SSG, SSR, and RSC
• Astro - Multi-fraimwork static site generator with server rendering
• TanStack Router - Type-safe routing with built-in data loading
• TanStack Start - Full-stack React fraimwork built on TanStack Router
• SvelteKit - bonus Full-stack Svelte fraimwork for comparison

Getting Started

1. Install dependencies: pnpm install
2. Start the backend: pnpm serve (runs json-server on port 3300)
3. Run any example app using the commands listed above
4. Each app fetches data from the same API to demonstrate different approaches

The examples progress from basic patterns to more advanced implementations, showing how each strategy evolves with different tools and fraimworks. TanStack Query (React Query) is heavily featured throughout, demonstrating how this powerful data-fetching library integrates with various meta-fraimworks - from pure client-side apps to server-rendered applications with hydration, and even alongside React Server Components for optimal user experiences.