Next.js, React, performance, design systems, and edge runtime patterns.
Partial Prerendering promises a static shell with dynamic holes. In production, the line between the two is blurrier than the docs suggest. Here's what tripped us up and how we fixed it.
A war story about chasing a stubborn 0.18 CLS score on a publishing site, and the font subsetting and fallback metrics work that finally got us to 0.02.
Server Actions look like plain function calls, but every one is a POST to your origin. Here's what happened when ours got hammered — and the edge rate-limiting pattern we now ship by default.
React 19's useOptimistic hook is easy to reach for and hard to get right. Here's the pattern we settled on after shipping — and rolling back — three variants in production.
revalidatePath('/') is the loaded gun in your CMS integration. Here's how we replaced it with a cache tag taxonomy that survives editorial workflows without evicting the world.
Server actions look like function calls, but they're POST requests over an unreliable network. Here's how we stopped charging cards twice and duplicating orders in production.
Next.js parallel and intercepting routes finally make modals feel native — deep-linkable, shareable, and refresh-safe. Here's the pattern that held up in production, and the places it quietly falls apart.
We wrapped everything in Suspense expecting faster pages. Instead LCP got worse. Here's what streaming actually does to Core Web Vitals, and how to place boundaries so the numbers move the right way.
We swapped useFormState for useActionState across a mid-sized Next.js app. Here's what silently broke, what the docs don't tell you, and the patterns we ended up standardising on.
Partial Prerendering promised the best of static and dynamic. After shipping it on a few real apps, here's what actually works, what silently degrades, and where the sharp edges hide.
Server Components look magical until you hit a serialization wall. Here's how the boundary actually works, why 'functions cannot be passed to client components' keeps appearing, and how to design around it.
next/font is supposed to make font loading boring. In three recent audits it was the single biggest CLS contributor. Here's what's actually happening and how to fix it without ripping out the whole pipeline.
React 19's useOptimistic looks like a free win until a server action fails halfway through a batch and your UI cheerfully shows state that never existed. Here's how we got burned and how we now use it.
Middleware feels like the obvious place to gate auth in the App Router. Then the cold starts, cookie races, and stale sessions show up. Here's what we changed after shipping this to real traffic.
Server Actions look like the obvious choice for every mutation in the App Router. They aren't. Here's how we decide between actions and route handlers on real projects, with the failure modes we've hit.
Cache tags in Next.js finally give us a real invalidation model, but they punish sloppy tagging with stale data and surprise revalidations. Here's how we tag, invalidate, and debug them in production.
Streaming SSR is not a free win. Put Suspense in the wrong place and you'll ship a page that feels slower than the blocking version. Here's how we decide where the boundaries go.
A war story about how six innocent-looking SDKs turned a lean Next.js App Router build into a 480 KB client bundle, and the audit playbook we now run before every launch.
Partial Prerendering promises a static shell with dynamic holes streamed in. Here's what that means for your Core Web Vitals, your cache bill, and the bugs you'll only see under real traffic.
Server Actions look free until traffic shows up. Here's what happens when your form submissions start serializing megabytes of closure state — and how to keep the wheels on.
next/font promises zero layout shift and no external requests. On mid-range Android, it can also add 200ms to your INP. Here's what we found and how we fixed it.
React 19's `use` hook looks like the clean answer to promises in client components. It mostly is — until you hit the re-render trap, the Suspense boundary confusion, and the cache invalidation mess.
Middleware runs on every request. We watched a 40KB dependency turn into 400ms of added latency across every route. Here's how we found it, fixed it, and set guardrails so it never happens again.
Analytics, chat widgets, and A/B testing tools quietly break React Server Components in ways that don't show up until production. Here's the pattern we use to keep them from poisoning hydration and TTI.
revalidateTag looks simple until your CMS editor clicks Publish and half the site rebuilds. Here's how we tag, invalidate, and debug cache in a real App Router app.
Suspense boundaries in the Next.js App Router are a scalpel, not a sledgehammer. Put them in the wrong place and you'll ship a page that streams beautifully but tanks LCP. Here's how we decide where they go.
Server actions look tempting for every mutation, but they're the wrong front door for public APIs. Here's the rule we use in production, and the failure modes that taught us the difference.
Partial Prerendering promised the best of static and dynamic. After shipping it across three production apps, here's what works, what breaks, and where the seams still show.
Server Actions in Next.js feel like magic until your app grows up. Here's where they shine, where they hurt, and the rules we now apply before reaching for them in production.
React 19's useOptimistic looks like a free win until you ship it. Here's what broke for us in production — race conditions, ghost rows, and reconciliation traps — and the patterns we now use instead.
next/font is great until it isn't. A practical breakdown of when to use it, when to ship raw @font-face, and how to stop fonts from wrecking your LCP and CLS scores.
Cross-document view transitions finally landed in stable browsers and Next.js shipped a primitive for them. Here's what actually works in production, what still tears, and how to keep CLS honest.
Next.js middleware looks like the perfect place for auth. Then your bundle balloons, your Edge runtime chokes on a Node API, and your login redirects loop. Here's how we untangled it.
A war story about how `revalidateTag` and a disciplined tagging scheme replaced our nightly full-cache purge — and the four gotchas we hit getting there in production.
Streaming SSR is free performance — until it isn't. Where you place Suspense boundaries decides whether your page feels fast or stutters its way through a waterfall of spinners.
Server Components feel magical until you try to pass a Date, a class instance, or a function through the boundary. Here's how to design around the serialization wall instead of fighting it.
Partial Prerendering looked like free performance on the demo slide. Then we shipped it. Here's what actually breaks when you flip the flag on a real Next.js app — and how we'd roll it out now.
Server actions feel like free API endpoints. They aren't. Here's what we learned shipping them to production traffic, and the patterns that kept latency and bills in check.
React 19's `use` hook looks like a cleaner way to read promises and context. In production it has sharp edges. Here's where it earns its keep and where it quietly tanks your app.
A practical walkthrough of moving a React design system from styled-components themes to CSS custom properties and design tokens — without a big-bang rewrite or a Monday morning rollback.
next/font is supposed to make fonts a solved problem. It isn't. Here's why your Largest Contentful Paint still regresses, and how to actually fix it.
The View Transitions API graduated from Chrome-only experiment to a real cross-browser feature. Here's how to wire it into Next.js App Router without breaking streaming, hydration, or your sanity.
revalidateTag, revalidatePath, and the Data Cache look simple until you ship them. Here's how we reason about Next.js caching layers, what bites teams in production, and the mental model we wish we'd had on day one.
Suspense in the Next.js App Router is a TTFB lever, not a loading spinner. Here's how we decide where the boundaries go on real product pages — and where they backfire.
useOptimistic feels magical in demos and brittle in production. Here's how we wire it up so optimistic UI doesn't lie to users when the network goes sideways.
Partial Prerendering promises the speed of static with the freshness of dynamic. Here's what actually happens when you ship it past a marketing site, and where it quietly bites.
Server Actions look magical in demos. Six months into a real Next.js App Router build, here are the failure modes we keep hitting — and the patterns that actually hold up under traffic.
