Why I Stopped Reaching for a State Management Library

I've been working with Vue for about 5 years now, and my opinions on server-side rendering have changed more than I expected.

The first symptom was subtle. Nothing failed outright, but server-side rendering kept drifting in the wrong direction, and every fix seemed to make the next one harder.

Some background

Most of the complexity was accidental. Over the years we'd layered three different approaches to server-side rendering on top of each other, and each one made sense at the time.

The setup was ordinary: Vue at the edges, TypeScript doing most of the heavy lifting, and a handful of scripts nobody wanted to own. It worked well until usage roughly doubled over a single quarter.

A simpler approach

Rather than a big-bang rewrite, we migrated one module at a time over about 7 weeks, keeping both paths alive behind a flag.

The core of it looks like this:

.card-list {
  container-type: inline-size;
}

@container (min-width: 36rem) {
  .card {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: 1.5rem;
  }
}

It's tempting to generalize this into a library. Resist that urge until you've needed it in at least three places.

A few things that helped along the way:

Agree on what "done" means before the first pull request.
Delete dead code aggressively; it's the cheapest refactor there is.
Keep the old path around until the new one has survived a real incident.

Caveats

We still haven't solved hydration. That's a post for another day, and honestly, I'm not sure we'll get it right the first time either.

None of this is free. The new approach is a bit more verbose, and newcomers occasionally ask why we don't just use React for everything. That's a fair question with a boring answer: we tried, and it made server-side rendering harder to reason about.

Wrapping up

Six months in, nobody on the team wants to go back. That's about the best review a change like this can get.