I added parallel and recursive route rendering to Twofold, which kind of blew my mind. It's the first time I've used a React pattern that specifically takes advantage of the two phase server/client render. Wrote about it here: twofoldframework.com/blog/paralle...
Parallel and recursive route rendering
RSC route rendering without waterfalls.
twofoldframework.com
New blog post: Composable streaming with Suspense One of my favorite patterns lately has been using Suspense to stream in lazily loaded content. It's perfect for dynamic dropdown menu options. twofoldframework.com/blog/composa...
Composable streaming with Suspense
A look at two real-world UIs that rely on streaming with Suspense.
twofoldframework.com
React Router RSC Preview is now available This brings support for all of React's API in a way that is incrementally adoptable by the millions of React Router apps in production today, but also feels great for a greenfield React Router app remix.run/blog/rsc-pre...
React Router RSC Preview
React Router's preview support for React Server Components is now available
remix.run
Server Components Give You Optionality saewitz.com/server-compo...
Server Components Give You Optionality | Daniel Saewitz
saewitz.com
New blog post on serializing promises in React. Learn how RSC serializes data between the server and client. twofoldframework.com/blog/you-can...
You can serialize a promise in React
Use React to create a promise on the server and later finish it on the client.
twofoldframework.com
If you're running an RSC server how do handle the react-server condition? 1. start node with --conditions=react-server? 2. run node without conditions, but start a worker with the react-server condition? 3. Something else, like a bundle time thing? I've been doing 1, but I'm not sure it's best
I wrote about building toast messages into an app with React Server Components. Really liked how easy it was to use server functions, cookies, and useOptimistic to make this all come together. buildui.com/posts/toast-...
Toast messages in React Server Components
buildui.com
RSC with a form and server action running while JavaScript is turned off
Hey @sebmarkbage.calyptus.eu I have an RSC+MPA question... is there a way to have a <form> that uses a server action directly (so you get $ACTION_ID/REF inputs for MPA), but then after hydration is able to work with client-side code that uses useOptimistic?
Completed this! Ended up releasing it as an open source library: github.com/twofold-rsc/... My first RSC OSS tool, feels good :)
Ryan Toronto@ryantoron.to · 2y agoOne of the areas where I've changed my mind recently is with server actions + closures. In the past I believed it was too dangerous to close over variables during render because it creates an implicit client param and therefore devs would be better off being explicit with hidden form inputs. but...
Next.js source is a work of art. I was wondering how they serialize and encrypt action args and found this: github.com/vercel/next.... Of course they use an rsc stream to serialize all the args into a string... and then encrypt!
One of the areas where I've changed my mind recently is with server actions + closures. In the past I believed it was too dangerous to close over variables during render because it creates an implicit client param and therefore devs would be better off being explicit with hidden form inputs. but...
I made a video on useActionState! There's a lot of awesome stuff built into this hook - namely the queuing behavior and the fact that it's made to be used with transitions. Actions are one of the coolest things coming to 19 www.youtube.com/watch?v=p_wn...
React 19: useActionState
YouTube video by Ryan Toronto
youtube.com
React is a programming language, and its rules are its syntax. buildui.com/posts/react-...
React is a programming language, and its rules are syntax
buildui.com
Today's uAS thought: There's a beautiful refactor from a client-side only React app to a server backed React app in three steps.
