Instant URL search params in Next.js

February 1st, 2024//Ep. 180

Sam and Ryan discuss the intuition behind React Transitions, and why React’s new useOptimistic hook is a good fit for building a URL-driven filter panel that stays fully responsive to client interactions.

Timestamps

  • Intro
  • The problem: In a world of Server Components, URL updates are blocked by a server-side roundtrip
  • Attempted solution: Use the browser’s Native History API (history.pushState)
  • Realization: The source of truth flips from server to client during the transition – which is exactly what useOptimistic was designed for
  • Unwinding our mental model of client-first React apps by thinking about how HTML-only checkout forms work
  • The intuition behind React Transitions, and how they put our UI into a state of preparation
  • How Transitions improve upon default browser behavior by keeping our current UI 100% responsive, and how useOptimistic solves the checkbox filter panel
  • Ryan’s take: It’s a bonus when tools make you feel smart, but it’s more important for them to not make you feel dumb