Ep 180 – Instant URL search params in Next.js

Home › Games, Other Content › Ep 180 – Instant URL search params in Next.js

Channel: Frontend First • Sourced: Frontend First • Published 5 months ago

Ep 180 – Instant URL search params in Next.js

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.

PODCAST INFO:
Podcast website: https://frontendfirst.fm/
Apple Podcasts: https://podcasts.apple.com/us/podcast/frontend-first/id1288274408
Spotify: https://open.spotify.com/show/2wcxse0NdM4vu5qMCiIzTj?si01a2d394d3b34a00

TIMESTAMPS:
– 0:00 – Intro
– 1:12 – The problem: In a world of Server Components, URL updates are blocked by a server-side roundtrip
– 10:44 – Attempted solution: Use the browser’s Native History API (history.pushState)
– 15:03 – Realization: The source of truth flips from server to client during the transition – which is exactly what useOptimistic was designed for
– 17:54 – Unwinding our mental model of client-first React apps by thinking about how HTML-only checkout forms work
– 21:44 – The intuition behind React Transitions, and how they put our UI into a state of preparation
– 30:39 – How Transitions improve upon default browser behavior by keeping our current UI 100% responsive, and how useOptimistic solves the checkbox filter panel
– 37:46 – 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

SOCIAL:
Twitter: https://twitter.com/frontendfirstfm