I updated @_buildui's user search to use React Server Components with Next 13's appDir.
The code for this was so simple.
00:00
Ryan Toronto
2,012 posts
- Fun little RSC experiment today... Passing a pending db query into a client component. Kinda mind blowing you can pass promises over the network like this 😉
- Here's a little component I use in all my RSC apps. It refreshes all the data fetched in a React Server Component whenever the window gets refocused. buildui.com/recipes/refres…
- Using mjml + React to code emails is amazing. Since your emails are React components you can render them anywhere in your app. Here's a little preview tool that shows me emails for recent purchases.
- The first part of my tutorial on pagination w/ RSC has been published! It still blows my mind you can read query params, use Prisma, and render Next's <Link> tag in a single component.
- SSR + Suspense + Streaming! I got SSR added to my RSC implementation and one of the coolest things is streaming just works. Here's HTML being streamed down to the browser as the suspense boundaries resolve. Amazing that React gives you the APIs needed to build this:
00:00 - Pagination w/ RSC + query params + Next's <Link> component. Feels snappy fast, and the back button works out of the box.
00:00 - Stole this idea from Remix: An <Await> component that suspends for a promise. The nice thing about this is it lets me try out different loading UIs before extracting and naming a new component, defining its props, and declaring its types.
00:00 - Here's the submit button I am using with my React Server Actions. It uses `useFormStatus()`, a new experimental hook from React, to control the loading spinner. This is how it works…
GIF - Just published a Build UI recipe for this <Await> component. Absolutely love using this! buildui.com/recipes/await-…Stole this idea from Remix: An <Await> component that suspends for a promise. The nice thing about this is it lets me try out different loading UIs before extracting and naming a new component, defining its props, and declaring its types.00:00
- Replying to @ryantotweetsNext, the server component reads the query param, performs a search, and re-renders the list of users. All this happens server-side:
- Replying to @ryantotweetsHere'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:
- Having a lot of fun with useFormState + server actions. It's like a useReducer() where the state lives on the client and the action lives on the server.
00:00
