Standard HTML Links
Basic HTML navigation with no optimizations (baseline)
Next.js SPA
Client-side routing with loading states and skeleton components
Speculation rules + View Transitions
Speculation Rules for instant page preloading with the CSS View Transitions API to deliver seamless, native-like navigation
Speculation rules + Loading UI
Speculation Rules for instant navigation while integrating Next.js Loading UI to keep transitions smooth and user-friendly
Quicklink + View Transitions
prefetching links with Quicklink and enhance the user experience with smooth page transitions powered by the CSS View Transitions API
Quicklink + Loading UI
prefetching links with Quicklink while maintaining a seamless experience with Next.js Loading UI
Compare Navigation Approaches
Each approach fetches real product data from the Fake Store API. Compare different navigation strategies, from basic HTML links to advanced prefetching with view transitions or loading states.
Navigation Types:
- • Standard: Basic HTML links
- • SPA: Client-side routing
- • View Transitions: CSS @view-transition
- • Loading States: Next.js skeleton UI
- • Prefetching: Speculation Rules & Quicklink
What to observe:
- • Loading speed differences
- • Visual continuity vs loading states
- • Prefetch behavior in Network tab
- • Smooth vs instant transitions
- • Page reload vs client navigation
Testing Tips:
- • Open DevTools Network tab
- • Test with slow 4g throttling
- • Navigate between products
- • Compare prefetch timing
- • Use Chrome 126+ for full support