Next.js Loading States Demo

Learn how to implement spinners, skeletons, and loading states in Next.js App Router with Tailwind CSS.

Server Component Streaming

Server Component with streaming SSR - fetches data on server and progressively renders

View Demo →

Client use() Hook

Client Component using React use() hook - modern pattern for client-side fetching

View Demo →

useState Loader

Products catalog with traditional useState loading state and full-page spinner

View Demo →

Three Loading Patterns Explained

This demo compares three different approaches to loading states in Next.js App Router:

Server Component with Streaming

Data fetches on the server. Static content renders instantly (~50ms) while dynamic parts stream in when ready. Best performance and SEO.

Client Component with use() Hook

Modern React 19 pattern. Fetches from browser using the use() hook. Cleaner syntax than useState but same client-side behavior.

Client Component with useState

Traditional React pattern. Full manual control over loading, error, and success states. Great for complex state management.