I updated Build UI's user search to use React Server Components with Next 13's appDir. The code for this was so simple.

Here's the search component. It's a client side input that starts a transition via the onChange event. The transition adds the search term as a query param and then pushes the browser to that url:

Next, the server component reads the query param, performs a search, and re-renders the list of users. All this happens server-side:

What I find so cool about this approach: - 50ish lines of code - Fully interruptible - `isPending` to know when a search is running - No state, effects, or XHR requests - No race conditions - Sharable URL by default

I'm loving RSC. Makes writing a React app feel like something you'd see in PHP or Rails, but you also get the benefit of the world's best templating language 😉

@_buildui Very cool!

@_buildui Cool stuff combining the useTransition and replace from useRouter! This is the first time I see something like this 😁, or is it being used (or is there an example) somewhere else?

@_buildui My understanding is that Next's router and RSC are suspense based, so you can useTransition when navigating to keep old state rendered. First saw this in this example by @delba_oliveira:

@_buildui Does loading screen work in this case? Some times we want the loading state to show and thats why i use shallow routing and depend on react query

@_buildui Yup, loading screen works. If you were to refresh the page you'd see the normal loading screen.

@_buildui So this is all really cool. I watched your vid (ep #155). I understand it. But what happens when I want to do this in a nested component, that could be rendered anywhere – not just on a particular page/URL? Is there a "nested" layout/hidden url I can use to drive this?